最简单的动态进度条

最新推荐文章于 2022-07-06 14:15:46 发布

我爱丁丁猫

最新推荐文章于 2022-07-06 14:15:46 发布

阅读量92

点赞数

分类专栏：前端文章标签： html5、css3、javascript

原文链接：https://www.mk2048.com/blog/blog.php?id=hiki1jajcbcb&title=%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E5%8A%A8%E6%80%81%E8%BF%9B%E5%BA%A6%E6%9D%A1

版权

前端专栏收录该内容

1898 篇文章 4 订阅

订阅专栏

1.效果

2.源码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script type="text/javascript">
        window.onload = function () {
            var myProgress = document.getElementById("myProgress");
            var mySpan = document.getElementById("mySpan");
            var value = myProgress.value;
            mySpan.innerText = value   "%";
            var ID = setInterval(function () {
                value = myProgress.value;
                if (value < 100) {
                    value  = 10;
                    myProgress.value = value;
                    mySpan.innerText = value   "%";
                }
                if (value == 100) {
                    clearInterval(ID);
                }
            }, 500);
        }
    </script>
</head>
<body>
<label for="myProgress">进度条</label>
<progress id="myProgress" value="0" max="100"></progress>
<span id="mySpan"></span>
</body>
</html>