Rumah > Artikel > hujung hadapan web > 如何利用JavaScript中的定时事件做一个定时器

如何利用JavaScript中的定时事件做一个定时器

清浅asal: 2018-11-24 13:44:043008semak imbas

在JavaScript中可以通过定时事件setInterval和clearInterval来制作定时器效果，其中setInterval方法是按照指定的周期来调用函数或计算表达式。

本文操作环境：Windows7系统、javascript1.8.5版、Dell G3电脑。

今天将和大家分享有关JavaScript中定时器的知识，有一定的参考价值，希望对大家有所帮助。

通过JavaScript中的定时事件setInterval和clearInterval() 可以制作一个简单的定时器效果，在接下来的文章中为大家详细介绍。

setInterval() 方法

是按照指定的周期（以毫秒为单位）来调用函数或计算表达式。

setInterval(code,millisec[,"lang"])

code：要调用的函数或要执行的代码

millisec：周期性执行或调用 code 之间的时间间隔，以毫秒为单位

如果调用了setInterval() 方法那么它就会不停地调用函数，直到 clearInterval() 函数的出现或者窗口被关闭，而且 setInterval() 返回的 ID 值可以用作 clearInterval() 方法的参数。

但是setInterval() 方法的计时有一定的误差

setTimeout() 方法

用于在指定的毫秒数后调用函数或计算表达式，但只调用一次，同样有clearTimeout()方法用来清除 setTimeout()让他停止执行

案例分享

用setInterval() 方法写一个两分钟以内的定时器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input{
width:100px;
height:40px;
background:pink;
color:#fff;
font-size: 20px;
text-align: right;
}
</style>
</head>
<body>
分钟：<input type="text" value="0">
秒数：<input type="text" value="0">
<script src="tool.js"></script>
<script>
var minutes=document.getElementsByTagName("input")[0];
var seconds=document.getElementsByTagName("input")[1];
          var minutes1=0;
          var seconds1=0;
          var timer=setInterval(function(){
          //秒数自增，当秒数增加到60时分钟自增，秒数清零
               seconds1++;
      if(seconds1==60)
      {
seconds1=0;
     minutes1++;
     }
     minutes.value=minutes1;
     seconds.value=seconds1;
     if(minutes1==2)//到两分钟的时候定时器清除
     {
clearInterval(timer);
}
      
},100)      
</script>
</body>
</html>

总结：以上就是本篇文章的全部内容了。希望对大家学习定时事件有所帮助。

Atas ialah kandungan terperinci 如何利用JavaScript中的定时事件做一个定时器. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript 事件

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：JavaScript在浏览器中如何加载Artikel seterusnya：什么是bootstrap

Artikel berkaitan

Lihat lagi