JS CSS3实现的简易钟表效果示例

本文实例讲述了JS CSS3实现的简易钟表效果。分享给大家供大家参考，具体如下：

！DOCTYPE html html head meta charset=' UTF-8 ' titlewww.jb51.net js css3简易钟表/title style type=' text/CSS ' * { margin : 0；padd : 0；} #包装{宽度： 300像素重量： 300像素背景-color : aliceblue；余量： 200像素汽车；相对位置：盒子尺寸：边框盒子；} # wrap div { position : absolute；前：名50%；左侧： 50%;} #小时{宽度： 6px高度： 60px背景-颜色： # 000000；边距：-60px-3px；变换原点： 3px 60px} #最小{宽度： 4px高度： 80px背景-颜色： # 000000；边距：-80px-2px；变换原点： 2px 80px} # sec { width: 2px高度： 100像素；背景-颜色：红色；边距：-100px-1px；transform-origin : 1px 100px；} # point { width : 20px x8 : 20px背景-color : burlywood；边距：-10px-10px；边界半径： 50%;} #圆形{宽度： 300像素重量： 300像素相对位置：} #圈李{列表式：无；宽度： 2px高度： 6px背景-颜色： # 000000；绝对位置：变换原点： 1px 150 pxleft : 149 pxtop : 0px }/style/head body div id=' wrap ' div id=' hour '/div div id=' min '/div div id=' sec '/div div id=' point '/div ul id=' circle '/ul/div/body脚本类型=' text/JavaScript ' var hour DOM=document。getelementbyid(' hour ')；var minDom=文档。getelementbyid(' min ')；var secDom=文档。getelementbyid(' sec ')；var cricle=文档。getelementbyid(' circle ')；//创建表盘，ul宽高为包宽高，以包中心点为变换基点，动态分配6 的里为(var I=0；i60I){ var Li=document。创建元素(“李”)；克里尔。阑尾(李)；李。风格。变换='旋转'(' I * 6 '度')；} //延时函数，确保每一秒更新一次最新时间。并且计算时间准确值setInterval(函数(){ var Date=new Date()；var hour=date。gethours()；var min=日期。getminutes()；var sec=日期。getseconds()；最小值=秒/60;小时=分钟/60;//当前时间*每个单位时间走的角度=指针指向hourdom。风格。transform=' rotate '(小时* 30 '度')；明顿。风格。transform=' rotate '(' min * 6 ' deg ')；secdom。风格。transform=' rotate '(秒* 6 ' deg ')；},1000)/脚本/html运行效果：

感兴趣的朋友可使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试一下运行效果。

PS:这里再为大家推荐几款时间及日期相关工具供大家参考使用：

在线日期/天数计算器：http://工具。JB 51。net/jisuanqi/date _ jisuanqi

在线日期计算器/相差天数计算器：http://工具。JB 51。net/jis uan qi/日期计算

在线日期天数差计算器：http://工具。JB 51。net/jis uan qi/online datejsq

Unix操作系统操作系统时间戳（时间戳)转换工具：http://工具。JB 51。网络/代码/UNIX时间

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript时间与日期操作技巧总结》 、 《JavaScript查找算法技巧总结》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。