用JS实现钟表计时器功能

利用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) {

// ....

}

})

}

function init(){

  clock()

  setInterval(clock,1000)

}

function clock(){

  var now = new Date()

  var ctx = document.getElementById('canvas').getContext('2d')

  ctx.save()

  ctx.clearRect(0,0,150,150)

  ctx.translate(75,75)

  ctx.scale(0.4,0.4)

  ctx.rotate(-Math.PI/2)

  ctx.strokeStyle = "black"

  ctx.fillStyle = "white"

  ctx.lineWidth = 8

  ctx.lineCap = "round"

  // Hour marks

  ctx.save()

  for (var i=0i<12i++){

    ctx.beginPath()

    ctx.rotate(Math.PI/6)

    ctx.moveTo(100,0)

    ctx.lineTo(120,0)

    ctx.stroke()

  }

  ctx.restore()

  // Minute marks

  ctx.save()

  ctx.lineWidth = 5

  for (i=0i<60i++){

    if (i%5!=0) {

      ctx.beginPath()

      ctx.moveTo(117,0)

      ctx.lineTo(120,0)

      ctx.stroke()

    }

    ctx.rotate(Math.PI/30)

  }

  ctx.restore()

  

  var sec = now.getSeconds()

  var min = now.getMinutes()

  var hr  = now.getHours()

  hr = hr>=12 ? hr-12 : hr

  ctx.fillStyle = "black"

  // write Hours

  ctx.save()

  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )

  ctx.lineWidth = 14

  ctx.beginPath()

  ctx.moveTo(-20,0)

  ctx.lineTo(80,0)

  ctx.stroke()

  ctx.restore()

  // write Minutes

  ctx.save()

  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )

  ctx.lineWidth = 10

  ctx.beginPath()

  ctx.moveTo(-28,0)

  ctx.lineTo(112,0)

  ctx.stroke()

  ctx.restore()

  

  // Write seconds

  ctx.save()

  ctx.rotate(sec * Math.PI/30)

  ctx.strokeStyle = "#D40000"

  ctx.fillStyle = "#D40000"

  ctx.lineWidth = 6

  ctx.beginPath()

  ctx.moveTo(-30,0)

  ctx.lineTo(83,0)

  ctx.stroke()

  ctx.beginPath()

  ctx.arc(0,0,10,0,Math.PI*2,true)

  ctx.fill()

  ctx.beginPath()

  ctx.arc(95,0,10,0,Math.PI*2,true)

  ctx.stroke()

  ctx.fillStyle = "#555"

  ctx.arc(0,0,3,0,Math.PI*2,true)

  ctx.fill()

  ctx.restore()

  ctx.beginPath()

  ctx.lineWidth = 14

  ctx.strokeStyle = '#325FA2'

  ctx.arc(0,0,142,0,Math.PI*2,true)

  ctx.stroke()

  ctx.restore()

}

---