The first rookie Diary

JavaScript learning a simple progress bar source code

Here is a simple progress bar of the source html_id is you want to appear in the HTML id,lb_id is a display percentage of text Id,top for the progress bar is a maximum of how wide, speed is velocity.

function PRG (html_id,lb_id,top,speed) {varA =1; vars =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',' -'); Window.onload= PRG ('Time2','BF2','101',' -');

HTML Source for

 <DivID= "Time"style= "width:1px; height:5px; background-color:red;">            <labelID= "BF">            </label>        </Div>        <BR/>        <BR/>        <BR/>        <DivID= "Time2"style= "width:1px; height:5px; background-color:red;">            <labelID= "BF2">            </label>        </Div>

The above code is very simple, I will not continue to introduce.

Next was a version of my friend who let me write in the way of the object, and he had a lot of guidance and finally knew what the object was.

 varJDT =function(obj) {//First this side is a collection of objects that define a jdt, and then obj is a collection of arguments to pass. varhtml_id =obj.html_id;//id function Ibid .varlb_id =it feels better to obj.lb_id;//this set of parameters, because it is possible to determine the correct value of the parameter in this case, or to set the defaultvartop =Obj.top; varSpeed =Obj.speed; varA = 0; varID = 0; varState = "START";//state This is the status of the current progress bar, which defaults to startvarPRG =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);            }; varState1 =function () {                returnstate;//This is the real-time return of the object's running state}varPause =function() {//This side is the way to stop a progress bar object State= "PAUSE";            Window.clearinterval (ID);            }; return{a:a, Id:id, PRG:PRG, Pause:pause, State1:state1, state:state }        }




The following is the method for invoking JavaScript

Window.onload = function () {

var jdt1 = new Jdt ({html_id: ' time ', lb_id: ' Bf ', Top: ' 101 ', Speed: ' 30 '});//The advantage of this method invocation is that if the page has more than one progress bar, they each have their own set of objects, does not cause conflicts
var jdt2 = new Jdt ({html_id: ' Time2 ', lb_id: ' Bf2 ', Top: ' 101 ', Speed: ' 50 '});

Jdt1. PRG ();//How the progress bar runs
Jdt2. PRG ();

document.getElementById ("Pause"). onclick = function () {
Jdt1.pause ();//This is the way to stop the progress bar

}
document.getElementById ("state"). onclick = function () {
Alert (jdt1.state1 ());//This side is alert out of the status of the current progress bar
alert (jdt1.state);

}

The above comments are my understanding ...  If there is a mistake, Daniel points out my mistakes, and the object-oriented is not quite understood. Slowly understand from the example

Well, the above is over, the beginning of the novice study, every day to do a topic every day to send a blog record their way of learning!

The first rookie Diary