JavaScript倒计时setTimeout()和setInterval()

最新推荐文章于 2024-05-29 15:14:06 发布
最新推荐文章于 2024-05-29 15:14:06 发布
阅读量893 收藏 3
点赞数
分类专栏： JavaScript 文章标签： javascript 定时器 setTimeout
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/microcosmv/article/details/51921308
版权

1、setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

语法

setTimeout(code,millisec)

参数描述
code必需。要调用的函数后要执行的 JavaScript 代码串。
millisec必需。在执行代码前需等待的毫秒数。

提示和注释

提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

例1：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> test </title>
  <meta charset="utf-8" />
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>
<script type="text/javascript">
<!--
    var c;
    function func(){
        var p = document.getElementById("p");
        var v = p.innerHTML;
        p.innerHTML = v*1-1;
        c = setTimeout("func()",1000);
    }
    function func1(){
        clearTimeout(c);
    }

//-->
</script>
 <body >
    <p id = "p">66</p>
    <input type="button" value="倒计时开始" onclick="func()" />
    <input type="button" value="倒计时停止" onclick="func1()" />
 </body>
</html>

2、setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法

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

参数描述
code必需。要调用的函数或要执行的代码串。
millisec必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

例2：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> test </title>
  <meta charset="utf-8" />
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>
<script type="text/javascript">
<!--
    var c;
    function func(){
        var p = document.getElementById("p");
        var v = p.innerHTML;
        p.innerHTML = v*1-1;

    }
    c = setInterval("func()",1000);
    function func1(){
//window可以省略。
        window.clearInterval(c);        
    }
    function func2(){
        c = setInterval("func()",1000);
    }
//-->
</script>
 <body >
    <p id = "p">66</p>
    <input type="button" value="停止Interval" onclick="func1()" />
    <input type="button" value="开始Interval" onclick="func2()" />
 </body>
</html>

以上内容作为个人学习记录，仅供参考。

