码迷,mamicode.com
首页 > Web开发 > 详细

js 实现一个普通的定时器

时间:2018-08-14 14:41:41      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:clear   var   实现   调用函数   body   页面   函数   color   ntb   

HTML的页面显示:

 1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>Title</title>
 5     <link href="show.css" rel="stylesheet" type="text/css">
 6 </head>
 7 <body>
 8 
 9 <script src="text.js"></script>
10 <input id="inp" type="text" onclick="see()">   
11 
12 <button id="stop" onclick="end()">停止</button>
13 </body>
14 </html>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>绑定onclick事件去触发函数调用

css输出框的大小设置

1 #inp{
2     width: 200px;
3     height: 40px;
4 }

javascript 去具体实现函数及其调用:

 1 function star() {
 2     var time=new Date().toLocaleString();   //获得一个时间对象并转为字符串
 3     var i=document.getElementById(inp);   //获取所需标签
 4     i.value=time;                            //设置标签值
 5 }
 6 var clock;     //定义一个全局变量
 7 function see() {
 8 
 9     if (clock==undefined){     //如果定时器为空就执行下面方法
10         star();
11         clock=setInterval(star,1000);
12     }
13                              //若已经存在定时器则不执行任何操作
14 }
15 
16 function end() {
17     clearInterval(clock);         //清除定时调用函数
18     clock=undefined;              //把定时器置为空
19 
20 }

 

js 实现一个普通的定时器

标签:clear   var   实现   调用函数   body   页面   函数   color   ntb   

原文地址:https://www.cnblogs.com/wen-kang/p/9473525.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!