JavaScript タイマー実装コード_時刻と日付

さて、これ以上ナンセンスではありません。JavaScript の Timer を実装しましょう
as3 Timer クラスと比較すると、関数が少し変更されています
timer2.src.js

コードをコピー コードは次のとおりです:

/**
* Timer model
*
* @author rainsilence
* @version 2.0
*/
(function() {
/**
* TimerEvent constructor constructor
*
* @param type event type
* @param bubbles whether it is gross or not
* @param cancelable whether it can be canceled
*/
TimerEvent = function(type, bubbles, cancelable) {
this.type = type;
this.bubbles = bubbles;
this.cancelable = cancelable;
};
/**
* Event time event declaration
*
* @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 extension class, object attributes or methods
*
* @param target target object
* @param methods It may be more appropriate to change it to param here, which means an object that carries objects and methods. Extensions for target
*/
function extend(target, methods) {
if (!target) {
target = {};
}
for (var prop in methods) {
target[prop] = methods[prop];
}
return target;
}
/**
* Timer constructor
*
* @param delay How long to delay the execution of the method handle
* @param repeatCount How many times to repeat, if not set, it means unlimited repetitions
*/
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 handler : listenerMap,
timerId : 0,
isCompleted : false
});
};
// 事件对象初始化（这部分未实现）
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 parameters are required, the last parameter is optional)
* @method removeEventListener Remove a method handle
* @method start starts the timer
* @method stop ends the timer
* @method reset resets the timer
*/
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 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 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; ;
})();


次に、Sina のスクロール表示を見たことがあるでしょうか。 setTimeout を使用して書かれているので、本当に素晴らしいです。 。 。 。 。 。 Timer に置き換えてリファクタリングする、シンプルでわかりやすい

timerTest.html

コードをコピーコードは次のとおりです:

gt ;

.rowLine {
幅: 400px;
🎜>ボーダーボトムスタイル: ソリッド;
ボーダー幅: 1px;
}
.barList {
ボーダースタイル: ソリッド;
幅:400px;
高さ:80px;
オーバーフロー:

2

3

4