<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>canvas实例--制作时钟</title>
</head>
<body>
<canvas id="canvas" width="500" height="500" >
您的浏览器版本太低啦！可以换了！
</canvas>
<script>
//获取canvas
var canvas = document.getElementById("canvas")
//设置环境
var cxt = canvas.getContext("2d")
//制作时钟的函数
function DrawClock() {
//清除画布
cxt.clearRect(0,0,500,500)
//获取当前时间的时，分，秒
var now = new Date()
var hour = now.getHours()
var min = now.getMinutes()
var sec = now.getSeconds()
//小时必须获取浮点型（小时+分数--->转化为的小时）
hour = hour + min / 60
//将24小时转换为12小时
hour = hour >12 ? hour - 12 : hour
//制作表盘
cxt.beginPath()
cxt.lineWidth = 10
cxt.strokeStyle = "#ABCDEF"
cxt.arc(250, 250, 200, 0, 360, false)
cxt.stroke()
cxt.closePath()
//刻度
//时针
for (var i = 0i <12i++) {
cxt.save()
cxt.lineWidth = 7
cxt.strokeStyle = "red"
//设置0,0点
cxt.translate(250, 250)
//再设置旋转角度
cxt.rotate(i * 30 * Math.PI / 180)
cxt.beginPath()
cxt.moveTo(0, -170)
cxt.lineTo(0, -190)
cxt.closePath()
cxt.stroke()
cxt.restore()
}
//分针
for (var i = 0i <60i++) {
//为避免不同颜色的重叠，
//在时针刻度与分针刻度重叠的位置，不画分针
if (i % 5 == 0) continue
cxt.save()
//设置刻度粗细
cxt.lineWidth = 5
cxt.strokeStyle = "purple"
//设置画布的0,0点
cxt.translate(250, 250)
//设置旋转角度
cxt.rotate(i * 6 * Math.PI / 180)
//画分针刻度
cxt.beginPath()
cxt.moveTo(0, -180)
cxt.lineTo(0, -190)
cxt.closePath()
cxt.stroke()
cxt.restore()
}
//时针
cxt.save()
//设置时针风格
cxt.lineWidth = 7
cxt.strokeStyle = "pink"
//设置异次元空间的0,0点
cxt.translate(250, 250)
//设置旋转角度
cxt.rotate(hour * 30 * Math.PI / 180)
cxt.beginPath()
cxt.moveTo(0, -140)
cxt.lineTo(0, 10)
cxt.closePath()
cxt.stroke()
cxt.restore()
//分针
cxt.save()
//设置分针风格
cxt.lineWidth = 5
cxt.strokeStyle = "orange"
//设置异次元空间的0,0点
cxt.translate(250, 250)
//设置旋转角度
cxt.rotate(min * 6 * Math.PI / 180)
cxt.beginPath()
cxt.moveTo(0, -160)
cxt.lineTo(0, 15)
cxt.closePath()
cxt.stroke()
cxt.restore()
//秒针
cxt.save()
//风格
cxt.strokeStyle = "yellow"
cxt.lineWidth = 3
//重置0，0点
cxt.translate(250, 250)
//设置旋转角度
cxt.rotate(sec*6*Math.PI/180)
//画图
cxt.beginPath()
cxt.moveTo(0, -170)
cxt.lineTo(0, 20)
cxt.stroke()
//画出时针，分针，秒针的交叉点
cxt.beginPath()
cxt.arc(0, 0, 5, 0, 360, false)
cxt.closePath()
//设置填充样式
cxt.fillStyle = "blue"
cxt.fill()
//设置笔触样式--->秒针已设置
cxt.stroke()
//设置秒针前端的小圆点
cxt.beginPath()
cxt.arc(0, -150, 5, 0, 360, false)
cxt.closePath()
//设置填充样式
cxt.fillStyle = "blue"
cxt.fill()
//设置笔触样式
cxt.stroke()
cxt.closePath()
cxt.restore()
}
//调用函数
DrawClock()
//设置时钟转动起来
setInterval(DrawClock, 1000)
</script>
</body>
</html>
可用孩子喝口服液的小吸管，剪下一段（表盘加表针的厚度在稍长一点），把表盘和表针相串，用打火机把两端烧一下形成堵头即可（想堵头大些可在烧完马上用手指蘸水按下）。非常安全实用也很美观。
扩展资料
上条和拨针都是通过柄头部件来实现的。上条时，立轮和离合轮处于啮合状态，当转动柄头时，离合轮带动立轮，立轮又经小钢轮和大钢轮，使条轴卷紧发条。棘爪则阻止大钢轮逆转。拨针时，拉出柄头，拉档在拉档轴上旋转并推动离合杆，使离合轮与立轮脱开，与拨针轮啮合。此时转动柄头便拨针轮通过跨轮带动时轮和分轮，达到校正时针和分针的目的。
钟表要求走时准确，稳定可靠。但一些内部因素和外界环境条件都会影响钟表的走时精度。内部因素包括各组成系统的结构设计、工作性能、选用材料、加工工艺和装配质量等。例如，发条力矩的稳定性，传动系工作的平稳性，擒纵调速器的准确性等都影响走时精度。
参考资料：百度百科钟表
是啊，其实只要一句简单的CSS（层叠样式表），你也能在网页上实现这种效果。首先，你需要一个鼠标指针文件，可以通过单击“开始”→点击“查找”→键入“.ani”或“.cur”(不含双引号)，也可以到网上下载你喜欢的指针。注：.ani是动态效果的指针文件；.cur 是静态效果的指针文件。
下面是两种实现个性鼠标的方法。
1.定义所有超链接的指针
把cursor:url(指针文件的路径)加入到超链接的CSS文件中。
如：a {color:#000000cursor:url(指针文件的路径)}
2.定义个别链接的指针
把style="cursor:url(指针文件的路径)"放进<a>的容器中。
如：<a href="指定链接地址" style="cursor:url(指针文件的路径)">链接文字</a>
现在保存文件，预览一下你网页的个性鼠标指针吧!
