突發奇想，JavaScript模仿下載進度條效果

最後更新：2018-08-22 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：lse gre 更新調用函數調用背景色 color == http

不定時的更新，這一次採用JavaScript 模仿下載進度條效果。原理：兩個div嵌套，裡面的寬度0，外部自己隨便定義，採用 setInterval() 函數增加裡面的div 的 width的值，使其背景色慢慢平鋪開來，同時增加一個計數值“index” 表示進度。採用

 window.getComputedStyle()函數擷取寬度.

直接show code:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        #fa{            width: 600px;            height: 50px;            margin: 100px auto;            background-color:#ffffff;            border: 0.5px solid #999999;            border-radius: 1px;            box-sizing: content-box;        }        #ch{            width: 0px;            height: 50px;            background-color: pink;            text-align: right;            color: green;            line-height: 50px;            box-sizing: content-box;        }    </style></head><body>        <div id="fa">        <div id="ch">        </div>        </div><script type="text/javascript">    window.onload=function () {        var ta_length=600;  //fa 的寬        var ta_time=200;// 走到頭的時間        var ta_min=20;// 走一步的速度        Ago(ta_length,ta_time,ta_min); //調用函數    function Ago(ta_length,ta_time,ta_min) {           var  elem=document.getElementById("ch"); //擷取ch           var fa=document.getElementById("fa");           var stepLength=ta_length/ta_time;           var cover=0;           var index=0;            alert("開始下載");          var step=function() {                   index+=0.5;               if (cover+stepLength<=ta_length){                   elem.style.width=parseFloat(getStyle(elem,‘width‘))+stepLength+‘px‘; //擷取的寬度與每一步stapLength相加                   elem.innerHTML=index+"%";// 計數值                   cover+=stepLength; // ch的寬度增加                                              if (index==100){                            elem.style.backgroundColor="green";//百分百後背景顏色變化                        }               }               else {                   fa.style.border="0px";                   clearInterval(IntervalId);                   elem.style.border="1px solid green";                   elem.innerHTML=" ";                   alert("下載完成");               }           }        var IntervalId=setInterval(step,ta_min);    }    function getStyle(elem,cssname) {        if(window.getComputedStyle){            return window.getComputedStyle(elem)[cssname] //擷取ch 的寬度        }else{            return elem.currentStyle[cssname];        }    }    }</script></body></html>

您可以：點擊這裡查看效果

突發奇想，JavaScript模仿下載進度條效果

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More