bootstrap创建动态进度条

最新推荐文章于 2024-09-03 03:15:58 发布

Simon_01_01

最新推荐文章于 2024-09-03 03:15:58 发布

阅读量4.6k

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/Mr_Black1/article/details/72354361

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何利用Bootstrap框架创建动态进度条，展示了效果，并提供了相应的源代码，帮助读者掌握这一功能的实现。

摘要由CSDN通过智能技术生成

效果图：

附源码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">

    <title>进度条</title>

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>
<body>

<div id="div11" class="progress progress-striped active">
    <div id="div1" class="progress-bar progress-bar-success">
        <span class="sr-only">40% 完成</span>
    </div>

</div>

</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
    var progress = 1;
    var totalWidth = $('#div11').css('width');
    var initstr='';
    $(function () {
        initstr = setInterval("change('div1')",100);
    })
    function change(id){
        console.log(progress);
        $('#'+id).css({
            width:progress
        })
        if(progress==totalWidth){
            clearInterval(initstr);
        }
        progress= progress+1;
    }
</script>
</html>