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的内容,达到时钟效果