js的倒计时事件与倒计时小例子
2014-10-24 23:07
337 查看
通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:
setTimeout()用于设定未来的某时执行代码。
setTimeout的语法:
clearTimeout()用于取消setTimeout()的执行。
下面是一个具体的小例子来帮助理解:
例子一、
例子二、一个年份倒计时
效果如图:
在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:
setTimeout()用于设定未来的某时执行代码。
setTimeout的语法:
var timeID=setTimeout("javascript语句",毫秒) setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。 setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。 第二个参数指示从当前起多少毫秒后执行第一个参数。 提示:1000 毫秒等于一秒。
clearTimeout()用于取消setTimeout()的执行。
语法格式:clearTimeout(setTimeout_variable) 参数是上面的timeID用于指代setTimeOut方法。
下面是一个具体的小例子来帮助理解:
例子一、
<html> <head> <script type="text/javascript"> function timedMsg() { var y= setTimeout("fun()",3000); } function fun() { document.getElementById("txt").value="好好的过完这一年。。。。"; } </script> </head> <body> <form> <input type="button" value="输入框显示有内容" onClick = "timedMsg()"> <input type="text" id="txt"> </form> <p>请点击上面的按钮。警告框会在 3秒后显示。</p> </body> </html>
例子二、一个年份倒计时
<html> <head> </head> <body> <form name="form1"> <div align="center" align="center"> <center>距离2015年还有:<br> <input type="textarea" name="left" size="35" style="text-align: center"> </center> </div> </form> <script language="javascript"> startclock() var timerID = null; var timerRunning = false; function showtime() { Today = new Date(); var NowHour = Today.getHours(); var NowMinute = Today.getMinutes(); var NowMonth = Today.getMonth(); var NowDate = Today.getDate(); var NowYear = Today.getYear(); var NowSecond = Today.getSeconds(); if (NowYear <2000) NowYear=1900+NowYear; Today = null; Hourleft = 23 - NowHour Minuteleft = 59 - NowMinute Secondleft = 59 - NowSecond Yearleft = 2014 - NowYear Monthleft = 12 - NowMonth - 1 Dateleft = 31 - NowDate if (Secondleft<0) { Secondleft=60+Secondleft; Minuteleft=Minuteleft-1; } if (Minuteleft<0) { Minuteleft=60+Minuteleft; Hourleft=Hourleft-1; } if (Hourleft<0) { Hourleft=24+Hourleft; Dateleft=Dateleft-1; } if (Dateleft<0) { Dateleft=31+Dateleft; Monthleft=Monthleft-1; } if (Monthleft<0) { Monthleft=12+Monthleft; Yearleft=Yearleft-1; } Temp=Yearleft+'年, '+Monthleft+'月, '+Dateleft+'天, '+Hourleft+'小时, '+Minuteleft+'分, '+Secondleft+'秒' document.form1.left.value=Temp; timerID = setTimeout("showtime()",1000); timerRunning = true; } var timerID = null; var timerRunning = false; function stopclock () { if(timerRunning) clearTimeout(timerID); timerRunning = false; } function startclock () { stopclock(); showtime(); } // --> </script> </body> </html>
效果如图:
相关文章推荐
- js冒泡事件的作用与用途,js冒泡事件例子
- .net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
- Js注册协议倒计时的小例子
- js捕捉键盘事件例子
- jquery,js php 发送短信验证吗 前端 点击事件时间倒计时
- js——事件冒泡与捕获小例子
- js实现点击注册按钮开始读秒倒计时的小例子
- 一个取消事件的简单js例子(事件冒泡与取消默认行为)
- JS模拟键盘事件 -- 原理及小例子
- js实现点击注册按钮开始读秒倒计时的小例子
- 使用js中常用的鼠标事件实现一个拖拽的例子
- 一个理解js动态创建节点并注册事件及传递参数的例子
- 从零开始学习Node.js例子六 EventEmitter发送和接收事件
- 阻止js事件冒泡的例子(cancelBubble 、stopPropagation)
- 例子---年倒计时/JS日期对象类型
- .net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
- js事件的一些例子探讨
- 一个小例子很好解释了JS的事件队列
- JS闭包实现给DIV添加事件 显示二级菜单例子
- Js注册协议倒计时的小例子