进度条

作者: 李景磊 | 来源:发表于2017-04-01 11:45 被阅读0次

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>HTML实例</title>
</head>
<body>
<h3>HTML实例--其他标签</h3>
<progress max="100" id="pid" value="60" style="width:700px;">
<span id="sid">85</span>
</progress>
<button onclick="doStart()">开始</button>

    <br/><br/>
    <meter min="0" id="mid" value="80" max="100" style="width:700px;">5</meter>
    
    
    <script type="text/javascript">
        var i=0
        function doStart(){
            i=0;
            running();
        }
        
        function running(){
            i++;
            document.getElementById("pid").value=i;
            document.getElementById("mid").value=i;
            document.getElementById("sid").innerHTML=i;
            //定时调用
            if(i<100){
                setTimeout("running()",30);
            }else{
                alert("over!");
            }
        }
    </script>
</body>

</html>