制作時間：12:30 - 13:30

做的是一個非常簡易的沒有實用效果的進度條。

丑陋進度條.gif

html代碼：

<div id="progressBox">
    <div id="progressBar">0%</div>
    <div id="progressText">0%</div>
</div>

css代碼：

*{margin: 0; padding: 0;}
#progressBox{ width: 300px; height: 40px; background-color: white; border: 1px solid #c8c8c8; margin: 10px; position: relative; }
#progressBar{ z-index: 2; width: 100%; height: 40px; line-height: 40px; color: white; font-size: 20px; font-weight: bold; position: absolute; left: 0; top: 0; text-align: center; background-color: #00a1f5; clip:rect(0px,0px,40px,0px); }
#progressText{ z-index: 1; position: absolute; width: 100%; height: 40px; color: black; line-height: 40px; font-size: 20px; font-weight: bold; text-align: center; }

知識點1

css2中的屬性 clip

參考：張鑫旭博客文章

用法：rect(top,right,bottom,left)

rect(30px, 200px, 200px, 20px)

clip.png

30px：裁切區域上邊緣距離原元素頂部30像素
200px：裁切區域右邊緣距離原元素左邊200像素
200px：裁切區域的下邊緣距離原元素頂部200像素
20px：裁切區域的左邊緣距離原元素左邊20像素

知識點2

js更改clip屬性

div.style.clip = "rect(0px,"+ ... +"px,40px,0px)";

不是這樣：

div.style.clip = rect(0px,"+ ... +"px,40px,0px);

知識點3

js獲取元素的 width

參考文章：http://www.thinksaas.cn/topics/0/265/265251.html

(1)如果css是內聯的話

document.getElementById('div').style.width

(2)使用嵌入、鏈入或引入樣式表（非內聯樣式），這時候通過element.style.width　是獲取不到的

//IE：通過 currentStyle     
      
   alert(document.getElementById('div').currentStyle.width);

                          
//firfox,safari,opera,chrome：通過 window.getComputedStyle  
                           
   alert(window.getComputedStyle(div,false).width);

所以定義了一個很小的方法：

function getWidth(opt,attr){

    if(opt.currentStyle){
        return(opt.currentStyle[attr]);
    }else{
        return window.getComputedStyle(opt,false)[attr];
    }

}

完整的js代碼：

window.onload = function(){

    var inow = 0;
    var timer = setInterval(function(){

        if(inow == 100){
            clearInterval(timer);
        }else{
            inow +=1;
        }
        progressFn(inow);

    },30);


    function progressFn(cent){

        var Box = document.getElementById("progressBox");
        var Bar = document.getElementById("progressBar");
        var Text = document.getElementById("progressText");

        var allWidth = parseInt(getWidth(Box,'width'));
        console.log(allWidth);

        Bar.innerHTML = cent + "%";
        Text.innerHTML = cent + "%";
        Bar.style.clip = "rect(0px,"+ cent/100 *allWidth +"px,40px,0px)";

    }

    function getWidth(opt,attr){

        if(opt.currentStyle){
            return(opt.currentStyle[attr]);
        }else{
            return window.getComputedStyle(opt,false)[attr];
        }
    }

}

網頁進度條效果結束

不積跬步無以至千里