Html 之进度条

编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="bt1">开始</button>
    <button id="bt2"> 停止</button>
    <div>
        当前进度：<span id="sp1">  10%</span>
        <progress id="pr1" max="100" min="0" value="10"></progress>
    </div>
    <script>
        window.onload=function(){
            document.getElementById("sp1").innerText="0%";
            document.getElementById("pr1").value="0";
            let time=null;
            document.getElementById("bt1").onclick=function(){
                 if(time!=null) return;
                time=setInterval(function(){
                    let i=parseInt(document.getElementById("pr1").value);
                    if(i==100 && time!=null)
                    {
                        clearInterval(time);
                        return;
                    }
                    i++;
                    document.getElementById("pr1").value=i;
                    document.getElementById("sp1").innerHTML=i.toString()+"%";
                },1000)
            };

            document.getElementById("bt2").onclick=function(){
                clearInterval(time);
                time=null;
                
                // return;
            };
        };
    </script>

</body>
</html>

运行结果


posted @ 2021-08-15 17:15  阿向向  阅读(608)  评论(0)  编辑  收藏  举报