怎樣在頁(yè)面上展示一個(gè)進(jìn)度條？

首先我們分析一下需求：

1.進(jìn)度條滾動(dòng)顯示的一個(gè)外框
2.進(jìn)度條本身的一個(gè)顯示框
3.隨著時(shí)間推移，外邊框沒(méi)有變化，內(nèi)邊框的寬度逐漸變寬
4.達(dá)到某個(gè)值時(shí)，內(nèi)邊框?qū)挾炔辉僭黾印?/p>

下邊，我們來(lái)逐條實(shí)現(xiàn)：

1.進(jìn)度條滾動(dòng)顯示的一外框以及外框內(nèi)顯示的進(jìn)度條框

<div class="outer">//外層框
    <div class="inner"></div>//內(nèi)層框
</div>

2.邊框樣式進(jìn)行修飾：

<style type="text/css">
    .outer{
        width: 300px;
        height: 30px;
        padding: 10px 0;
        background: #eee;
    }
    .inner{
        height: 30px;
        width: 0px;
        background: red;
    }
</style>

3.讓內(nèi)部框?qū)挾戎饾u增加

<script>
    var oInner = document.querySelectorAll(".inner")[0];//獲取DOM元素。
    var count = 0;//計(jì)數(shù)器，時(shí)間每前進(jìn)一個(gè)單位，使其值增加一下
    var timer = setInterval(function(){//定時(shí)器
        count++;//每次使計(jì)數(shù)器的值增加1
        oInner.style.width = count + "px";//使內(nèi)部塊的寬度樣式值為計(jì)數(shù)器當(dāng)前的值
        if(count == 100){//當(dāng)計(jì)數(shù)器值達(dá)到100時(shí)，清楚定時(shí)器
            clearInterval(timer);//清除定時(shí)器
        }
    },20);//每20毫秒，定時(shí)器啟動(dòng)一次，內(nèi)部代碼執(zhí)行一次，直到定時(shí)器被清掉
</script>

以上代碼，我們就完成了一個(gè)簡(jiǎn)單的滾動(dòng)條效果。