JS setInterval()函数 [倒计时用]

最新推荐文章于 2024-05-01 15:56:17 发布
最新推荐文章于 2024-05-01 15:56:17 发布
阅读量504 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/juelingfeng/article/details/38416661
版权
定义和用法:
       
       setInterval() 方法用于在指定的毫秒数后调用函数或计算表达式。它与setTimeout()方法不同的是前者可以无限的循环,不会受调用函数的限制,要想退出此循环可以使用clearInterval()方法,可以使用返回值为现在要设置的这个对象;

　　语法:
    
       setInterval(code,millisec)

　　参数：

　　 code （必需）：要调用的函数后要执行的 JavaScript 代码串。

　　 millisec（必需）：在执行代码前需等待的毫秒数。

　　举例：


<script language="javascript">
function timer(){

var value=Number(document.all['time'].value);
if(value==2){
     timeID=window.setInterval("change()",1000);
clearInterval(timeID);
}
else window.setInterval("change()",1000);
}

function change(){

var value=Number(document.all['time'].value);
if (value>1) document.all['time'].value=value-1;
else {
    document.all['time'].value="同意";
return false;
}
}
</script>


<body onLoad="timer()">
<input name="time" value="10" type="button" style="width:40px;" />
</body>

绝凌峰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IOS系统中，倒计时（setInterval函数）失效的问题
03-29
先说结论：挂起（显示在聊天顶部）状态无法完美解决，息屏状态可以完美解决。...1、适用场景：通过传入参数控制倒计时时间的页面。&nbsp; 2、解决思路：在息屏和挂起的时候，我们可以通过vConsole可以看到是执行了o
setInterval定时器
m0_62962469的博客
03-28 4万+
setInterval语法规范： window.setInterval(调用函数，延时时间); 与setTimeout区别： setTimeout是延时时间到了就去调用这个回调函数，只调用了一次 就结束了这个定时器。 setInterval是 每隔这个延迟时间 就去调用这个回调函数 会调用很多次 重复调用这个函数。应用在网页中的一些轮播图上。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g
JS实现倒计时功能
热门推荐
qq_48954625的博客
12-27 4万+
一、前言 网站在做活动时，会出现一个截止时间倒计时的提示。效果如图： 二、分析 ①提示时间是每秒不断变化的，需要用到定时器(setInterval) //1000表示每隔一秒变化一次，单位为毫秒 setInterval(countDown, 1000); ②三个盒子通过innerHTML进行赋值，放入时、分、秒 ③计算当前时间到截至时间的时间（时间戳：指的不是当前时间，而是距离1970年1月1号过了多少毫秒） +new Date() ④截止时间的时间戳减当前时间的时间戳 ⑤通过..
JavaScript 中 setInterval 函数
最新发布
ultramand的博客
05-01 518
是 JavaScript 中的一个函数，用于周期性地执行指定的函数或代码块。它接受一个函数和一个时间间隔作为参数，并在每个时间间隔之后重复执行该函数。是一个用于周期性重复执行指定代码的函数。它会在指定的时间间隔内重复执行指定的函数或代码块，直到被清除。函数，每隔 1000 毫秒（1 秒）执行一次。函数返回一个唯一的标识符，可以使用该标识符来清除定时器，即停止周期性执行。是 JavaScript 的一个全局函数，用于周期性地执行指定的函数或代码块。的函数，用于打印计数器的值并递增计数器。
使用setInterval（）方法做一个倒计时
qq_38353578的博客
04-20 2447
var time=5;//倒计时时间 var countdownId=setInterval(countdown,1000);//重复调用countdown（）方法，并返回一个参数countdownId function countdown () { if(time==1){ $("#getCodeBtn").attr("disabled",false);
实现倒计时 JavaScript（定时器 setInterval）
m0_50789696的博客
04-12 999
1 运行结果 2 JavaScript 代码 <script> //1.获取元素 var day = document.querySelector('.day'); var hour = document.querySelector('.hour'); var minute = document.querySelector('.minute'); var second = document.querySelector('.second'); ..
倒计时案例
Wengyd_的博客
04-19 288
倒计时
js setTimeout()函数介绍及应用以倒计时为例
12-10
定义和用法: setTimeout() 方法用于在指定的毫秒数后调用函数或计算...如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。 举例： 代码如下: [removed] function timer(){ var value=N
html5利用setInterval实现新年元旦倒计时
12-14
html5利用setInterval实现新年元旦倒计时
JS使用setInterval实现的简单计时器功能示例
12-09
本文实例讲述了JS使用setInterval实现的简单计时器功能。分享给大家供大家参考，具体如下： 使用setInterval实现计时，并且满60秒向分钟进一，满60分钟向小时进一。 <!DOCTYPE html> <html> <head>...
元旦倒计时代码，使用原生js实现
12-17
在本文中，我们将深入探讨如何使用原生JavaScript（JS）来实现一个元旦倒计时功能。这个功能将结合HTML和CSS，为用户呈现一个喜庆的背景和动态更新的倒计时文字。让我们逐步了解如何构建这样的应用。 首先，我们...
JavaScript--倒计时---setInterva()与setTimeout() 方法
weixin_45904557的博客
04-13 2994
亲我e
js定时器介绍：倒计时定时器setTimeout、间隔定时器setInterval
YY的博客
10-13 4567
js定时器介绍：倒计时定时器setTimeout、间隔定时器setInterval
js使用setInterval实现倒计时
itmyhome的专栏
05-19 1万+
利用setInterval制作简单的js倒计时，点击按钮将触发定时器且按钮不可用html：获取校验码JS： var i; function getCode(){ $("#code").attr({"disabled":"disabled"}); i = self.setInterval("countdown()", 1000); } var int = 1
setInterval()详解
听海的博客
09-25 7842
1，语法： setInterval ( code, milliseconds[, args...] ) 2，实例说明： 1，setInterval(test, 5000);//简单函数调用 2，setInterval(function(){         alert(site);     }, 5000);//该写法可以延长作用域，使其能够访问到非全局变量 3，setInt
JavaScript setInterval 简单的倒计时功能
乔乔的博客
09-26 434
var times =10; var int = setInterval(countdown,1000); function countdown(){ times-- if(times&gt;0){ $(".btn").text("等待支付"+times+"S"); ...
setInterval() 用法
teresa502的专栏
09-30 1272
<br />Flash MX新函数setInterval给我们带来更强大的编程能力，知道javascript的朋友都知道，它相当于一个时间控制器（timer），下面是我整理的详细使用方法，特别推荐给大家！ <br />                        ;)用法： <br />                        setInterval ( function, interval [, arg1, arg2, ..., <br />                        argn
浅谈setInterval(aa,1000)与setInterval(aa(),1000)的区别
piaojiancong的博客
01-20 2776
一直有个疑惑，在定时器上调用某个方法时，加括号和不加括号有什么区别。今天做了个实验，发现，不加括号定时器会每秒执行一次，加了括号只会执行一次，在一些浏览器上会报错，如IE，但一样会正常执行一次。 这样写浏览器会正常运行，每秒打印一次。 但如果加了个括号 运行结果就只有一次 并且在IE浏览器会报错，但依然会执行一次 并且，如果全局范围内没有s
setInterval() 定时器实现一个简单的页面倒计时
码媛小洋的博客
08-18 2551
页面倒计时效果代码分析： 倒计时效果时不断变化的，因此需要setInterval() 定时器每次调用一次函数自动变化。 四个盒子里面分别存放天 时 分 秒。 四个盒子利用innerHTML放入计算得到的天数 小时 分钟 秒数。 第一次执行也是间隔毫秒数，因此第一次刷新页面会有空白，解决方案是先调用一次倒计时函数。 最好采用封装函数的方式，方便调用。 实现效果图： 技术难点： JS内置对象-------Date对象（Date() 是一个构造函数，必须使用new来调用创建我们的日期对象） 格式化获取日期
setInterval函数来实现倒计时动画
05-25
可以使用`setInterval`函数来实现倒计时动画，具体实现方法如下： 首先，需要设置一个初始时间和一个倒计时结束时间。然后，使用`setInterval`函数循环执行一个函数，该函数将会在每个一定的时间间隔内被调用。 在该函数内部，可以获得当前时间，并计算出还有多少时间剩余。然后，根据剩余时间来更新倒计时的显示，并在时间到达结束时间时停止计时器。 以下是一个简单的示例代码： ```javascript // 设置初始时间和结束时间 const startTime = new Date().getTime(); const endTime = startTime + 100000; // 获取页面中的倒计时元素 const countdown = document.querySelector('.countdown'); // 定义倒计时函数 function updateCountdown() { const currentTime = new Date().getTime(); const remainingTime = endTime - currentTime; // 计算剩余时间的分钟和秒数 const minutes = Math.floor(remainingTime / (1000 * 60)); const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000); // 更新倒计时的显示 countdown.innerHTML = `${minutes}:${seconds.toString().padStart(2, '0')}`; // 如果时间到达结束时间，停止计时器 if (remainingTime <= 0) { clearInterval(countdownInterval); countdown.innerHTML = 'Time Up!'; } } // 使用setInterval函数调用倒计时函数 const countdownInterval = setInterval(updateCountdown, 1000); ``` 在该示例代码中，我们首先获取了页面中的倒计时元素，并设置了初始时间和结束时间。然后，我们定义了一个`updateCountdown`函数，在函数内部计算剩余时间并更新倒计时的显示。最后，我们使用`setInterval`函数来循环调用该函数，直到时间到达结束时间时停止计时器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值