css如何制作时钟？
代码如下:
& lt！DOCTYPE html & gt
& lthtml lang = & quot恩& quotxmlns = & quothttp://www.w3.org/1999/xhtml" & gt；
& lthead & gt
& ltmeta charset = & quotutf-8 & quot；/& gt；
& lttitle & gt画布实例制作时钟
& lt/head & gt；
& ltbody & gt
& lt画布id = & quot画布& quotwidth = & quot500 & quotheight = & quot500 & quot& gt
你的浏览器版本太低了！可以改！
& lt/canvas & gt；
& lt脚本& gt
//获取画布
var canvas = document . getelementbyid(& quot；画布& quot);
//设置环境
var cxt = canvas . get context(& quot；2d & quot);
//制作一个时钟函数
函数DrawClock() {
//清除画布
cxt.clearRect(0，0，500，500)；
//获取当前时间的小时、分钟和秒
var now = new Date()；
var hour = now . get hours()；
var min = now . get minutes()；
var sec = now . get seconds()；
//必须获取小时的浮点类型(小时
小数->)。成小时)
小时=小时
分钟/60；
//将24小时转换为12小时
hour = hour & gt12 ?小时- 12:小时；
//拨打电话
cxt . begin path()；
cxt.lineWidth = 10
cxt.strokeStyle = & quot# ABCDEF & quot；
cxt.arc(250，250，200，0，360，false)；
cxt . stroke()；
cxt . close path()；
//缩放
//时针
for(var I = 0；我& lt12;i
) {
cxt . save()；
cxt . line width = 7；
cxt.strokeStyle = & quot红色& quot；
//设置0，0点
cxt.translate(250，250)；
//再次设置旋转角度。
cxt.rotate(i * 30 * Math。PI/180)；
cxt . begin path()；
cxt.moveTo(0，-170)；
cxt.lineTo(0，-190)；
cxt . close path()；
cxt . stroke()；
cxt . restore()；
}
//分针
for(var I = 0；我& lt60;i
) {
//为了避免不同颜色的重叠，
//不要在时针刻度与分针刻度重叠的位置画分针。
if (i % 5 == 0)继续；
cxt . save()；
//设置刻度粗细
cxt . line width = 5；
cxt.strokeStyle = & quot紫色& quot；
//设置画布的0，0点
cxt.translate(250，250)；
//设置旋转角度
cxt.rotate(i * 6 * Math。PI/180)；
//绘制分针刻度
cxt . begin path()；
cxt.moveTo(0，-180)；
cxt.lineTo(0，-190)；
cxt . close path()；
cxt . stroke()；
cxt . restore()；
}
//时针
cxt . save()；
//设置时针样式
cxt . line width = 7；
cxt.strokeStyle = & quot粉色& quot；
//设置不同尺寸之间的0，0点空
cxt.translate(250，250)；
//设置旋转角度
cxt.rotate(小时* 30 *数学。PI/180)；
cxt . begin path()；
cxt.moveTo(0，-140)；
cxt.lineTo(0，10)；
cxt . close path()；
cxt . stroke()；
cxt . restore()；
//分针
cxt . save()；
//设置分针样式
cxt . line width = 5；
cxt.strokeStyle = & quot橙色& quot；
//设置不同尺寸之间的0，0点空
cxt.translate(250，250)；
//设置旋转角度
cxt.rotate(最小* 6 *数学。PI/180)；
cxt . begin path()；
cxt.moveTo(0，-160)；
cxt.lineTo(0，15)；
cxt . close path()；
cxt . stroke()；
cxt . restore()；
//秒针
cxt . save()；
//样式
cxt.strokeStyle = & quot黄色& quot；
cxt . line width = 3；
//重置0，0点
cxt.translate(250，250)；
//设置旋转角度
cxt.rotate(秒* 6 *数学。PI/180)；
//画一幅画
cxt . begin path()；
cxt.moveTo(0，-170)；
cxt.lineTo(0，20)；
cxt . stroke()；
//画时针、分针、秒针的交点。
cxt . begin path()；
cxt.arc(0，0，5，0，360，false)；
cxt . close path()；
//设置填充样式
cxt.fillStyle = & quot蓝色& quot；
cxt . fill()；
//设置笔画样式->；秒针已经摆好了。
cxt . stroke()；
//将点设置在秒针的前面
cxt . begin path()；
cxt.arc(0，-150，5，0，360，false)；
cxt . close path()；
//设置填充样式
cxt.fillStyle = & quot蓝色& quot；
cxt . fill()；
//设置笔画样式
cxt . stroke()；
cxt . close path()；
cxt . restore()；
}
//调用函数
draw clock()；
//设置时钟转动。
setInterval(DrawClock，1000)；
& lt/script & gt；
& lt/body & gt；
& lt/html & gt；