javascript定时器函数开始和结束代码实例

我心飞翔 分类:实例代码

本章节分享一段代码实例,它演示了setTimeout()定时器函数开始执行和结束效果。

代码实例如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" /> 
<title>犀牛前端部落</title> 
<script type="text/javascript">
var timer = null;
function begin(){
  var date = new Date();
  var current_time = date.getFullYear() + '-' +  date.getMonth() + '-' + date.getDate() + ' ';
  current_time += date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
  document.getElementById('current_time').value = current_time;
  timer = setTimeout('begin()', 1000);
}
function stop() {
  //清除掉定时器对象
  clearTimeout(timer);  
}
window.onload=function(){
  var start=document.getElementById("start");
  var end=document.getElementById("end");
  start.onclick=function(){begin();}
  end.onclick=function(){stop();}
}
</script>
</head>
<body>
<input type="text"  name="current_time" id="current_time"/>
<input type="button" id="start" value="开始"/>
<input type="button" id="end" value="结束"/>
</body>
</html>

上面的代码演示了定时器函数的用法,下面介绍一下它的实现过程。

一.代码注释:

(1).var timer = null,声明一个变量并赋值为null,用来存储定时器函数的返回值。

(2).function begin(){},此函数能够实现获取当前时间日期的功能,定时器函数就是对它的调用。

(3).var date = new Date(),创建一个事件日期对象。

(4).var current_time = date.getFullYear() + '-' +  date.getMonth() + '-' + date.getDate() + ' ',获取年月日。

(5).current_time += date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds(),连接获取的小时、分钟和秒。

(6).document.getElementById('current_time').value = current_time,给文本框赋值。

(7).me').value = current_time,使用递归的方式不断调用begin函数。

(8).function stop() {

  //清除掉定时器对象

  clearTimeout(timer);  

},停止定时器函数的执行。

二.相关阅读:

(1).关于时间对象可以参阅JavaScript Date 对象一章节。

(2).setTimeout()可以参阅setTimeout()一章节。

(3).clearTimeout()可以参阅clearTimeout()方法一章节。

网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容