Javascript在一个网页触发多个定时器

2024-09-05 12:17:44

字体：大中小

来源：转载

供稿：网友

在同一页面中，使用JavaScript函数触发多个定时器，很有用的一个功能，主要练习setInterval的使用，因为都知道有时候一个页面实现这些功能个似乎有点难，但愿通过本例子你能学到更多知识，特别是时间控制方面的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>setInterval定时器</title><style type="text/css" media="all">body{margin:0px;padding:9px;font-size:13px;color:#666666;font-family:Arial, Helvetica, sans-serif,"宋体";}div{width:160px;height:22px;font-weight:bold;border:#CCCCCC 1px solid;margin:3px;padding-left:6px;line-height:21px;float:left;}</style></head><body><p><div></div><input type="button" value="累加" /><input type="button" value="停止" /><input type="button" value="递减" /></p><p><div></div><input type="button" value="累加" /><input type="button" value="停止" /><input type="button" value="递减" /></p><p><div></div><input type="button" value="累加" /><input type="button" value="停止" /><input type="button" value="递减" /></p><p><div></div><input type="button" value="累加" /><input type="button" value="停止" /><input type="button" value="递减" /></p><script language="javascript" type="text/javascript">var div=document.getElementsByTagName("div");var elem=new Array();var status=new Array();var interval=100;//initialvar input=document.getElementsByTagName("input");for(var i=0;i<input.length;i+=3){input[i].index=input[i+1].index=input[i+2].index=Math.floor(i/3);input[i].onclick=function(){c.up(this.index)}input[i+1].onclick=function(){c.pause(this.index)}input[i+2].onclick=function(){c.down(this.index)}}//run_animationvar d=function(){var timer=0,div;var m=0;this.go_up=function(con,target){timer=setInterval(con.up,interval);div=target;}this.go_down=function(con){timer=setInterval(con.down,interval)}this.up=function(){if(m>=100){div.innerHTML=m+",timer="+timer;clearInterval(timer)}else{m++;div.innerHTML=m;}}this.down=function(){if(m<=0){div.innerHTML=m+", timer="+timer;clearInterval(timer)}else{m--;div.innerHTML=m;}}this.pause=function(){clearInterval(timer);}}//startvar c={up:function(tar){if(status[tar]==tar){elem[tar].pause();elem[tar].go_up(elem[tar],div[tar]);}else{var n=tar;tar=new d();elem[n]=tar;status[n]=n;tar.go_up(tar,div[n]);}},pause:function(tar){elem[tar].pause();},down:function(tar){if(elem[tar]!=undefined){elem[tar].pause();elem[tar].go_down(elem[tar])}}}</script></body></html>

上一篇：网站变灰色的两种方法

下一篇：检测浏览器是否支持JavaScript功能