HTML5+CSS3+JavaScript进度条代码

最新推荐文章于 2024-06-14 09:24:52 发布

hello141219

最新推荐文章于 2024-06-14 09:24:52 发布

阅读量207

点赞数 2

分类专栏： HTML网页代码文章标签： html5 css3 javascript

本文链接：https://blog.csdn.net/lamchichentao/article/details/136168406

版权

HTML网页代码专栏收录该内容

7 篇文章 0 订阅

订阅专栏

代码
运行结果

代码

<!--声明文档类型--> 
<!DOCTYPE html> 
<!--html标签--> 
<html> 
    <head> 
        <!--网页标题--> 
        <title>Web</title> 
        <style> 
            /*设置进度条样式*/ 
            #myProgress { 
                width: 100%; 
                background-color: #ddd; 
            }

            #myBar {
                width: 100%;
                height: 30px;
                background-color: #4CAF50;
            }
            /*设置body样式*/
            body {
                font-family: Arial, sans-serif;
                background-color: #f0f0f0;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                margin: 0;
            }
            /*设置容器样式*/
            .container {
                width: 70%;
                background-color: #fff;
                padding: 2rem;
                border-radius: 5px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            }
            /*设置标题样式*/
            h1 {
                text-align: center;
                margin-bottom: 1rem;
            }
            /*设置表单样式*/
            form {
                display: flex;
                flex-direction: column;
            }
            /*设置标签样式*/
            label {
                margin-bottom: 0.5rem;
            }
        </style>
</head>
<body>
    <!--设置容器-->
    <div class="container">
        <!--设置标题-->
        <h1>进度条</h1>

        <!--设置进度条-->
        <div id="myProgress">
            <div id="myBar"></div>
        </div>

        <br>
        <!--设置暂停和继续按钮-->
        <button onclick="move()">&nbsp;暂停&nbsp;</button>&nbsp;
        <button onclick="begin()">&nbsp;继续&nbsp;</button><br><br>
    </div>
    <!--设置脚本-->
    <script>
        //获取进度条元素
        var elem = document.getElementById("myBar");   
        //设置进度条宽度
        var width = 1;
        //设置定时器
        var id = setInterval(frame, 20);
        //设置暂停状态
        var paused = false;
        
        //设置帧函数
        function frame() {
            //如果非暂停状态
            if (!paused) {
                //如果进度条已经达到100%
                if (width >= 100) {
                    //清除定时器
                    clearInterval(id);
                } else {
                    //增加进度条宽度
                    width++; 
                    //设置进度条元素宽度
                    elem.style.width = width + '%'; 
                }
            }
        }

        //暂停函数
        function move() {
            paused = true;
        }
        //继续函数
        function begin(){
            paused = false;
        }
    </script>
</body>
</html>