网页、web进度条简单实现

直接上源码：

添加了jquery的依赖，如果不使用jqury，直接把jquery获取dom的部分换为js即可：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js"></script>
<script src="js/chart.js/Chart.min.js"></script>

 <style>
     .box {
         border-radius: 30px;
         width: 200px;
         height: 30px;
         background-color: #ccc;
         border: 1px solid #0f0;
         padding: 0px;
     }
     
     .clip {
         background-color: #f00;
         width:1%;
         height:30px;
         border-radius: 20px 0 0 20px;
         text-align: center;
     }
     
     .over {
         border-radius: 20px;
         background-color: #0f0;
     }
</style>
</head>
<body>
    <div class='box'>
        <div class='clip' id="context">
            <span id="number">0%</span>
        </div>
    </div>
</body>
<script type="text/javascript">
    $(function(){
        function show(){
            var temp = $("#number").text();
        var c = parseInt(temp.substr(0,temp.length-1));
        c = c + 5 > 100 ? 100 : c + 5;
        $("#number").text(c+"%");
          $("#context").width(c+"%");
          if(c == 100){
              $("#context").attr("class","clip over");
              clearInterval(key);
          }
        }
        var key = setInterval(show,100);// 注意函数名没有引号和括弧！ 
    });

</script>
</html>

好吧，少于150不能发布，可是该篇就这么多字呢；

网页、web进度条简单实现

推荐阅读