随机数实现进度条效果

和蔼的阿木木o

于 2022-08-01 09:18:05 发布

阅读量171

点赞数

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

本文链接：https://blog.csdn.net/m0_59642141/article/details/126094248

版权

js 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

 <style>
        .box{
            width: 400px;
            height: 40px;
            border: 1px solid #000000;
        }
        .box #bon{
            background-color: green;
            height: 41px;
            width: 0px;
            text-align: center;
            line-height: 40px;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <div class="box">
        <div id="bon">
            <span id="va" style="color:#ffffff ;"></span>
        </div>
    </div>
</body>
<script>
    var val = document.getElementById("bon");
    var va = document.getElementById("va");
    var num = 0;
    var timer =  function(){
        var x = Math.floor(Math.random()*10);
        num +=x;
        if(num<=100){
            val.style.width=(num + '%');
            va.innerHTML=(num + '%')
        }else{
            val.style.width = ("101%");
            va.innerHTML = ("100%");
            val.innerText = "下载完毕";
            clearInterval(timer);
        }
        
    }
    setInterval(timer,1000);

</script>