js实现内置计时器
更新时间：2019年12月16日 09:28:54 作者：ICY___
这篇文章主要为大家详细介绍了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 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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了js实现3D图片环展示效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
本篇文章主要介绍了p5.js入门教程之简介和基本形状绘制，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章介绍了非常好用的JsonToString简单实例，有需要的朋友可以参考一下2013-07-07
这篇文章主要介绍了js实现类似菜单风格的TAB选项卡效果代码,通过javascript鼠标事件及页面元素遍历实现tab切换的功能,非常简单实用,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了js中使用replace方法完成某个字符的转换,比较实用，需要的朋友可以参考下2014-08-08
这篇文章主要介绍了JS字符串转换为数组的4 个方法示例小结,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
这篇文章主要给大家介绍了关于微信小程序抽奖组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
JS多重继承实例，js新手学习资料2008-03-03
这篇文章主要介绍了js正则表达式验证邮件地址，利用javaScript语言实现一下电子邮件地址验证程序，使用的是JavaScript语言的正则表达式库，感兴趣的小伙伴们可以参考一下2015-11-11
总所周知啊，身为一个合格的前端搬砖工，会编写并且添加一些基础的动画效果可谓是比较基础且轻车熟路的技能了。本文将教大家如何使用原生JS添加进场和退场动画，感兴趣的可以了解一下2022-10-10
最新评论