计时器对于图片轮播和倒计时之类的与时间相关的项目有着很大的联系,它是实现这些的核心语法,如何一次深刻理解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 stoptime=document.getElementById('none');//默认从零开始自加 获取开始按钮 var starttime=document.getElementById('start');//获取停止按钮 var count=0; var timecount; // 第一种 /*showtime(); function showtime(){ count++; console.log(count); timecount=setTimeout('showtime()',1000);//延时一秒 }//利用递归来实现循环时间 stoptime.onclick=function(){//停止计时器 clearTimeout(timecount);//将计时器清除,即停止自加 } starttime.onclick=function(){//开始计时器 timecount=setTimeout('showtime()',1000);//继续开始自加 }*/ //优点:重启计时器简单,由于是原本是单次执行,只需将之前的递归函数重新复制即可 缺点:需要递归调用 // 第二种 showtime(); function showtime(){//封装函数 timecount=setInterval(function(){ count++; console.log(count); },1000) } stoptime.onclick=function(){ clearInterval(timecount); } starttime.onclick=function(){ showtime(); } //优点:不需要递归调用,直接实现循环。缺点:重启较复杂,需要调用所有函数,建议封装函数。 </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月16日
2024年11月16日
- 第五街的士高《印度激情版》3CD [WAV+CUE][2.4G]
- 三国志8重制版哪个武将智力高 三国志8重制版智力武将排行一览
- 三国志8重制版哪个武将好 三国志8重制版武将排行一览
- 三国志8重制版武将图像怎么保存 三国志8重制版武将图像设置方法
- 何方.1990-我不是那种人【林杰唱片】【WAV+CUE】
- 张惠妹.1999-妹力新世纪2CD【丰华】【WAV+CUE】
- 邓丽欣.2006-FANTASY【金牌大风】【WAV+CUE】
- 饭制《黑神话》蜘蛛四妹手办
- 《燕云十六声》回应跑路:年内公测版本完成95%
- 网友发现国内版《双城之战》第二季有删减:亲亲环节没了!
- 邓丽君2024-《漫步人生路》头版限量编号MQA-UHQCD[WAV+CUE]
- SergeProkofievplaysProkofiev[Dutton][FLAC+CUE]
- 永恒英文金曲精选4《TheBestOfEverlastingFavouritesVol.4》[WAV+CUE]
- 群星《国风超有戏 第9期》[320K/MP3][13.63MB]
- 群星《国风超有戏 第9期》[FLAC/分轨][72.56MB]