JavaScript计时器

最新推荐文章于 2024-06-05 15:33:33 发布

abigbulb

最新推荐文章于 2024-06-05 15:33:33 发布

阅读量229

点赞数 1

本文链接：https://blog.csdn.net/bulbboy/article/details/81247253

版权

1.第一种计时器（setInterval）

格式：setInterval(代码，延迟时间);

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定时器</title>
<script type="text/javascript">
  var mytime;
  function clock(){
    var time=new Date();          
    mytime= time.getHours()+":"+time.getMinutes()+":"+time.getSeconds() ;
    document.getElementById("clock").value = mytime;
  }
  setInterval(clock,100);
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50"  />
</form>
</body>
</html>

2.取消（第一种）计时器 (clearInterval)

格式：clearInterval(id_of_setInterval);

举个栗子：

var i = setInterval("clock()",100);

οnclick="clearInterval(i)"

其中的i就是setInterval返回的ID值

3.第二种计时器（setTimeout）

格式：setTimeout(代码，延迟时间);

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  setTimeout("alert('Hello!')", 3000 ); //5秒后弹出hello对话框
</script>
</head>
<body>
</body>
</html>

此外还可以创建一个运行于无穷循环中的计数器

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0;
function numCount(){
 document.getElementById('txt').value=num;
 num=num+1;
 setTimeout("numCount()",1000);
 }
</script>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
</form>
</body>
</html>

如图：

4.取消（第二种）计时器

格式：clearTimeout(id_of_setTimeout);

与第一种计时器取消方法相似

并停止计数

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>

<script type="text/javascript">
  var num=0;
  var i;
  function startCount(){
    document.getElementById('count').value=num;
    num=num+1;
    i=setTimeout("startCount()",1000);
  }
  function stopCount(){
    clearTimeout(i);
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="count" />
    <input type="button" value="Start"  onclick="startCount()"/>
    <input type="button" value="Stop" onclick="stopCount()"  />
  </form>
</body>
</html>

注:延迟时间均以毫秒作为单位