js实现内置计时器
网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要为大家详细介绍了js实现内置计时器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
计时器对于图片轮播和倒计时之类的与时间相关的项目有着很大的联系,它是实现这些的核心语法,如何一次深刻理解js计时器?往下看你就知道,有惊喜哦!
js计时器有两种,一种为延时后单次的执行,另一种为延时多次执行。通过函数的递归,前者也可以打破壁垒,拥有循环执行的功能。
setTimeout( javascript语句 , 毫秒);
(其中第一个值可以是一个函数 需要加" ",也可以是代码)
//延迟一段时间 执行 执行一次
setInterval("javascript语句" , 毫秒);
(其中第一个值可以是一个函数 需要加" ",也可以是代码)
//循环执行
具体实例 (一些细节和具体的用法还是在案例代码中便于理解)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>计时器</title> </head> <body> <button id="none">停止计时器</button> <button id="start">开始计时器</button> <script> // 有两个计时器 // setTimeout(); // 延迟一段时间 执行 执行一次 // setInterval(); // 循环执行 var stime=document.getElementById('none');//默认从零开始自加 获取开始按钮 var starttime=document.getElementById('start');//获取停止按钮 var count=0; var timecount; // 第一种 /*showtime(); function showtime(){ count++; console.log(count); timecount=setTimeout('showtime()',1000);//延时一秒 }//利用递归来实现循环时间 stime.onclick=function(){//停止计时器 clearTimeout(timecount);//将计时器清除,即停止自加 } starttime.onclick=function(){//开始计时器 timecount=setTimeout('showtime()',1000);//继续开始自加 }*/ //优点:重启计时器简单,由于是原本是单次执行,只需将之前的递归函数重新复制即可 缺点:需要递归调用 // 第二种 showtime(); function showtime(){//封装函数 timecount=setInterval(function(){ count++; console.log(count); },1000) } stime.onclick=function(){ clearInterval(timecount); } starttime.onclick=function(){ showtime(); } //优点:不需要递归调用,直接实现循环。缺点:重启较复杂,需要调用所有函数,建议封装函数。 </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:NUXT SSR初级入门笔记(小结)
下一篇:js实现秒表计时器
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程