【JavaScript定时器小案例】常见的几种定时器实现的案例

【JavaScript定时器小案例】常见的几种定时器实现的案例

博客说明

文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!

说明

在日常开发中定时器的使用还是挺多的,这里介绍几种比较常见的。

案例一:手机验证码倒计时

代码




    
  
  

效果

image-20211115190710776image-20211115190725477

代码解析

使用setTimeout来模拟倒计时的效果,这其中有小许误差,不过可以在可接受的范围内。

案例二:日历时钟

代码



    
    简易时钟
    


    
效果

image-20211115192529349

代码解析

利用setInterval每间隔1秒获取一次当前时间

案例三:抽奖

代码



    
    抽奖


    
        

效果

【JavaScript定时器小案例】常见的几种定时器实现的案例_第1张图片

代码解析

先让一个数开始快速循环,通过使用setInterval完成,当点击结束时,调用clearInterval清除定时器,达到定格的效果,具体循环内可以换成奖品数组或者其他的数据,也能够达到此类效果。

总结

选了三个比较有代表性的案例,pym也可以通过以上三个简单的案例扩充起来,达到锻炼JS的定时器的效果。比如日历时钟的那个,可以做成一个表盘,让时分秒进行转动。

如果点赞有50,就安排上!

感谢

万能的网络

以及勤劳的自己,个人博客GitHub测试GitHub

公众号-归子莫,小程序-小归博客

你可能感兴趣的:(前端javascript定时器)