您的位置：首页 > Web前端 > JavaScript

用javascript实现的一个定时器

2010-03-25 23:51 393 查看

项目中有个小需求,考虑经常使用，故封装一个Timer类，以备后用:)

一、定时器代码：

//以下程序为实现一个javascript定时器
/*
timer:JSON对象
timer的属性:
interval:   执行间隔时间(可以缺省,默认1秒),
action:     回调函数(可以缺省),
count:      定时器执行次数(可以缺省,没有则没有次数限制)
*/
function Timer(timer){
this.loop = function(){
//如果指定了定时器执行次数则处理次数控制逻辑
if (timer.count){
//在timer对象上通过晚绑定一个属性用于充当计数器作用
if (!timer.value){
//如果这个属性不存在则进行晚绑定,并设置初始值为0
timer.value=0;
}
timer.value++;
//如果执行次数大于了总次数则退出该函数,不再递归执行
if (timer.value>timer.count){
return;
}
}
//如果指定了回调函数则执行回调函数
if (timer.action){
timer.action(timer.value?timer.value:"");
}
//递归调用当前匿名函数(arguments对象的callee属性,取得当前函数对象,实现函数匿名引用)
window.setTimeout(arguments.callee,timer.interval);
};
//开始执行定时器的方法
this.start=function(){
window.setTimeout(this.loop,timer.interval);
};
}

二、调用示范代码：

<html>
<head>
<mce:script type="text/javascript" src="jiangtimer.js" mce_src="jiangtimer.js"></mce:script>
<mce:script type="text/javascript" src="../jquery.js" mce_src="jquery.js"></mce:script>
<mce:script type="text/javascript"><!--

$(document).ready(function(){

$("form a").click(function(){
$("#family")
.css("width",100)
.css("height",80);

var timer = new Timer({
interval:$("input[name='interval']").val(),
action:function(data){
$("#family")
.css("width",parseInt($("#family").css("width"))+10)
.css("height",parseInt($("#family").css("height"))+10);
},
count:$("input[name='count']").val()
});
timer.start();
});
});

// --></mce:script>
</head>
<body>
<form action="#">
时间间隔:<input type="text" name="interval" value="25" />
<br />
执行次数:<input type="text" name="count" value="16" />
<br /><br />
<a href="#" mce_href="#">调用定时器(jquery滑动效果)</a>
</form>
<img src="img/family.jpg" mce_src="img/family.jpg" alt="family" id="family" width="100" height="80"/>
</body>
</html>

三、运行效果：

唉，图片上传功能暂时关闭了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航