进度条代码


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.js"></script>
<script>
$(function(){
$(".mybutton").click(function(){
    var newValue=0;
    var myid=setInterval(update,50);        
function update(){
        if(newValue<100){
            newValue++;
            $("#p").val(newValue);
            $(".myspan").text(newValue);
        }else{
            clearInterval(myid);
        }    
    }
});
    
});
</script>
</head>
<body>
<p>完成百分比:<progress id="p" max=100 value="0"></progress><span class="myspan">0</span>%</p>
<input type="button" class="mybutton" value="点击me"/>

</body>

</html>

（显示效果如左图所示）

这里要注意的是：

var myid=setInterval(update,50);

中①函数update不要加扩号，因为加入了括号相当于只执行了一次函数。

②函数update不要加引号，也不要传入参数，参数的变化在函数中取体现（这只是暂时发现，如果有错误，再改正）

原文地址：https://www.cnblogs.com/xiaozhumaopao/p/5744216.html