欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

最简单的动态进度条

程序员文章站 2022-06-26 11:16:06
1.效果 2.源码 ......

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>