定时任务+进度条的开始和停止

334 阅读1分钟
通过前台的定时任务控制,进度条的进度

进度条前端jsp代码

//需要引用bootstrap
<span id="progress-tips"
      style="color: #000000;line-height: 1rem;font-size: 1.4rem;font-weight: 700;letter-spacing: 0;"></span>
<p></p>
<div class="progress">
    <div class="progress-bar" id="stime" role="progressbar" aria-valuenow="60" aria-valuemin="0"
         aria-valuemax="100"></div>
</div>
<span id="progress-value"
      style="color: #ff0000;line-height: 1rem;font-size: 1.4rem;font-weight: 700;letter-spacing: 0;"></span>
 <button id="start" type="button">开始</button>
 <button id="stop" type="button">停止</button>

进度条前端js代码

$(function () {
            var yun;
            //点击开始按钮
            $("#start").click(function () {
                //循环函数,进度条移动
                //yun是返回值,以此来确定后面停止的是哪个循环函数
                //setInterval("要循环的函数",每次循环的时间(毫秒));
                yun=setInterval("stime()", 1000);
            })
            //点击关闭按钮
            $("#stop").click(function () {
                    clearInterval(yun)
            })
        });
        function stime() {
            //获取进度条的value值
            var time=$("#stime").val();
            //进度条value值+1再赋值给进度条
            $("#stime").val(time+1);
            $("#progress-value").val('  总共' + length + '条消息' + ',已补发' + start + '条消息。');
            $("#progress-tips").val('  正在补发消息');
      }