<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>
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()
}
<html><script>
window.onload = function() {
var clock = document.getElementById('clock')
var color = ['red', 'green', 'yellow', 'blue', 'black', 'gold', 'orange', 'gray', 'pink', 'maroon'] //钟表颜色数组
setInterval(function() {
var now = new Date()
clock.innerHTML = now.getFullYear() + '年' + (now.getMonth()+1) + '月' + now.getDate() + '日' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds()
var radom = Math.floor(Math.random() * color.length + 1) - 1 //随机数
clock.style.color = color[radom] //设置随机颜色
}, 1000)
}
</script>
<body>
<span id="clock" style="font-size:20px"></span>
</body>
</html>
