标签:
在js中我们可以使用时间设定一段时间后才执行代码,而可以不是触发事件后马上调用方法(函数),这是js中的计时事件!
计时事件中的两个重要方法:
setTimeout(); 未来设定的时间段执行方法
clearTimeout(); 清除setTimeout()
下面使用计时事件来完成一个时钟和星期的显示:
function showTime() { var today = new Date(); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); var x = null; var d = today.getDay(); switch(d){ case 0:{ x = "星期日"; break; }case 1:{ x = "星期一"; break; }case 2:{ x = "星期二"; break; }case 3:{ x = "星期三"; break; }case 4:{ x = "星期四"; break; }case 5:{ x = "星期五"; break; }case 6:{ x = "星期六"; break; } } m = chackTime(m); s = chackTime(s); document.getElementById("time1").innerHTML=h+":"+m+":"+s+"<span>"+x+"</span>"; t = setTimeout(‘showTime()‘,500);//设置了在500毫秒后执行showTime()这个函数,setTimeout()是用来设定在未来的一个时间间隔之后执行代码,而不是在函数被调用后就马上执行。 } /*设置时间的格式是00:00:00*/ function chackTime(i) { if(i<10){ i = "0"+i; } return i; }
以上是js,只需在htlm的<body>标签中设置<body onload="showTime()">,即可在HTML中显示时间和星期
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!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=UTF-8"> <title>显示时间和星期</title> </head> <body onload="showTime()"> <p id="time1"></p> </body> <script type="text/javascript" src="js/show.js"></script> </html>
同时,我们再以计时事件做一个计时器以加深对计时事件的了解:
var t; var c = 0; function timeCount() { document.getElementById("timetxt").value = c; c=c+1; t = setTimeout("timeCount()",1000); } function stopCount() { c=0 clearTimeout(t); }
HTML如下:
<button type="button" onclick="timeCount()">开始计时</button> <input type="text" id="timetxt"> <button type="button" onclick="stopCount()">停止计时</button>
以上为计时事件的一些知识点。
标签:
原文地址:http://www.cnblogs.com/huanght/p/5741091.html