请选择 进入手机版 | 继续访问电脑版

简述JS中两种定时器的用法

[复制链接]
大胆 发表于 2021-1-3 09:54:31 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
简述JS中两种定时器的用法

setTimeout()定时炸弹



  • setTimeout()使用时指定一个时间段,只要时间到了直接执行绑定的函数
setTimeout()中通报两个参数

第一个参数:事件所执行的函数
第二个参数:时间隔断就是时间段(以毫秒为单位)
实例

  1. window.setTimeout(function(){            alert("hello");        },3000)
复制代码
停止定时器

停止定时器方法取消了先前通过调用setTimeout()创建的定时器,括号中的参数就是要停止的定时器的标识符
语法

  1. window.clearTimeout(参数);
复制代码
setInterval()闹钟定时器



  • setInterval()使用时指定一个时间段,然后每隔这个时间段都会调用一次绑定函数
setInterval()中通报两个参数

第一个参数:事件所执行的函数
第二个参数:时间隔断就是时间段(以毫秒为单位)
实例

  1. var i=0;window.setInterval(function(){    console.log(i);    i++;},1000);
复制代码
停止定时器

停止定时器方法取消了先前通过调用setInterval()创建的定时器,参数就是要停止的定时器的标识符
语法

  1. window.clearInterval(参数)
复制代码
注意:



  • 绑定函数的时候,回调函数(callback)可以直接写在方法参数所在的位置,还可以采取字符串"函数名()",还可以直接写函数名,三种调用方式,但是不推荐使用字符串方式
  • 延迟的毫秒数可以省略,默认为0,如果要写的话必须是毫秒
  • 如果定时器比力多的话,可以给每个定时器一个标识符
原生JS实现元旦倒计时

本日我们使用我们学过的计时器来实现元旦倒计时.

废话少说,直接上源码!

  1.             元旦倒计时                * {            margin: 0px;            padding: 0px;        }        div {            width: 800px;            height: 250px;            border: 1px solid skyblue;            margin: 50px auto;        }        p {            font-size: 45px;            color: tomato;            text-align: center;        }        span {            display: inline-block;            height: 60px;            font-size: 45px;        }        .day {            margin-left: 150px;        }                    元旦倒计时
  2.         隔断元旦另有:
  3.         0        天        0        小时        0        分钟        0        秒   
  4.    
复制代码
鄙人小白一枚,包涵!有什么问题的话欢迎各人品评,本人会实时改正!

来源:https://blog.csdn.net/XVJINHUA954/article/details/112058284
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )