计时器

最新推荐文章于 2025-11-28 06:24:21 发布

原创最新推荐文章于 2025-11-28 06:24:21 发布 · 645 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #button #input #javascript #html

网页设计专栏收录该内容

3 篇文章

订阅专栏

本文通过一个具体的HTML页面示例展示了JavaScript中setTimeout函数的使用方法。包括如何设置定时任务、取消定时任务以及递归调用定时器等关键概念。示例中还包含了按钮触发定时任务的功能演示。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>setTimeout示例</title>
</head>
<body>
<script type="text/javascript" language="javascript">
   var i=0;

   function start_time()
   {
   i++;
   document.getElementById('txt').value = i;
   }

   function stop_time()
   {
   clearTimeout(b);
   }

   function reset_time()
   {
   document.getElementById('txt').value = '';
   }

   function buttonClick()
   {
   setTimeout("start_time();",5000);
   alert('证明setTimeout是异步调用,setTimeout方法在alert方法之前,但是两个方法没有执行的先后顺序。');
   }

   function buttonClick2()
   {
   i++;
   document.getElementById('txt').value = i;
   b = setTimeout("buttonClick2();",5000);

   }
</script>
<input type="button" onclick="buttonClick();" value="按钮1">
<input type="button" onclick="buttonClick2();" value="按钮2">
<input type="button" onclick="stop_time();" value="停止计时">
<input type="button" onclick="reset_time();" value="置零">
<input type="text" id="txt">
</body>
</html>