最简易的动态进程条

By admin in 4858美高梅 on 2019年4月12日

4858美高梅 ,最简易的动态进程条。1.效果

 4858美高梅 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>

</body>
</html>

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有