进度条

代码储存在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