sparkline HTML进度条设置

最新推荐文章于 2021-11-15 15:12:08 发布

zolty

最新推荐文章于 2021-11-15 15:12:08 发布

阅读量262

点赞数

本文链接：https://blog.csdn.net/qq_41854291/article/details/105230015

版权

1.HTML中加入div sparkline

<div class="col-sm-3">
   <div class="ibox">
      <div class="ibox-content">
          <h2>
            <label class="col-sm-3 control-label">进度:</label>
          </h2>
          <div class="text-center">
               <div id="sparkline6"></div>
          </div>
          <div id="updateTime">
          </div>
       </div>
   </div>
</div>

2.添加js代码，并添加刷新计时器

$(document).ready(function () {
        var now = new Date();
        var hour = now.getHours();//得到小时
        var minu = now.getMinutes();//得到分钟
        var sec = now.getSeconds();//得到秒
        if (hour < 10) hour = "0" + hour;
        if (minu < 10) minu = "0" + minu;
        if (sec < 10) sec = "0" + sec;
        var updateTime = hour + ":" +minu + ":" + sec;
        document.getElementById("updateTime").innerHTML = updateTime;//添加跟新的时间
        timer = setTimeout(function(){location.reload()},5000); //指定5秒刷新一次
        var zs= 4;//总数
        var wcs=s 2;//完成数=2
        var wwcs= 2;//未完成数=4-2，也可以从HTML中获取值
        $("#sparkline6").sparkline([wcs, wwcs], {//进度条 2：2 ,即50%效果
            type: 'pie',
            height: '140',
            sliceColors: ['#1ab394', '#F5F5F5']
        });
    });

3.刷新计时器停止方法，可以设置某个终止按钮