用JS实现钟表计时器功能

JavaScript010

用JS实现钟表计时器功能,第1张

利用new Date()可以轻松的实现钟表功能,甚至日历功能.

如果要实现计时器功能也可以用这个对象.

var c = 1000 // 一千微秒,就是一秒

function funBeginDisTime() {

c = c + 1000 // 节奏为一秒

var now = new Date(0,0,0,0,0,0,c)

var day = now.getDate()

var hour = now.getHours()

var minutes = now.getMinutes()

var sec = now.getSeconds()

$("#myClock").html(day + "天"+ hour + "时" + minutes + "分" + sec + "秒")

myTime = setTimeout("funBeginDisTime()", 1000)// 每一秒执行一次

}

function funStopDisTime() {

clearTimeout(myTime)

}

body>

<input id="Button2" type="button" value="开始" onclick="funBeginDisTime()"/>

<span id="myClock"></span>

<input id="Button1" type="button" value="暂停" onclick="funStopDisTime()" />

</body>

setInterval() 是循环重复执行某个动作,

setTimeout()是只执行一次.

比如每五秒就通过AJAX向服务器发送一次请求.那么就可以用setInterval():

[javascript] view plain copy

setInterval("reloadAction()", 5000)

[javascript] view plain copy

function reloadAction() {

$.ajax({

"type":"POST",

"url":"live.php",

"data":"getData=live",

"success":function(data) {

// ....

}

})

}

首先javascript不是进程型的程序设计语言,它无法准确滴使一个函数执行5秒钟(时间段)但可以通过window.setInterval, window.setTimeout来模拟,比如:假设要在5秒钟内不断运行函数A:

function A(){

// ......some code

}

var timer = window.setInterval("A",500)

window.setTimeout(function(){window.clearInterval(timer)},5000)

记住:不要让程序进入一段循环以完成一项任务,这样会使浏览器停止响应而影响用户体验,而要让一个任务在指定时间内间歇执行,并在五秒钟后取消程序间隔调用