OK, no more nonsense, implement a JavaScript timer bar
Slightly more functional than the AS3 timer class.
Timer2.src.js
Copy Code code as follows:
/**
* Timer Model
*
* @author Rainsilence
* @version 2.0
*/
(function () {
/**
* TimerEvent Constructor Builder
*
* @param type Event types
* @param bubbles whether Nickei
* Whether the @param cancelable can be canceled
*/
TimerEvent = function (type, bubbles, cancelable) {
This.type = type;
This.bubbles = Bubbles;
this.cancelable = cancelable;
};
/**
* Event Time Events Statement
*
* @event TIMER
* @event Timer_complete
*/
Extend (TimerEvent, {
Timer: "Timer",
Timer_complete: "Timercomplete"
});
/**
* Event method
*
* @method toString
*/
Extend (Timerevent.prototype, {
Tostring:function () {
Return "[timerevent type=" + This.type +
"bubbles=" + This.bubbles +
"cancelable=" + this.cancelable + "]";
}
});
/**
* Extend extended classes, properties or methods of objects
*
* @param target Object
* @param methods here to Param may be more appropriate, representing objects that host objects, methods, extensions for target
*/
function extend (target, methods) {
if (!target) {
target = {};
}
For (Var prop in methods) {
Target[prop] = Methods[prop];
}
return target;
}
/**
* Timer Builder
*
* @param delay delay How much time execution method handle
* @param repeatcount Repeat how many times, if not set, the representative repeats infinite Times
*/
Timer = function (delay, repeatcount) {
var listenermap = {};
Listenermap[timerevent.timer] = [];
Listenermap[timerevent.timer_complete] = [];
Extend (this, {
currentcount:0,
Running:false,
Delay:delay,
Repeatcount:repeatcount,
True:interval,false:timeout
Repeattype:repeatcount = = NULL | | RepeatCount < 1? True:false,
Handler:listenermap,
timerid:0,
Iscompleted:false
});
};
Event object Initialization (this part is not implemented)
var timerevent = new TimerEvent (Timerevent.timer, False, false);
var timercompleteevent = new TimerEvent (Timerevent.timer_complete, False, false);
/**
* Timer Timer method
*
* @method AddEventListener Add a method handle (the first two arguments must, and the last argument optional)
* @method RemoveEventListener Remove a method handle
* @method Start Timer
* @method Stop End Timer
* @method Reset Timer Reset
*/
Extend (Timer.prototype, {
Addeventlistener:function (type, listener, usecapture) {
if (type = = Timerevent.timer | | | type = = timerevent.timer_complete) {
if (!listener) {
Alert ("Listener is null");
}
if (usecapture = = True) {
This.handler[type].splice (0, 0, [listener]);
} else {
This.handler[type].push (listener);
}
}
},
Removeeventlistener:function (type, listener) {
if (type = = Timerevent.timer | | | type = = timerevent.timer_complete) {
if (!listener) {
This.handler[type] = [];
} else {
var listeners = This.handler[type];
for (var index = 0; index < listeners.length; index++) {
if (listeners[index] = = Listener) {
Listeners.splice (index, 1);
Break
}
}
}
}
},
Start:function () {
var timerthis = this;
if (this.running = = True | | this.iscompleted) {
Return
}
if (this.handler[timerevent.timer].length = 0 &&
This.handler[timerevent.timer_complete].length = = 0) {
Alert ("No Function");
Return
}
if (This.repeattype) {
This.timerid = setinterval (function () {
Dispachlistener (Timerthis.handler[timerevent.timer], timerevent);
timerthis.currentcount++;
}, This.delay);
} else {
This.timerid = settimeout (function () {Delayexecute (Timerthis.handler[timerevent.timer));}, This.delay);
}
This.running = true;
function Delayexecute (listeners) {
Dispachlistener (listeners, timerevent);
timerthis.currentcount++;
if (Timerthis.currentcount < Timerthis.repeatcount) {
if (timerthis.running) {
Timerthis.timerid = settimeout (function () {Delayexecute (listeners);}, Timerthis.delay);
}
} else {
Timerthis.running = false;
}
if (timerthis.running = = False) {
if (!timerthis.iscompleted) {
Dispachlistener (Timerthis.handler[timerevent.timer_complete], timercompleteevent);
}
Timerthis.iscompleted = true;
}
}
function Dispachlistener (listeners, event) {
For (Var prop in listeners) {
Listeners[prop] (event);
}
}
},
Stop:function () {
This.running = false;
if (This.timerid = = null) {
Return
}
if (This.repeattype) {
Clearinterval (This.timerid);
} else {
Cleartimeout (This.timerid);
}
if (!this.iscompleted) {
var listeners = This.handler[timerevent.timer_complete];
For (Var prop in listeners) {
Listeners[prop] (timercompleteevent);
}
}
This.iscompleted = true;
},
Reset:function () {
This.currentcount = 0;
this.iscompleted = false;
}
});
})();
Next Test, have you seen the rolling display of Sina online? Written in SetTimeout, really called the fork ... Replace timer refactoring, easy to understand
timertest.html
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=windows-31j ">
<title>insert title here</title>
<style type= "Text/css" >
. rowline {
width:400px;
height:80px;
Border-bottom-style:solid;
border-width:1px;
}
. barlist {
Border-style:solid;
border-width:1px;
width:400px;
height:80px;
Overflow:hidden;
}
</style>
<script type= "Text/javascript" src= "Js/timer2.src.js" ></script>
<script type= "Text/javascript" >
<!--
var timer = new Timer (50);
var globaltimer = new Timer (10000);
var blist;
function init () {
Blist = document.getElementById ("Barlist");
Timer.addeventlistener (Timerevent.timer, caltime);
Timer.start ();
Globaltimer.addeventlistener (Timerevent.timer, controltime);
Globaltimer.start ();
}
function Controltime () {
if (!timer.running) {
Timer.reset ();
Timer.start ();
}
}
function Caltime () {
Blist.scrolltop + 1;
if (Blist.scrolltop > 80) {
Timer.stop ();
var barnode = Blist.firstchild;
if (Barnode.nodetype = = 3) {
Blist.appendchild (Barnode);
Blist.appendchild (Blist.getelementsbytagname ("div") [0]);
} else {
Blist.appendchild (Barnode);
}
blist.scrolltop = 0;
}
}
Window.onload = init;
-->
</script>
<body>
<div class= "barlist" id= "Barlist" >
<div class= "Rowline" style= "background-color:red" style= "background-color:red" >1</div>
<div class= "Rowline" style= "Background-color:pink" style= "Background-color:pink" >2</div>
<div class= "Rowline" style= "Background-color:blue" style= "Background-color:blue" >3</div>
<div class= "Rowline" style= "Background-color:gray" style= "Background-color:gray" >4</div>
</div>
</body>
The AddEventListener usecapture parameter is triggered by the capture phase and is now changed to true if it is triggered before other handles, if false, and after other handles.
Postscript:
Now seems to be more popular comments on the use of the statement ... Like Struts+spring+hibernate. But ignores the essence of programming. Hope that we look at the source code, more discussion of the source code, so that there will be the so-called thought. Otherwise people will use this framework today and change it tomorrow. You're going to start all over again.
