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

魑.魅.魍.魉

于 2019-06-14 22:43:39 发布

阅读量330

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/weixin_41998682/article/details/92015754

版权

js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个简单的HTML和JavaScript实现的进度条动画效果。通过修改宽度属性来更新进度条的显示状态，展示了如何使用按钮触发进度变化，适用于网页设计和用户交互界面的动态效果制作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>