microcosmv
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
写计时器,你知道用setTimeOut还是setInterval吗？
LeeWhoee University
04-14 3307
最基本的setTimeOut是在一个时间间隔后执行一个任务。setInterval是在某个时间间隔不断的执行某个任务。也就是setTimeOut只执行一次，setInterval循环执行。如果在setTimeOut要执行的任务里再次调用setTimeOut，岂不是跟setInterval实现一样的效果了？其实不然！
js setTimeout()函数介绍及应用以倒计时为例
12-10
定义和用法: setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 语法: setTimeout(code,millisec) 参数： code （必需）：要调用的函数后要执行的 JavaScript 代码串。 millisec（必需）：在执行代码前需等待的毫秒数。 提示： setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。 举例： 代码如下: [removed] function timer(){ var value=N
JS【详解】setTimeout 延时（含清除 setTimeout，计时开始时间，0 秒延时解析，多 setTimeout 执行顺序，setTimeout 应用场景，网红面试题）
最新发布
朝阳39的博客
05-29 3010
setTimeout 是一个 js 内置的函数，用于延时执行代码。
JavaScript setTimeout 倒计时
annghi的博客
04-03 2123
//计时开始的方法 function countStart(){ var seconds = arguments[0];//倒计时方法中的当前时间 console.log(seconds ) } //计时结束的方法 function countStop(){ console.log("stop") } //倒计时方法 function setTimeCountDow
JS setTimeout倒计时
Nattevak
05-29 500
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="button" id="btn" value="倒计时开始"></input> <script> var wait=5; function
js setTimeout()函数 [倒计时用]
HAIFU_XU
12-12 2001
js setTimeout()函数 [倒计时用] 定义和用法: setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。　　语法: setTimeout(code,millisec)　　参数：　　 code （必需）：要调用的函数后要执行的 JavaScript 代码串。　　 millisec（必需）：在执行代码前需等待的毫秒数。　　提示：　　 setTimeout() 只执行 c
javascript setTimeout和setInterval计时的区别详解
10-27
window对象有两个主要的定时方法，分别是setTimeout 和 setInteval 他们的语法基本上相同，但是完成的功能取有区别。
javascript setTimeout和setInterval 的区别
10-29
JavaScript中的`setTimeout`和`setInterval`是两个重要的定时器函数，它们都属于全局`window`对象的方法，常用于在指定的时间后执行某段代码或周期性地重复执行某段代码。然而，它们的工作机制和用途有所不同。 1. ...
setTimeout和setInterval的深入理解
01-21
大概半年前发表过一篇关于setTimeout和setInterval的文章，但是现在回去仔细一看发现其实存在很多不足以及错误。事实上，setTimeout和setInterval并没有我们字面上理解的那么简单。要真正掌握并理解这两个方法，还得...
javascript秒数倒计时自动跳转代码
10-30
javascript 秒数倒计时自动跳转代码 JavaScript 倒计时自动跳转代码是指在一定时间内执行某个动作...JavaScript 倒计时自动跳转代码是网络开发中的一项重要技术，可以广泛应用于许多场景，提高用户体验和网站交互性。
js 实现倒计时效果setTimeout
zcc的博客
12-25 1074
我使用的是bootstrap 里的警告框，设置倒计时20秒后自动关闭警告框。样式截图： 代码： 1、html <div id="tip" class="alert alert-info alert-dismissible fade show" role="alert"> <strong>温馨提示：</strong><span id="sNum">20 </span>秒后自动关闭）。 <but
JS的一些简单应用 —— 定时器setTimeout、倒计时setInterval 和 循环调用爆炸效果
烟敛寒林的博客
05-19 1170
定时器setTimeout setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 下面是一个3秒后炸弹爆炸的例子： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;script&gt;
js定时器介绍：倒计时定时器setTimeout、间隔定时器setInterval
YY的博客
10-13 4559
js定时器介绍：倒计时定时器setTimeout、间隔定时器setInterval
倒计时-做一个活动的倒计时，超出日期，倒计时结束。。。学习setTimeout和setInterval及clearInterval的典型例子
吃瓜群众的博客
06-12 1457
var fillNumber = function(num) { let number = Math.floor(num); return number&gt;9?number:'0'+number; } var timeChange = function(){ let endDate = new Date('2019-06-06 ...
JavaScript--倒计时---setInterva()与setTimeout() 方法
weixin_45904557的博客
04-13 2991
亲我e
Js中关于按钮倒计时显示（setTimeout 和 setInterval）
yicunyangguang的博客
02-24 4542
目标：实现一个按钮点击，同时按钮禁用并显示倒计时的js功能函数。 分析：首先要有一个按钮，绑定一个事件，这个事件功能就是定时改变按钮显示值，同时禁止按钮进行二次点击。 此功能函数需要使用js周期调用函数 setTimeout 或则setInterval，来定时改变显示值。 setTimeout 和 setInterval的区别是什么，又该如何选择呢？其实 setTimeout 和 setInterval 的最本质的区别是 触发 setTimeout 方法只执行一次，而触发 setInterval 方.
JS的两个定时器setTimeout和setInterval
jinzhuming0308的博客
03-11 534
setTimeout(“”,time) 设置一个超时对象 setInterval(“”,time)设置一个循环对象 setTimeout 在使用中更像是一个倒计时，当time事件到达即执行事件； setInterval 在使用中则是每隔time秒/毫秒 循环执行一次代码 切记一定要使用命名 否则会无限循环 clearTimeout()和 clearInterval()则可以停止计时器具体用
JAVASCRIPT使用setTimeout实现时间倒计时
专注于java，站在巨人头顶看世界
03-21 3255
语法： 以上引用的别的网站的。 前台HTML 设置剩余时间：分钟 剩余时间:45分钟 界面: JavaScript代码： var min;//计分 var seconds;//计秒 function timeless(){ var minEl = document.getElementById("m
从倒计时的实现深入探究setTimout与setInterval
weixin_34407348的博客
03-07 94
拜年 新年伊始，本搬砖汪先给各位老爷们拜个晚年，祝各位技术大牛们在新的一年代码功底更进一步，家庭幸福美满！ 需求 下面进入正题：在翻阅segmentfault社区时看到某巨厂面试要求实现一个倒计时功能，之前也没有仔细实现过，趁年初来任务还没来得及分配，赶紧着手实现了一个。 第一版 var period = 60*1000*60*2 var...
setTimeout和setInterval
08-24
settimeout和setinterval是JavaScript中的两个定时器函数。 settimeout函数用于在指定的时间后执行一次函数，语法为：setTimeout(function, milliseconds)。其中，function是要执行的函数，milliseconds是延迟的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值