JavaScript Timer实现代码_时间日期

ok,不废话了，实现一个javascript的Timer吧
比起as3的Timer类，功能上略有改动
timer2.src.js

复制代码 代码如下:

/**
* Timer 模型
*
* @author rainsilence
* @version 2.0
*/
(function() {
/**
* TimerEvent constructor 构造器
*
* @param type 事件类型
* @param bubbles 是否毛票
* @param cancelable 是否可取消
*/
TimerEvent = function(type, bubbles, cancelable) {
this.type = type;
this.bubbles = bubbles;
this.cancelable = cancelable;
};
/**
* Event 时间事件声明
*
* @event TIMER
* @event TIMER_COMPLETE
*/
extend(TimerEvent, {
TIMER : "timer",
TIMER_COMPLETE : "timerComplete"
});
/**
* Event 方法
*
* @method toString
*/
extend(TimerEvent.prototype, {
toString : function() {
return "[TimerEvent type=" + this.type +
" bubbles=" + this.bubbles +
" cancelable=" + this.cancelable +"]";
}
});
/**
* Extend 扩展类，对象的属性或者方法
*
* @param target 目标对象
* @param methods 这里改成param也许更合适，表示承载着对象，方法的对象，用于target的扩展
*/
function extend(target, methods) {
if (!target) {
target = {};
}
for (var prop in methods) {
target[prop] = methods[prop];
}
return target;
}
/**
* Timer 构造器
*
* @param delay 延时多少时间执行方法句柄
* @param repeatCount 重复多少次，如果不设置，代表重复无限次
*/
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
});
};
// 事件对象初始化（这部分未实现）
var timerEvent = new TimerEvent(TimerEvent.TIMER, false, false);
var timerCompleteEvent = new TimerEvent(TimerEvent.TIMER_COMPLETE, false, false);
/**
* Timer 计时器方法
*
* @method addEventListener 增加一个方法句柄（前两个参数必须，后一个参数可选）
* @method removeEventListener 移除一个方法句柄
* @method start 开始计时器
* @method stop 结束计时器
* @method 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;
}
});
})();

接下来测试吧，大家见过新浪网上的滚动显示吗？用setTimeout写的，真叫牛叉。。。。。。换成Timer重构，简单易懂
timerTest.html

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<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>
</head>
<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>
</html>

addEventListener的useCapture参数本为捕获阶段触发之意，现在改成如果true,则在其他句柄之前触发，如果false，则在其他句柄之后触发。
后记：
现在貌似大家比较流行评论说明书的用法。。。比如struts+spring+hibernate。而忽略了编程的实质。希望大家多看源码，多讨论源码，那样才会有所谓的思想。否则人家今天用这个framework，明天换了。你又要从头开始了。

时间： 2024-08-02 09:01:59

JavaScript Timer实现代码_时间日期的相关文章

JavaScript日历实现代码_时间日期

效果如下:javascript 代码如下: 复制代码 代码如下: var Calendar = function(){ var self = this; self.box = document.createElement("div"); self.head = document.createElement("div"); self.datePlace; self.body = document.createElement("div"); self

JavaScript 判断日期格式是否正确的实现代码_时间日期

转载者最起码注明作者和出处!http://www.cnblogs.com/GuominQiu 复制代码 代码如下: //--------------------------------------------------------------------------- //判断日期格式是否正确 //返回值是错误信息, 无错误信息即表示合法日期字符串 function isDateString(strDate){ var strSeparator = "-"; //日期分隔符 var

Js 获取当前日期时间及其它操作实现代码_时间日期

myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) myDate.getDate(); //获取当前日(1-31) myDate.getDay(); //获取当前星期X(0-6,0代表星期天) myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数) myDate.getHours();

javascript 显示当前系统时间代码_时间日期

1.在<head></head>中加入下列代码 复制代码 代码如下: <script language=JavaScript> var timerID = null; var timerRunning = false; function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunning = false;} function startclock () { stopclock(); sho

JavaScript 获取当前时间戳的代码_时间日期

JavaScript 获取当前时间戳: 第一种方法: 复制代码 代码如下: var timestamp = Date.parse(new Date()); 结果:1280977330000 第二种方法: 复制代码 代码如下: var timestamp = (new Date()).valueOf(); 结果:1280977330748 以上代码将获取从 1970年1月1日午夜开始的毫秒数.二者的区别是,第一种方法的毫秒位上为全零,即只是精确到秒的毫秒数 如题所示,返回unix时间戳所对应的具体

javascript 判断两个日期之差的示例代码_时间日期

日期差我们需要像php中一样把如2015-08-30这种转换成秒之后再利用两个日期的秒数进行相减之后再加起判断就可以了,如果判断日期相等就简单多了在文章最后有例子说明. 例子1,日期之差函数 function better_time(strDateStart,strDateEnd){ var strSeparator = "-"; //日期分隔符 var strDateArrayStart; var strDateArrayEnd; var intDay; strDateArraySt

Javascript倒计时代码_时间日期

JS脚本: 复制代码 代码如下: <script language="javascript" type="text/javascript"> var interval = 1000; function ShowCountDown(year, month, day, divname) { var now = new Date(); var endDate = new Date(year, month - 1, day, 14, 07); var leftT

javascript 当前日期转化为中文的实现代码_时间日期

复制代码 代码如下: <script type="text/javascript"> function initArray(){ this.length=initArray.arguments.length; for(var i=0;i<this.length;i++){ this[i]=initArray.arguments[i]; } } var strA=""; function TimeList() { var i=0; var str=n

JavaScript 模仿vbs中的 DateAdd() 函数的代码_时间日期

项目中需要用到日历,.net的日历控件又太重,只好用js写一个,日历的核心函数是 DateAdd(),编写过程中发现 js 里面操作时间比想象中的繁琐,不像vbscript中的可以轻松地dateadd,后来才想到用 setFullYear().setDate()等内置函数,可以拼合一个js版的 dateadd() 来,代码如下: 复制代码 代码如下: function DateAdd(interval,number,date){ // date 可以是时间对象也可以是字符串,如果是后者,形式必须