js时间控件

JavaScript08

js时间控件,第1张

My97DatePicker,将dateFmt设置为"HH:mm:ss"

<input type="text" onclick="WdatePicker({dateFmt:'HH:mm:ss'})" />

效果:

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()

}

setTimeout定时document.write以后,重新打开输出流,会清空页面内容,包括你以前的代码,简单改了一下:

<script>

function tick() {

var hours, minutes, seconds, xfile

var intHours, intMinutes, intSeconds

var today

today = new Date()

intHours = today.getHours()

intMinutes = today.getMinutes()

intSeconds = today.getSeconds()

if (intHours == 0) {

hours = "12:"

xfile = "午夜"

} else if (intHours <12) {

hours = intHours+":"

xfile = "上午"

} else if (intHours == 12) {

hours = "12:"

xfile = "正午"

} else {

intHours = intHours - 12

hours = intHours + ":"

xfile = "下午"

}

if (intMinutes <10) {

minutes = "0"+intMinutes+":"

} else {

minutes = intMinutes+":"

}

if (intSeconds <10) {

seconds = "0"+intSeconds+" "

} else {

seconds = intSeconds+" "

}

timeString = xfile+hours+minutes+seconds

document.getElementById("t").innerHTML=timeString

window.setTimeout("tick()", 1000)

}

window.onload=tick

</script>

<div id="t"></div>

================================

Clock.innerHTML = timeString

定时重写clock的内容,达到时钟效果