<html>
<head>
<meta charset="UTF-8">
<title>clock test</title>
<script type="text/javascript">
onload = function(){
var canvas = document.querySelector('canvas')
var ctx =canvas.getContext('2d')
var frameId = null
var start = Date.now()
var draw = function(){
console.log(frameId)
ctx.clearRect(0,0,410,410)
var now = new Date()
var sec = now.getSeconds()
var min = now.getMinutes()
var hour = now.getHours() + min/60
hour = hour>12 ? hour-12 :hour
ctx.save()
ctx.beginPath()
ctx.strokeStyle ='#ABCDEF'
ctx.lineWidth =10
ctx.arc(205,205,200,0,360,false)
ctx.stroke()
ctx.closePath()
ctx.restore()
// 画时针刻度
for(var i = 1i<=12i++){
ctx.save()
ctx.lineWidth=8
ctx.font = 'normal 400 20px/2 sans-serif'
ctx.translate(205,205)
ctx.rotate(i*30*Math.PI/180)
ctx.beginPath()
ctx.moveTo(0,-195)
ctx.lineTo(0,-180)
ctx.fillText(i,(i>10?-10:-5),-160)
ctx.closePath()
ctx.stroke()
ctx.restore()
}
// 画分针秒针刻度
for(var i = 0i<60i++){
ctx.save()
ctx.lineWidth=6
ctx.translate(205,205)
ctx.rotate(i*6*Math.PI/180)
ctx.beginPath()
ctx.moveTo(0,-195)
ctx.lineTo(0,-185)
ctx.closePath()
ctx.stroke()
ctx.restore()
}
// 画时针
ctx.save()
ctx.lineWidth=10
ctx.translate(205,205)
ctx.beginPath()
ctx.rotate(hour*30*Math.PI/180)
ctx.moveTo(0,-155)
ctx.lineTo(0,20)
ctx.closePath()
ctx.stroke()
ctx.restore()
// 画分针
ctx.save()
ctx.lineWidth=6
ctx.translate(205,205)
ctx.beginPath()
ctx.rotate(min*6*Math.PI/180)
ctx.moveTo(0,-165)
ctx.lineTo(0,20)
ctx.closePath()
ctx.stroke()
ctx.restore()
// 画秒针
ctx.save()
ctx.lineWidth=4
ctx.translate(205,205)
ctx.beginPath()
ctx.rotate(sec*6*Math.PI/180)
ctx.moveTo(0,-175)
ctx.lineTo(0,20)
ctx.closePath()
ctx.stroke()
ctx.restore()
// 画秒针装饰
ctx.save()
ctx.lineWidth=4
ctx.fillStyle="#ccc"
ctx.translate(205,205)
ctx.beginPath()
ctx.rotate(sec*6*Math.PI/180)
ctx.arc(0,0,10,0,360,false)
ctx.closePath()
ctx.stroke()
ctx.fill()
ctx.restore()
ctx.save()
ctx.lineWidth=4
ctx.strokeStyle="#333"
ctx.fillStyle="red"
ctx.translate(205,205)
ctx.beginPath()
ctx.rotate(sec*6*Math.PI/180)
ctx.arc(0,-150,8,0,360,false)
ctx.closePath()
ctx.stroke()
ctx.fill()
ctx.restore()
if(Date.now()-start >=1000){
start = Date.now()
frameId = requestAnimationFrame(draw)
}else{
start = Date.now()
setTimeout(draw,1000)
}
}
draw()
}
</script>
</head>
<body>
<canvas width="410" height="410">你的浏览器不支持canvas标签</canvas>
</body>
</html>
<html><head>
<script type="text/javascript">
<!--
window.onload=function(){
var oDiv=document.getElementById('time') // 获取DIV
function theTime(){
var theDate=new Date() // 创建一个日期对象
var year=theDate.getFullYear() // 获取年份
var month=theDate.getMonth() // 获取月份
var day=theDate.getDate() //获取日
var hour=theDate.getHours() //获取小时
var minues=theDate.getMinutes() // 获取分钟
var second=theDate.getSeconds() // 获取秒
oDiv.innerHTML="现在的时间是"+year+"年"+month+"月"+day+"日 "+hour+":"+minues+":"+second
}
theTime() // 执行时间函数
setInterval(theTime,1000) // 更新时间
}
//-->
</script>
</head>
<div id="time"></div>
</html>
你试下,，，，
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的内容，达到时钟效果
