前端实例练习 - 进度条

进度条

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

    原文作者:Garrik_刘翔
    原文地址: https://segmentfault.com/a/1190000008682075
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