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‘);

html源码为

 <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);

}

以上的注释都是我的理解...  如有错望大牛们指出我的错误,话说面向对象一直不太懂是什么..  在慢慢从实例中理解

恩..  以上就结束了,  菜鸟学习的开端篇, 以后每天做一题 每天发一篇博客记录自己学习的路！