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校验表单后提交表单的三种方法进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了js实现div模拟模态对话框展现URL内容的功能,涉及javascript动态操作页面元素样式与ajax调用的相关技巧,需要的朋友可以参考下2016-05-05
首先说一下，为什么要服务器时间同步， 因为服务器时间和本地电脑时间存在一定的时间差。有些对时效性要求非常高的应用，例如时时彩开奖，是不能容忍这种时间差存在的2017-09-09
这篇文章主要为大家详细介绍了JavaScript实现电商平台商品细节图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
回调函数是一段可执行的代码段，它作为一个参数传递给其他的代码，其作用是在需要的时候方便调用这段（回调函数）代码,这篇文章主要介绍了JS中的 回调函数（callback）,需要的朋友可以参考下2022-12-12
你知道new吗？你知道new的实现原理吗？你能手写new方法吗？不要担心，这篇文件就来带大家深入了解一下JavaScript中的new操作符，感兴趣的小伙伴可以学习一下2022-10-10
这篇文章主要介绍了JS调用打印机功能的方法,结合完整实例形式分析了javascript打印机功能的相关设置与使用技巧,需要的朋友可以参考下2016-11-11
微信小程序wxss如何引用外部CSS文件以及iconfont
这篇文章主要给大家介绍了关于微信小程序wxss如何引用外部CSS文件以及iconfont的相关资料，文中通过图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了js实现简单音乐播放器，可拖动进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要介绍了微信公众号平台接口开发 菜单管理的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
最新评论