cari

Rumah >hujung hadapan web >tutorial js >javascript计时器的实现

javascript计时器的实现

一个新手
一个新手asal
2017-10-16 09:56:311445semak imbas

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>自动增长计时器</title>
<script type="text/javascript">
  var atime;
  function clock(){
    var time=new Date();          
    atime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
    document.getElementById("clock").value = atime;
  }
 setInterval(clock,1000); 
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50"  style="background:#000;color:#00ff00;width:55px"; />
</form>
</body>
</html>

效果：

显示当前时间，自动增长

添加按钮的计时器（用于开始和暂停）

<!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(&#39;count&#39;).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>

效果：

点击开始按钮，从0计数，一秒加1。点击按钮停止，保持当前状态。

总结：

1、setInterval(代码,交互时间)；

参数：代码：可以是函数名或代码串；交互时间：设置交互时间

clearInterval（id_from_setInterval）;

参数：由setInterval() 返回的 ID 值。

2、setTimeout(代码,延迟时间);

参数：代码： 可以是函数名或代码串；延迟时间：设置延迟时间

clearTimeout（id_from_setTimeout）;

参数：由setTimeout()返回的ID值。

Atas ialah kandungan terperinci javascript计时器的实现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：使用Canvas制作时钟动画的方法Artikel seterusnya：JS实现定时任务，每隔N秒请求后台setInterval定时和ajax请求

Artikel berkaitan

Lihat lagi