JavaScript计时器示例分析
1.什么是JavaScript计时器？
在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
2.计时器类型
一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次
3.计时器方法
1):一次性计时器
A):setTimeout(): 指定的延迟时间之后来执行代码,进执行一次
语法:setTimeout(代码,延迟时间);
参数说明：
1. 要调用的函数或要执行的代码串。
2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。
B):clearTimeout():取消setTimeout()设置
语法:clearTimeout(timer)
参数说明:
timer：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。
调用setTimeout()和clearTimeout()延迟方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript计时器</title>
<input type="button" value="开始" id="btnStart" onclick="StartPrint()">
<input type="button" value="暂停" id="btnStop" onclick="StopPrint()">
<br>
</head>
<body>
<script type="text/javascript">
//定义打印方法
function Print()
{
console.log("我在打印!");
}
var timer;//该值标识要取消的延迟执行代码块
//开始打印
function StartPrint()
{
timer=setTimeout(Print,1000);//调用计时器,延迟1秒打印,只执行一次
}
//结束打印
function StopPrint()
{
clearTimeout(timer);//取消计时器
}
</script>
</body>
</html>
调用setTimeout()和clearTimeout()无限循环方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript计时器</title>
<input type="button" value="开始" id="btnStart" onclick="StartPrint()">
<input type="button" value="暂停" id="btnStop" onclick="StopPrint()">
<br>
</head>
<body>
<script type="text/javascript">
//定义打印方法
function Print()
{
console.log("我在打印!");
timer=setTimeout(Print,1000);//开始计时器,调用自己,进行无穷循环
}
var timer;//该值表示要取消延迟执行的代码块
//开始打印
function StartPrint()
{
Print();//调用打印方法
}
//结束打印
function StopPrint()
{
clearTimeout(timer);//取消计时器
}
</script>
</body>
</html>
2):间隔性触发计时器
A):setInterval():在执行时,从载入页面后每隔指定的时间执行代码
语法:setInterval(代码,交互时间);
参数说明：
1. 代码：要调用的函数或要执行的代码串。
2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。
返回值:
一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。
调用函数格式(假设有一个clock()函数):
setInterval("clock()",1000) 或 setInterval(clock,1000)
B):clearInterval() 方法可取消由 setInterval() 设置的交互时间
语法：clearInterval(timer)
参数说明:
timer：由 setInterval() 返回的 ID 值。
调用setInterval()和clearInterval() 执行间隔执行方法实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript计时器</title>
<input type="button" value="开始" id="btnStart" onclick="StartPrint()">
<input type="button" value="暂停" id="btnStop" onclick="StopPrint()">
<br>
</head>
<body>
<script type="text/javascript">
//定义打印方法
function Print()
{
console.log("我在打印!");
}
var timer;//该值标识要取消的计时器执行代码块
//开始打印
function StartPrint()
{
timer=setInterval("Print()",1000);//开始计时器
}
//结束打印
function StopPrint()
{
clearInterval(timer);;//取消计时器
}
</script>
</body>
</html>
以上就是本文所述的全部内容了，希望小伙伴们能够喜欢。
-
本文向大家介绍分享javascript计算时间差的示例代码，包括了分享javascript计算时间差的示例代码的使用技巧和注意事项，需要的朋友参考一下 在实际应用中，需要计算两个时间点之间的差距，一般来说都是计算当前时间和一个指定时间点之间的差距，并且有时候需要精确到天、小时、分钟和秒，下面就简单介绍一下如何实现此效果。 效果图： 距离新年： 代码如下: 以上代码实现了我们想要的功能，下面简单介绍
-
本文向大家介绍JavaScript计时器用法分析【setTimeout和clearTimeout】，包括了JavaScript计时器用法分析【setTimeout和clearTimeout】的使用技巧和注意事项，需要的朋友参考一下 本文实例分析了JavaScript计时器用法。分享给大家供大家参考，具体如下： JavaScript中使用setTimeout和clearTimeout函数进行计时/停
-
本文向大家介绍JavaScript两种计时器的实例讲解，包括了JavaScript两种计时器的实例讲解的使用技巧和注意事项，需要的朋友参考一下 通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。提供了两种计时器的方法如下： window.setInterval()； 这个方法就是在一个周期内反复执行一直到窗口关闭或者
-
本文向大家介绍JavaScript分秒倒计时器实现方法，包括了JavaScript分秒倒计时器实现方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JavaScript分秒倒计时器实现方法。分享给大家供大家参考。具体分析如下： 一、基本目标 在JavaScript设计一个分秒倒计时器，一旦时间完成使按钮变成不可点击状态 具体效果如下图，为了说明问题，调成每50毫秒也就是每0.05跳一次表
-
本文向大家介绍javascript计时器详解，包括了javascript计时器详解的使用技巧和注意事项，需要的朋友参考一下 计时器 基本格式： /* 说明：1.setInterval 会返回一个计时器ID值 可以这样接收。var setId = setInterval(....); 2.接收setId的目的是为了清空计时器。 clearTimeout(setId); */ 例如 一次
-
嗨，我从以下网站获得了倒计时代码： https://codepen.io/SitePoint/pen/MwNPVq, 并已修改为： 我所做的更改是，我检查了分钟和秒是否都为0，然后变量“deadline”应该用新时间更新。倒计时计时器工作正常，但当它达到0:0时，它进入该功能，一切停止。