網頁、web進度條簡單實現

本文轉載自查看原文 2018-08-30 17:29 1209 網頁技術

直接上源碼：

添加了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不能發布，可是該篇就這么多字呢；

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前端網頁加載進度條的實現實現一個簡單的進度條 Linux shell 下簡單的進度條實現一個簡單的python3 實現進度條 python實現進度條 css實現橫向進度條和豎向進度條 CSS實現進度條和訂單進度條用js寫一個網頁進度條 web文件上傳，帶進度條 pyqt5的簡單進度條程序