进度条（点击一次进一点，意思是后台传入一个数就进度就多一点）

最新推荐文章于 2021-12-09 13:27:27 发布

java_zhaoyanli

最新推荐文章于 2021-12-09 13:27:27 发布

阅读量1.3k

点赞数 1

分类专栏： myWork--

本文链接：https://blog.csdn.net/java_zhaoyanli/article/details/52861649

版权

myWork-- 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

<!DOCTYPE"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>进度条</title> 
<style type="text/css"> 
  body{ 
    text-align:center; 
  } 
  .graph{ 
    width:450px; 
    border:1px solid #F8B3D0; 
    height:25px; 
  } 
  #bar{ 
        display:block; 
        background:#FFE7F4; 
        float:left; 
        height:100%; 
        text-align:center; 
    } 
    #barNum{ 
        position:absolute; 
    } 
</style> 
<script type="text/javascript"> 
function $(obj){ 
    return document.getElementById(obj); 
} 
function go(){ 
    $("bar").style.width = parseInt($("bar").style.width) + 1 + "%"; 
    $("bar").innerHTML = $("bar").style.width; 
    if($("bar").style.width == "100%"){ 
        window.clearInterval(bar); //进度为100时清除定时器
    } 
} 
//var bar = window.setInterval("go()",50); //设置定时器
window.onload = function(){ 
    bar; 
} 
</script> 
</head> 
<body> 
<div class="graph"> 
<strong id="bar" style="width:1%;"></strong> 
</div> 
<input type="button" value="+1" οnclick="go()">
</body> 
</html>