JavaScript定时器作业
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>定时器练习</title> </head> <body> <input id="i1" type="text"> <input id="start" type="button" value="开始"> <input id="stop" type="button" value="停止"> <script> // 声明一个全局的t,保存定时器的ID var t; // 在input框里显示当前时间 // 1. 获取当前时间 function foo() { var now = new Date();//获取时间 var nowStr = now.toLocaleString(); // 2. 把时间字符串填到input框里 var i1Ele = document.getElementById("i1"); i1Ele.value = nowStr; //将值传到该位置，将在页面i1上显示 } // 点开始让时间动起来 // 找到开始按钮,给它绑定事件 var startButton = document.getElementById("start"); //取id startButton.onclick=function () { foo();//先执行，就不会有停滞 // 每隔一秒钟执行foo if (t===undefined){ //能保证只有一个定时器，如果t不是undefined说明已经有定时器了，还没有清除 t = setInterval(foo, 1000); // 把定时器的ID复制给之前声明的全局变量t } }; // 点停止 // 找到停止按钮,给它绑定事件 var stopButton = document.getElementById("stop"); stopButton.onclick=function () { // 清除之前设置的定时器 clearInterval(t); // 清除t对应的那个定时器, t的值还在， 清除！清除！ console.log(t); t = undefined; //重置，可以下次在设置定时器 } </script> </body> </html>
效果：
