JavaScript中有两种计时器,一种是setTimeout();还有一种是setInterval();
两种计时器的区别是timeout是在你指定的时间之后执行一次你的代码,但是interval是每隔固定的时间后都会执行你的代码,一个是单词操作,一个是重复操作。
利用setTimeout的嵌套一样可以实现setinterval的功能。
如果在网页实现一个计时器,需要一个开始按钮可一个结束按钮,结束计时器的函数是把set换成clear,清除计时器即可。clearTimeout(),clearInterval()。
用法如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
var num=0;
var i;
function startCount(){
document.getElementById('count').value=num;
num=num+1;
i=setTimeout("startCount()",1000);
}
function stopCount(){
clearTimeout(i);
}
</script>
</head>
<body>
<form>
<input type="text" id="count" />
<input type="button" value="Start" οnclick="startCount()" />
<input type="button" value="Stop" οnclick="stopCount()" />
</form>
</body>
</html>
有一个综合练习为跳转页面。就好像淘宝里面支付成功后等待5秒跳回原网页一样,但是跳回原网页需要你已经有进行了原网页的访问,网页的history里面有之前网页的记录才可以,没有的话可以利用window.open(),打开一个新的网页测试功能性,其中定义的变量是用来结束计时器的,注意:setTimeout()里面的函数一定要加引号!。直接上代码:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>计时器</title> <script type="text/javascript"> var num=5; var i; function Count(){ document.getElementById("txt").value=num;//这里设置文本框的值 num=num-1; if(num==0){ //判断是否到时间进行跳转,此处利用打开新窗口测试功能 window.open("https://www.baidu.com","_self");//理论上应该是window.history.back() } i=setTimeout("Count()",1000);//利用计时器进行时间倒计时输出 } function back_to(){ //设置返回链接 window.open("https://www.baidu.com","_self"); } </script> </head> <!--在这里加入这条语句的作用是打开网页后制动运行Count()函数--> <body οnlοad="Count();"> <!--下面是完成网页的布局,并设置点击后的功能,理论上style应该在css中设置,这里只是演示--> <h2>操作成功!</h2> <p><input type="text" id="txt" style="width: 10px;border: 0px" > 秒后返回主页! <a href="#" οnclick="back_to()">返回</a></p> </body> </html>