JavaScript 功能 小练习 02

时钟特效

第一种方法：使用setTimeout()函数
1）定时函数——setTimeout(“调用的函数”,等待的毫秒数)
var myTime = setTimeout(“dispTime()”,1000);
2）清除函数——clearTimeout(setTiimeout()返回的ID值)；
clearTimeout(myTime);

HTML：

<div id="myclock"></div>
<input type="button" value="停止" id="stopBtn">

JavaScript：

function disptime(){
				var today = new Date();
				var hh = today.getHours();
				var mm = today.getMinutes();
				var ss = today.getSeconds();
				document.getElementById("myclock").innerHTML = "<h1>"+hh+"："+mm+"："+ss+"</h1>";
				myTime = setTimeout("disptime()",1000);
			}
function prepare(){
				document.getElementById("stopBtn").onclick = function (){
					clearTimeout(myTime);
				}
			}
var myTime = setTimeout("disptime()",1000);
window.onload = prepare;

第二种方法：使用setIntervel()
1）定时函数——setIntervel(“调用的函数”,等待的毫秒数)
var myTime = setIntervel(“dispTime()”,1000)
2）清除函数——clear(setIntervel()返回的ID值)；
clearTimeout(myTime);
JavaScript：

function disptime(){
				var today = new Date();
				var hh = today.getHours();
				var mm = today.getMinutes();
				var ss = today.getSeconds();
				document.getElementById("myclock").innerHTML = "<h1>"+hh+"："+mm+"："+ss+"</h1>";
			}
			function prepare(){
				document.getElementById("stopBtn").onclick = function (){
					clearInterval(myTime);
				}
			}
			var myTime = setInterval("disptime()",1000);
			window.onload = prepare;

setTimeout()和setInterval()的区别：
setTimeout() ——一秒（1000毫秒）之后，执行函数一次；
setInterval()——每隔一秒（1000毫秒，周期），执行函数一次；
所以如果要实现“实时”的时钟特效，要么用setInterval()，要么在setTimeout()调用的函数内部，再调用setTimeout()，进行迭代。