前端實例練習 - 進度條

進度條

代碼儲存在Github
效果預覽

初衷：不少人在初學前端的時候都會問，「如何入門前端？」
同爲在前端學習道路上，奮力追趕的一員，本人對於目前網絡上所能看到的 「入門級」 的教材並不太滿意。學習一門新知識，實例是尤爲重要的。在這裏本人整理了目前頁面上常見功能實現的具體實例。願能爲你們提供一些幫助。
但願可以與你們互相分享，共同進步。

HTML部分

<div id="myProgress">
        <div id="myBar"></div>
    </div>

    <div id="myOperation">
        <button id="myRun">Run</button>
        <span id="myPersent"></span>
    </div>

CSS部分

#myProgress {
    width: 100%;
    background-color: #ddd;
}

#myBar {
    width: 1%;
    height: 30px;
    background-color: green;
    text-align: center; /*文字水平居中*/
    color: #fff;
    line-height: 30px; /*文字垂直居中*/
}

#myOperation {
    margin-top: 10px;
}

#myRun {
    background-color: green;
    border: 0;
    outline: none;
    cursor: pointer;
    color: #fff;
    padding: 10px 15px;
}

#myPersent {
    float: right;
}

JavaScript 部分

(function() {
    var runBtn = document.getElementById("myRun"),
        myPersent = document.getElementById("myPersent");

    function progress() {
        var element = document.getElementById("myBar"); 
        var width = 1; /*從1%開始*/
        var run = setInterval(frame, 10);
        function frame() {
            if (width >= 100) { /*超過100%消除定時器*/
                clearInterval(run);
            } else {
                width++; 
                element.style.width = width + '%'; /*改變width屬性值*/
                myPersent.innerHTML = width + '%'; /*右下部顯示百分比*/
                element.innerHTML = width + '%';   /*進度條上顯示百分比*/
            }
        }
    }

    runBtn.onclick = function() {
        progress();
    }
})();

---

好啦，如今全部的代碼都寫完啦！

趕快打開瀏覽器，看看效果吧！

在這裏，只是給你們提供一種思路，參考。
具體的實現，每一個人均可以有不一樣的方法。
請你們趕快發揮想象，把你最想實現的功能，在電腦敲出來吧！

參考自w3cschools