又一款射流研究…时钟！改变实现时钟效果

又来一个时钟效果了，这个的实现不需要帆布，都是div、ul、li画出的，好玩有真实。

哈哈~

需要的射流研究…才能实现到走动这个效果，但射流研究…的内容不多，也不难。主要是一个钢性铸铁里改变的使用的思路，转换里有很多变幻属性，而普通的时钟在我心中就是个圆圆的东西，那么是不是可以旋转这个属性（旋转)实现了，它的刻度使用旋转且把旋转点设置在圆心，那不就可以绕着圆心转了吗，而时针它们的底部不是和圆心接触的吗，那么设置时针的底部为旋转点不就好了，大概的说了说思路。

代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title transform/title style id=' CSS ' # clock { width : 200px；高度： 200像素；border: 2px固体# 000;边界半径： 50%;余量： 100像素自动0;相对位置：} # clock ul { width: 200px高度： 200像素；相对位置：列表样式：无；划水：0;保证金： 0；} # clock ul Li { width : 2px 8: 10px背景技术： # 000;变换原点：中心100px绝对位置：top : 0；左侧： 50%;} #时钟ul li:nth型(5n 1){高度： 20px} # hour { height: 40px宽度： 4px背景技术# 00fefe绝对位置：top: 60pxleft: 99px变换-原点：中心底部；} # min { height: 60px宽度： 3px背景# 001生活绝对位置：top : 40pxleft : 99pxtransform-origin :中心底部；变压器： 旋转(15 );} # sec { height: 70px宽度： 2px背景技术： # 000;绝对位置：top: 30pxleft: 99px变换-原点：中心底部；} # dot { width : 10px x8 : 10px绝对位置：left : 95 xtop : 95 px背景技术# aaa边界半径： 50%;}/style/head body div id=' clock ' ul/ul div id=' hour '/div div id=' min '/div div id=' sec '/div div id=' dot '/div/div脚本var oCss=document。getelementbyid(' CSS ')；var oClock=文档。getelementbyid(' clock ')；var OUl=oclock。getelementsbytagname(' ul ')[0]；var Ohour=文档。GetElementBYid('小时')；var Omin=文档。getelementbyid(' min ')；var oSec=文档。getelementbyid(' sec ')；var STrli=var STrcss=for(var I=0；i60I){ STrli=' Li/Li '；} oul . innerhtml=strLifor(var I=0；i60I){ StRCSs=' # clock ul Li : of-type(' I(1)'){ transform : rotate(' I * 6 ' deg)；}';} ocss . innerhtml=strcstime()；setInterval(时间，1000);函数time(){ var Date=new Date()；var h=日期。gethours()；var m=日期。getminutes()；var s=日期。getseconds()；哦。风格。变换='旋转'(h m/60)* 30 ' ;奥明。风格。变换='旋转'(m s/60)* 6 '度；osec。风格。transform=' rotate '(s * 6 ' deg ')；}/脚本/正文/html使用标签画图最主要的是定位，因为这样我们就可以把弄到形状的盒子放到你所想要的位置，内部钢性铸铁样式表是可以使用获取元素的方式获取的，这样就可以使用innerHTML为其添加样式，且可以循环添加，还有因为刻度太多所以使用循环添加，这样省时省力，至于剩下的就是定时器了，给定好一秒的时间，每一秒执行一次函数，这样它就是动起来了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。