JS-进度条的实现（只是一个页面效果）

最新推荐文章于 2023-11-09 11:24:12 发布

魑.魅.魍.魉

最新推荐文章于 2023-11-09 11:24:12 发布

阅读量298

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_41998682/article/details/92015754

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>This is test</title>
<style>
    #main{
        width: 100%;
        height: 30px;
        background: aliceblue;
    }
    #progress{
        width: 30px;
        height: 28px;
        margin-top: 1px;
        background: darkgreen;

    }
</style>
</head>
<body>
    <div id="main">
        <div id="progress">

        </div>
    </div>
<button id="start">开始</button>
</body>
<script>
    start.onclick = function () {
        pro = 0;
        v = 1
        obj = setInterval(function () {
            pro+=v;
            if (pro>50) {
                v = 10;
            }
            if (pro>100){
                clearInterval(obj);
            }
            progress.style.width = pro+'%';
        },100)
    }
</script>
</html>

魑.魅.魍.魉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-进度条的实现（只是一个页面效果）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>This is test</title><style> #main{ width: 100%; height: 30p...
复制链接

扫一扫

专栏目录