很久之前写的 ,突然想放上去

JAVASCRIPT学习简单的进度条源码

下面是一个简单的进度条的源码 html_id是你要显现在html上的id,lb_id是一个显示百分比文字的id,top为进度条最多是多宽,speed是速度.

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=" 1px; height: 5px; background-color: red;">
            <label id="bf">
            </label>
        </div>
        <br />
        <br />
        <br />
        <div id="Time2" style=" 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);

}

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

恩.. 以上就结束了.

很久之前写的没有发到博客上现在发上去感觉还是挺好哒