如图所示，利用射流研究…实现简易的刻度时钟；

原理如下：利用60等份的里进行布局，李两两之间的间隔为6度，把基点定在圆心上，使得里圆形分布。然后另外设置三条针线的样式的位置，基点同样定在圆心上，然后秒针每秒动6度，分针每秒动1/60度，时针每秒动1/3600度。

布局代码如下：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title style type=' text/CSS ' id=' sty ' * { margin : 0；padd : 0；列表样式：无；} #包装{ width: 200px高度： 200像素；border: 1px固体# 000;边界半径： 50%;余量： 20px自动；相对位置：} # wrap ul {相对位置：} #包装ul li { width: 2pxheight: 6px背景技术： # 000;绝对位置：left : 99pxtop : 0；-moz-transform-origin : center 100px；} # wrap ul Li : th-child(5n){ height : 10px；} # con { width : 10px x8 : 10px背景技术： # 000;边界半径： 50%;绝对位置：left : 95 xtop : 95px } # hour { width : 5px高度： 70px背景：红色；边界半径： 50%;绝对位置：left : 98pxtop : 35px-moz-transform-origin : center 65px；} # min { width: 3px高度： 85px背景技术： # 000;边界半径： 50%;绝对位置：left : 98.5 xtop : 20px-moz-transform-origin : center 80px；} # sec { width: 2px高度： 100像素；背景：灰色；边界半径： 50%;绝对位置：left : 98.5 xtop : 20px-moz-transform-origin : center 80px；}/style/head body div id=' wrap ' ul id=' list '/ul div id=' hour '/div div id=' min '/div div id=' sec '/div div id=' con '/div/div/body/html布局代码里需要注意的是：每隔四个刻度就有一个刻度比较长，所以我们在设置样式的时候要特别注意加上：#包装ul Li : th-child(5n){ height : 10px；}。第5n个的长度变长。

射流研究…代码中主要搞清楚三针之间的度数关系就好做了，代码如下：

脚本类型=' text/JavaScript '窗口。onload=function(){ var oWrap=document。getelementbyid(' wrap ')；var oList=文档。getelementbyid(' list ')；var oSty=文档。getelementbyid(' sty ')；var tump=for(var I=0；i60I){ var AlI=document。创建元素(“李”)；奥利斯特。append child(AlI)；tump=' # wrap ul Li : th-child('(I 1)'){ transform : rotate('(I 1)* 6 ' deg)；}';osty . innerhtml=tump } var OSec=document。getelementbyid(' sec ')；var Omin=文档。getelementbyid(' min ')；var Ohour=文档。GetElementBYid('小时')；函数time(){ var Date=new Date()；var s=日期。getseconds()；var m=日期。getminutes()(s/60)；var h=日期。get hours()(m/60)；osec。风格。transform=' rotate '(s * 6 ' deg ')；奥明。风格。transform=' rotate '(m * 6 ' deg ')；哦。风格。变换='旋转'(h * 30 '度')；} time()；setInterval(时间，1000);}/脚本以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。