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

阿新 • • 發佈：2018-08-22

fun 調用函數 auto pro meta har onload 更新 box

不定時的更新，這一次采用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模仿下載進度條效果

fun 調用函數 auto pro meta har onload 更新 box 不定時的更新，這一次采用JavaScript 模仿下載進度條效果。原理：兩個div嵌套，裏面的寬度0，外部自己隨便定義，采用 setInterval() 函數增加裏面的div 的 width

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

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

記錄小文件上傳的幾個例子（含進度條效果，附源碼下載）

js 文件下載進度條

JavaScript 以及 css3進度條

下載進度條

Python 實現下載進度條(不帶GUI界面)

模仿進度條效果

CodePush自定義更新彈框及下載進度條

專案常見功能(1) 下載批量下載大檔案下載下載進度條

除了vim, 還有哪些常用的牛逼的編輯器，除了gcc, 還有哪些常用的牛逼的編譯器，為什麼除錯的時候需要編譯選項中新增 -g，調研readelf命令，Linux下實現進度條程式.

專案常見功能(1) 下載批量下載大檔案下載下載進度條

封裝進度條（react + 無狀態元件，補充antd.desgin進度條）

iOS 8 WkWebView 網頁的配置和前進，後退，js 互動和進度條的載入

android仿照IOS AppStore下載進度條

自定義View，又一種進度條的呈現，CircleProgressView使用解析

Android檔案下載進度條的實現

Android 下載模組，使用Xutils3 的下載功能，Activity和services資料互動，listview顯示下載進度

關於網頁載入，頁面頂部顯示頁面載入線性進度條效果實現。

手擼一個預載入頁面，酷炫環形進度條

IOS自定義圖片瀏覽器，支援瀏覽多張圖片，點選，雙擊，兩手指縮放操作，並顯示載入進度條

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

相關推薦