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

2023-12-04 13:40:08 前端笔记 152

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

代码实例:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="/" /> 
<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);