定时器setInterval和clearInterval的使用

最新推荐文章于 2023-10-26 11:21:31 发布
最新推荐文章于 2023-10-26 11:21:31 发布
阅读量321 收藏
点赞数 1
分类专栏： js 文章标签： js css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jumubai/article/details/121099041
版权

简易倒计时的制作
js代码

//获取div
    var div=document.querySelector(".box");
    let i=10;
    //setInterval执行多次的定时器
    var timer=setInterval("time()",1000)
    function time(){
        div.innerHTML="倒计时"+i+"秒";
        i--;
        if(i<0){
        //clearInterval清除定时器
            clearInterval(timer);
            div.innerHTML="倒计时结束";
        }
    }

html和css代码，当然也可以不写css样式，效果是一样的

   <style>
    .box{
        width: 500px;
        height: 500px;
        margin: auto auto;
        font-size: 40px;
        color: paleturquoise;
        background-color: pink;
        text-align: center;
        line-height: 500px;
        transition: 3s;
    }
</style>
<body>
    <div class="box"> 
        
    </div>
</body>

效果图
在这里插入图片描述

jumubai
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
clearInterval函数：JavaScript定时器管理利器
专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。
12-23 1536
JavaScript中的clearInterval函数是用于管理和控制定时器的执行的重要工具。它允许开发者停止通过setInterval创建的定时器，从而有效地管理周期性操作。本文将深入探讨clearInterval函数的语法、用法、性能问题以及最佳实践，帮助您更好地利用这一功能。
setInterval 和 clearInterval 的用法
noeal的博客
08-24 360
setInterval 和 clearInterval 的用法： var times = 10; var timeOut = setInterval(() => { if (times != 0) { $("#accept").html("同意（"+times+"）"); } else { $("#accept").html("同意"); $("#accept").removeClass("btnDisable"); $("#acce
定时器setInterval()与定时器的清除clearInterval()
chichang2512的博客
07-30 1504
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>primaryanimatetest</title...
调用clearInterval(), 定时器仍在进行
Charonmomo的博客
10-26 375
把 timer 改成 useState 那种方式就可以了.我是在 react 的函数组件中遇到这个问题的,来清除定时器了, 但是发现定时器还在运行.在 fail() 函数中调用。
JavaScript定时器取消后怎样重新启动？？
hsany330的专栏
08-13 6787
vart=setInterval(fun1,500)//fun1是你的函数 varfun1=function(){ //写入zhi你的函数 alert("执行代码"); } clearInterval(t)//清除dao定时器 t=setInterval(fun1,500)//重新开始定时器 注意，后面重启定时器的时候，前面是没有var的，不然会打开两个定时器 ...
setInterval与clearInterval的使用示例代码
09-04
在JavaScript中，`setInterval` 和 `clearInterval` 是两个非常重要的定时器函数，它们用于在指定的时间间隔内重复执行某个函数或者代码块。本文将详细介绍这两个函数的使用方法及示例代码。 `setInterval` 函数...
Vue清除定时器setInterval优化方案分享
11-20
两种方案清除定时器，开发者经常使用方案1，建议使用方案2 方案1 首先我在data函数里面进行定义定时器名称： data() { return { timer: null // 定时器名称 } }, 然后这样使用定时器： this.timer = (() => { ...
BOM系列第一篇之定时器setTimeout和setInterval
09-01
在BOM系列的第一篇中，我们重点关注的是定时器`setTimeout`和`setInterval`，这两个方法是JavaScript中处理异步编程的重要工具。 `setTimeout`方法允许我们在指定的毫秒数之后执行一个函数或字符串。它接受两个主要...
JS中SetTimeout和SetInterval使用初探
10-20
在JavaScript中，`setTimeout` 和 `setInterval` 是两种非常重要的定时器函数，它们用于在指定的时间后执行特定的函数或代码块。这篇文章将深入探讨这两个函数的使用方法、相同之处以及它们之间的区别。 首先，`...
清除定时器后再次启用定时器_setInterval()和setTimeout()区别及清除定时器
weixin_39928106的博客
01-28 1947
概念语法及解释：var intervalID = window.setInterval(func, delay[, param1, param2, ...]);intervalID 是此重复操作的唯一辨识符，可以作为参数传给clearInterval()。 setInterval在指定的延迟时间之后调用一个函数或者执行一个代码片段。 intervalID是你想要取消的重复动作的ID,这个ID是...
clearInterval(timer)和timer = null的区别
Miss卿
02-21 1万+
clearInterval(timer)和timer = null的区别 clearInterval(timer)的作用只是将定时器停止，但是timer对象本身还是存在的，比如这样就可以重启： var timer=setInterval(function(){},3000); $("div") .mouseover(function(){ //鼠标放上去关闭，离开再
JS中setInterval()和clearInterval()的使用以及注意事项
热门推荐
YDesire的博客
07-19 7万+
setInterval()： 间隔指定的毫秒数不停地执行指定的代码，定时器 clearInterval()： 用于停止 setInterval() 方法执行的函数代码 使用方法：setInterval(code，millisec)，两个参数都是必须的，第一个参数为要调用的函数或要执行的代码串。第二个参数为周期性执行或调用 code 之间的时间间隔，以毫秒计。 clearInterval(id...
clearInterval() 函数详解
dididan5079的博客
03-22 2万+
定义和用法 clearInterval() 方法可取消由 setInterval() 设置的 timeout。 clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。 语法 clearInterval(id_of_setinterval) 参数 描述 id_of_se...
setInterval()和clearInterval() 用法
依然谈笑春风
08-05 4万+
setInterval()和clearInterval() 用法 一、含义(摘自百度百科) setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。 由 setInterval() 返回的 ID 值可用作 clearInterval() 方法
js clearInterval()方法的定义和用法
MiuWing的博客
06-29 1万+
clearInterval()方法能够取消setInterval()方法设置的定时器，本文给大家详解clearInterval()方法的定义和用法，感兴趣的朋友参考下。 此方法能够取消setInterval()方法设置的定时器。 此方法的参数必须是要取消相应的setInerval()方法的返回值。 点击可参阅更多window对象的属性和方法。 语法结构:
js中clearInterval的重新执行/重新开始
lishirong_李世荣的专栏
12-02 1万+
问题描述:系统进入页面，可以通过setInterval的方式进行定时执行某一个任务，当使用clearInterval之后需要再次调用setInterval，却不能够再次让setInterval执行的函数再次执行，本篇日志中，没有使用clearInterval，但也几乎实现了clearInterval的功能。希望能帮助到大家。String path = request.getContextPath(
js clearInterval 多个定时任务 全部清除
tang_jian_dong的博客
06-29 2万+
for循环内小于定时数， 就会留一个当前执行的任务， 小于等于就是全部清除。 var end = setInterval(function(){}, 100); var start = (end - 100) > 0 ? end -100 : 0; for(var i = start; i <end; i++) { clearInterval(i); ...
JavaScript 定时器 取消定时器
XJHui
11-13 629
感谢：链接（视频讲解很清晰） 定时器：作用主要是一定时间间隔后，做出相关的变化，例如图片轮播。 目录 两种定时器的使用 两种定时器区别 取消定时器的方法 两种定时器的使用： 方法一：setTimeout ·1、用法： <script type="text/javascript"> setTimeout(dosth,1000); //包含两个变量，前面为要调用的函数...
setInterval 和 clearinterval
最新发布
04-11
setInterval和clearInterval是JavaScript中用于定时执行代码的函数。 1. setInterval函数： setInterval函数用按照指定的时间间隔重复执行指定的代码。它接受两个参数：一个是要执行的代码块，另一个是时间间隔...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值