JAVASCRIPT学习简单的进度条源码

function PRG(html_id,lb_id,top,speed) {             var a = 1;             var s = 0;            var _id = window.setInterval(function () {                a = a++;if (s == top) {                    window.clearInterval(_id)                }                else {                    document.getElementById(html_id).style.width = s + "0px";                    document.getElementById(lb_id).innerText = s + "%";                }            }, speed);         }        window.onload = PRG(‘Time‘, ‘bf‘, ‘101‘,‘50‘);        window.onload = PRG(‘Time2‘, ‘bf2‘, ‘101‘, ‘30‘);

 <div id="Time" style="width: 1px; height: 5px; background-color: red;">            <label id="bf">            </label>        </div>        <br />        <br />        <br />        <div id="Time2" style="width: 1px; height: 5px; background-color: red;">            <label id="bf2">            </label>        </div>

 var jdt = function (obj) {  //首先这边是定义一个个jdt的对象集合，然后obj是一个要传的参数的集合.            var html_id = obj.html_id;//id功能同上            var lb_id = obj.lb_id;//这种参数集合的方式感觉更好, 因为可以在这里面判断参数是否正确的值,或者设默认的情况            var top = obj.top;            var speed = obj.speed;            var a = 0;            var id = 0;            var state = "START";//state这个是检测当前进度条的状态,默认为START            var PRG = function () {                state = "RUNNING";                id = window.setInterval(function () {                    a++;                    if (a == top) {                        state = "STOP";                        window.clearInterval(id);                    }                    else {                        document.getElementById(html_id).style.width = a + "0px";                        document.getElementById(lb_id).innerText = a + "%";                    }                }, speed);            };            var state1 = function () {                return state;//这边是实时返回对象运行的状态            }            var pause = function () {//这边是停止某个进度条对象的方法                state = "PAUSE";                window.clearInterval(id);            };            return {                a: a,                id: id,                PRG: PRG, pause: pause, state1: state1, state: state            }        }




//下面为调用的javascript的方法

window.onload = function () {

var jdt1 = new jdt({ html_id: ‘Time‘, lb_id: ‘bf‘, top: ‘101‘, speed: ‘30‘ });//这种对象的方法调用的好处是假如页面有多个进度条的功能他们各自都有自己一个对象的集合,不会导致冲突
var jdt2 = new jdt({ html_id: ‘Time2‘, lb_id: ‘bf2‘, top: ‘101‘, speed: ‘50‘ });

jdt1.PRG();//进度条运行的方法
jdt2.PRG();

document.getElementById("Pause").onclick = function () {
jdt1.pause();//这边是停止进度条的方法

}
document.getElementById("State").onclick = function () {
alert(jdt1.state1());//这边是alert出当前进度条的状态
alert(jdt1.state);

}