主题:数字化商超大屏
开发技术:
Echarts+html+css+js
支持平台:
dw,vscode,webstorm,idea,Hbuilderx等
源码:文末附
如需定制开发大屏,可在公众号内联系作者
整体效果
部分js代码
<html> <head> <meta charset="utf-8"> <title>index</title> <script type="text/javascript" src="js/jquery.js"></script> <link rel="stylesheet" href="css/comon0.css"> </head> <body> <div class="loading"> <div class="loadbox"> <img src="images/loading.gif"> 页面加载中 </div> </div> <div class="head"> <h1>数字化商超分析大屏</h1> <div class="time" id="showTime">2019年12月05日16时16分54秒</div> <script> var t = null; t = setTimeout(time, 1000);//開始运行 function time() { clearTimeout(t);//清除定时器 dt = new Date(); var y = dt.getFullYear(); var mt = dt.getMonth() + 1; var day = dt.getDate(); var h = dt.getHours();//获取时 var m = dt.getMinutes();//获取分 var s = dt.getSeconds();//获取秒 var t = null; document.getElementById("showTime").innerHTML = y + "年" + Appendzero(mt) + "月" + Appendzero(day) + "日" + Appendzero(h) + "时" + Appendzero(m) + "分" + Appendzero(s) + "秒"; function Appendzero(obj) { if (obj < 10) return "0" + "" + obj; else return obj; } t = setTimeout(time, 1000); //设定定时器，循环运行 } </script>
部分css代码
.loading{position:fixed; left:0; top:0; font-size:18px; z-index:100000000;width:100%; height:100%; background:#1a1a1c; text-align:center;} .loadbox{position:absolute; width:160px;height:150px; color: #324e93; left:50%; top:50%; margin-top:-100px; margin-left:-75px;} .loadbox img{ margin:10px auto; display:block; width:40px;} ::scrollbar {width:5px;height:5px;position:absolute} ::scrollbar-thumb {background-color:#5bc0de} ::scrollbar-track {background-color:#ddd} .head{ height:1.05rem; background: url(../images/head_bg.png) no-repeat center center; background-size: 100% 100%; position: relative} .head h1{ color:#fff; text-align: center; font-size: .4rem; line-height:.8rem; letter-spacing: -1px;} .head h1 img{ width:1.5rem; display: inline-block; vertical-align: middle; } .time{ position:absolute; right:.15rem; top:0; line-height: .75rem;color:rgba(255,255,255,.7); font-size: .26rem; padding-right: .1rem;} .mainbox{ padding:0 .2rem 0rem .2rem; height:90%} .mainbox>ul{ margin-left:-.1rem; margin-right:-.1rem; height:100%} .mainbox>ul>li{ float: left; padding: 0 .1rem;height:100%;width: 30%} .mainbox>ul>li:nth-child(2){ width: 40%} .boxall{ padding:0 .2rem .2rem .2rem; background: rgba(6,48,109,.5); position: relative; margin-bottom: .15rem; z-index: 10; } .alltitle{ font-size:.2rem; color:#fff; line-height: .5rem; position: relative;padding-left: .15rem} .alltitle:before{position: absolute; height: .2rem; width: 4px; background: #49bcf7; border-radius: 5px; content: ""; left: 0; top: 50%; margin-top: -.1rem;} .boxnav{height: calc(100% - .5rem);} .row>li{ float: left; height: 100%;}
想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。
