bootstrap的滚动条简单动起来

最新推荐文章于 2023-01-10 20:28:48 发布

weixin_30711917

最新推荐文章于 2023-01-10 20:28:48 发布

阅读量208

点赞数

原文链接：http://www.cnblogs.com/zhangsiyuan/p/7723457.html

版权

引入css部分

<!--使用bootstrap必须存在的css-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!--Width=device-width   表示宽度是设备屏幕的宽度 
　　Initial-scale=1    表示初始化的缩放比例 
　　maximun-scale=1    表示最大缩放的比例
　　User-scalable=yes    表示用户是否可以调整缩放比例
-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

html部分(可以在bootstarp官网上查看)

<div class="progress">
    <div class="progress-bar progress-bar-info progress-bar-striped active" style="width:10%">10%</div>
    <div class="progress-bar progress-bar-warning progress-bar-striped active" style="width:20%">50%</div>
    <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width:50%">90%</div>
</div>

引入js部分

<!--必须引入的-->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

是滚动条动起来的js

<script>
    /*$(function(){
        var pro = $("#progress");
        var i = 0;
        var inter = setInterval(function(){
            if (i>=100){
                clearInterval(inter);
            }
            pro.css({"width":i+"%"});
            pro.text(i+"%");
            i++;
        },200);
    });*/
</script>

转载于:https://www.cnblogs.com/zhangsiyuan/p/7723457.html