javascript计时器事件使用详解
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
setTimeout()
未来的某时执行代码
clearTimeout()
取消setTimeout()
setTimeout()
语法
代码如下:
var t=setTimeout("javascript语句",毫秒)
setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数。
提示：1000 毫秒等于一秒。
当下面这个例子中的按钮被点击时，一个提示框会在5秒中后弹出。
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
</form>
</body>
</html>
实例 - 无穷循环
要创建一个运行于无穷循环中的计时器，我们需要编写一个函数来调用其自身。在下面的例子中，当按钮被点击后，输入域便从 0 开始计数。
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
</form>
</body>
</html>
clearTimeout()
clearTimeout(setTimeout_variable)
实例
下面的例子和上面的无穷循环的例子相似。唯一的不同是，现在我们添加了一个 "Stop Count!" 按钮来停止这个计数器：
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
</body>
</html>
setInterval()
setInterval() - executes a function, over and over again, at specified time intervals
作用是:循环执行一个方法,在规定的间隔时间内
window.setInterval("javascript function",milliseconds);
说明:第一个参数必须是一个函数,第二个参数是执行函数的间隔时间.
实例:
<html>
<script type="text/javascript">
setInterval(function() {alert("hello")},500);
</script>
</html>
说明:上面例子,执行效果是说每隔500ms就alert("hello");
再来一个时钟:
<html>
<body>
<p id="demo" ></p>
<script type="text/javascript">
setInterval(function(){ myTimer()},1000);
function myTimer(){
var d = new Date();
var t=d.toLocaleTimeString();
document.getElementById('demo').innerHTML=t;
}
</script>
</body>
</html>
window.clearInterval()
window.clearInterval(intervalVariable)
The window.clearInterval() method can be written without the window prefix.
To be able to use the clearInterval() method, you must use a global variable when creating the interval method:
myVar=setInterval("javascript function",milliseconds);
Then you will be able to stop the execution by calling the clearInterval() method.
实例:
<html>
<body>
<p id="demo" ></p>
<p id="demo2" onclick="stop()">stop</p>
<script type="text/javascript">
var temp=setInterval(function(){ myTimer()},1000);
function myTimer(){
var d = new Date();
var t=d.toLocaleTimeString();
document.getElementById('demo').innerHTML=t;
}
function stop(){
<html>
<body>
<p id="demo" ></p>
<p id="demo2" onclick="stop()">stop</p>
<script type="text/javascript">
var temp=setInterval(function(){ myTimer()},1000);
function myTimer(){
var d = new Date();
var t=d.toLocaleTimeString();
document.getElementById('demo').innerHTML=t;
}
function stop(){
clearInterval(temp);
}
</script>
</body>
</html>
}
</script>
</body>
</html>
相关推荐
-
javascript实现的简单计时器
最近写了很多微信端的互动小游戏,比如下雪花 限时点击 赢取奖品,限时拼图,限时答题等,都是些限时'游戏'(其实算不上游戏,顶多算是具有一点娱乐性的小互动而已) 上面出现了4个限时,对,没错,这里记录的就是最近写的 '计时器' ... 恩 , 计时器 就一个setInterval 或 setTimeout 即可实现 ,代码不会超过十行! 但是不防抱着没事找事的心态,来写个能复用的计时器 1.能倒计时 也能顺计时 2.复位.暂停.停止,启动功能 //计时器 window.timer = (funct
-
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
-
javascript实现计时器的简单方法
计时器, 在生活当中也是用得频繁的功能, 比如锻炼身体, 跑步比赛等等相关的活动. 我们用Javascript来完成一个计时器. 计时器, 主要就是对时间的一个逻辑处理, 比如60秒等于1分钟, 60分钟等于一个小时, 我们这里只做到小时的处理. 就这么一个简单的逻辑, 然后动态的显示在一个Input里面. 那现在我们来完成这个界面 <label>计时:</label> <input type="text" name="" id=&qu
-
JavaScript分秒倒计时器实现方法
本文实例讲述了JavaScript分秒倒计时器实现方法.分享给大家供大家参考.具体分析如下: 一.基本目标 在JavaScript设计一个分秒倒计时器,一旦时间完成使按钮变成不可点击状态 具体效果如下图,为了说明问题,调成每50毫秒也就是每0.05跳一次表, 真正使用的时候,把window.onload=function(){...}中的setInterval("clock.move()",50);从50调成1000即可. 在时间用完之前,按钮还是可以点击的. 时间用完之后,按钮就不能
-
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计时器详解
计时器 基本格式: 复制代码 代码如下: setInterval(function(){代码},1000): /* 说明:1.setInterval 会返回一个计时器ID值 可以这样接收.var setId = setInterval(....); 2.接收setId的目的是为了清空计时器. clearTimeout(setId); */ 例如 一次性的计时器 格式: 复制代码 代码如下: setTimeout(function(){代码},1000) 案例: 复制代码 代码如下: var se
-
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
-
原生js实现秒表计时器功能
本文实例为大家分享了带有开始.暂停.清除功能的js计时器,供大家参考,具体内容如下 效果图: 下面贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计时器</title> <script> var hour,minute,second;//时 分 秒 hour=minute=secon
-
javascript设计简单的秒表计时器
本文实例讲述了javascript设计简单的秒表计时器的实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title> New Document </title> </head> <body> <form action="somepage.asp"> <input type="text" value="0&q