1.获取当前时间的代码,时间显示在input窗口里边.
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <input type="text" id="i1"> <script> var i1Ele=document.getElementById('i1'); var now=new Date(); i1Ele.value=now.toLocaleString(); </script> <!--获取当前时间的代码--> </body> </html>
结果显示:
2.获取时间动起来的代码
一下代码实现了功能,但是存在bug:主要是点击两次开始,就不能停止时间了,思考是为什么?
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <input type="text" id="i1"> <button id="b1">开始</button> <!--点击开始,就在input窗口里跑起时间,这里需要给按钮绑定一个事件--> <button id="b2">停止</button> <script> var i1Ele=document.getElementById('i1'); var t;//定义一个t function f() { var now = new Date(); i1Ele.value = now.toLocaleString(); } // 升级,将上边两句话写在一个函数里边 f();//默认需要先执行一遍,才会在input窗口里显示 var b1Ele=document.getElementById('b1'); b1Ele.onclick=function (ev) { t=setInterval(f,1000) }; //找到按钮 // 编写事件出发 //定时,设置时间间隙.为1s var b2Ele=document.getElementById('b2'); b2Ele.onclick=function (ev) { clearInterval(t) } </script> <!--获取当前时间的代码--> </body> </html>
3.计时器完整改良版写法
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <input type="text" id="i1"> <button id="b1">开始</button> <!--点击开始,就在input窗口里跑起时间,这里需要给按钮绑定一个事件--> <button id="b2">停止</button> <script> var i1Ele=document.getElementById('i1'); var t;//定义一个t function f() { var now = new Date(); i1Ele.value = now.toLocaleString(); } // 升级,将上边两句话写在一个函数里边 f();//默认需要先执行一遍,才会在input窗口里显示 var b1Ele=document.getElementById('b1'); //点开始,早这里点击了两次开始,意味着有两个定时任务, //clear是清除第二个,第一个已经被覆盖了,相当于找不回来了id不知道也就无法清除了. b1Ele.onclick=function (ev) { if(!t) { t = setInterval(f, 1000) // 通过判断t是否为空 } }; //找到按钮 // 编写事件出发 //定时,设置时间间隙.为1s var b2Ele=document.getElementById('b2'); //点击停止 b2Ele.onclick=function (ev) { clearInterval(t); //根据id清除定时任务 // console.log(t); t=null; } </script> <!--获取当前时间的代码--> </body> </html>