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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Node.js中使用计时器定时执行函数详解
如果你熟悉客户端JavaScript编程,你可能使用过setTimeout和setInterval函数,这两个函数允许延时一段时间再运行函数.比如下面的代码, 一旦被加载到Web页面,1秒后会在页面文档后追加"Hello there": 复制代码 代码如下: var oneSecond = 1000 * 1; // one second = 1000 x 1 ms setTimeout(function() { document.write('<p>Hello there.
-
js编写简单的计时器功能
本文实例为大家分享了js计时器功能的编写代码,供大家参考,具体内容如下 小白一枚,如有代码不规范或者写错的地方,希望得大神指导 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,
-
javascript计时器事件使用详解
在 JavaScritp 中使用计时事件是很容易的,两个关键方法是: setTimeout()未来的某时执行代码 clearTimeout()取消setTimeout()setTimeout()语法 复制代码 代码如下: var t=setTimeout("javascript语句",毫秒) setTimeout() 方法会返回某个值.在上面的语句中,值被储存在名为 t 的变量中.假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它.setTimeout() 的第
-
javascript 秒表计时器实现代码
javascript 秒表计时器 实例代码: <html lang="en"> <head> <meta charset="UTF-8"> <title>js计时器</title> </head> <body> <input type="text" value="00:00"> <input type="button
-
JavaScript分秒倒计时器实现方法
本文实例讲述了JavaScript分秒倒计时器实现方法.分享给大家供大家参考.具体分析如下: 一.基本目标 在JavaScript设计一个分秒倒计时器,一旦时间完成使按钮变成不可点击状态 具体效果如下图,为了说明问题,调成每50毫秒也就是每0.05跳一次表, 真正使用的时候,把window.onload=function(){...}中的setInterval("clock.move()",50);从50调成1000即可. 在时间用完之前,按钮还是可以点击的. 时间用完之后,按钮就不能
-
原生js实现秒表计时器功能
本文实例为大家分享了带有开始.暂停.清除功能的js计时器,供大家参考,具体内容如下 效果图: 下面贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计时器</title> <script> var hour,minute,second;//时 分 秒 hour=minute=secon
-
javascript实现计时器的简单方法
计时器, 在生活当中也是用得频繁的功能, 比如锻炼身体, 跑步比赛等等相关的活动. 我们用Javascript来完成一个计时器. 计时器, 主要就是对时间的一个逻辑处理, 比如60秒等于1分钟, 60分钟等于一个小时, 我们这里只做到小时的处理. 就这么一个简单的逻辑, 然后动态的显示在一个Input里面. 那现在我们来完成这个界面 <label>计时:</label> <input type="text" name="" id=&qu
-
VB倒计时器和JS当前时间
VBscript做计时器,遇到一个问题,怎么在页面上不断的调用一个VB函数呢.... 例如倒计时,如何让秒数在不刷新的情况下走动... 想了好久,查了好多地方都是用JavaScript做的... 最后才发现了一个,是VBscript帮助上都没有说的..SetTimeOut属性..真晕哦.. 倒计时如下. 倒计时 sec=2 min=1 hou=0 SetTimeOut "SpareTime()",1000 sub SpareTime() if sec=0 and min=0 and h
-
javascript设计简单的秒表计时器
本文实例讲述了javascript设计简单的秒表计时器的实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title> New Document </title> </head> <body> <form action="somepage.asp"> <input type="text" value="0&q
-
JS 页面计时器示例代码
复制代码 代码如下: <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <script type="text/javascript"> var c=0 var t function timedCount() { document.getElementById('txt').value