简单进度条实现

最新推荐文章于 2022-03-15 14:21:25 发布

紫蓝清秋

最新推荐文章于 2022-03-15 14:21:25 发布

阅读量185

点赞数

分类专栏： css JavaScript 文章标签： javascript css html

本文链接：https://blog.csdn.net/sqitarn/article/details/109174941

版权

JavaScript 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

实现进度条

<!--进度条-->
<div class="votebox" style="margin:0 auto 0 33px">
    <dl class="barbox">
        <dd class="barline">
            <div w="1000" style="width:0px;" class="charts"></div>
        </dd>
    </dl>
</div>
<!--剩余秒数走完进度-->
 <p style="color: gray; position:absolute; top:228px; right:27px;font-size:28px;" class="mms"><span class="mm">0</span>s</p>

/* votebox */
.votebox{width:860px;margin-left:15px;text-align:left;position:relative;z-index:66;}
/* barbox */
.barbox{height:26px;line-height:26px;overflow:hidden;}
.barbox dt a{color:#0048CC;}
.barbox dd{float:left;}
.barbox dd.last{color:#999;}
.barbox dd.barline{width:860px;background:url(../images/jdtbg.png) left center no-repeat;height:26px;overflow:hidden;display:inline;border-radius:12px;}
.barbox dd.barline div.charts{height:26px;overflow:hidden;background:url(../images/barbg.gif) center no-repeat;}

function animate(ss){
    var m = 0;
    $(".charts").each(function(i,item){
        // 执行函数，进度条执行
        $(item).animate({
            width: ss+"%"
        },100, function() {
            // 如果进度条满100，执行替换文字
                if(ss == 100){
                $('.votebox').width("825px")
                $('.barbox dd.barline').width("825px")
                $('.mms').empty().html('已完成').attr('su', 'yi');

            }
        });
    });
    
}
// 进度条初始值
ss = 0
// 需要执行多少秒
mm = 19;
function setTime() {
    // 显示剩余秒数
    $('.mm').html(mm);
    mm = mm-1
    console.log(mm)
    // 获取su属性，表示完成，停止执行
    if($('.mms').attr('su') === 'yi') {
        return false;
    }
    // 每秒钟执行一次
    setTimeout('setTime()',1000);
    // 进度条每秒加5
    ss = ss +5;
    // 执行进度条
    animate(ss)
    
}
setTime();