这是我自己根据现在时间做的简易的时钟,如果有哪里不好的多多指点.
首先是简简单单的页面布局:
<div id="tab"> <div id="Tradion"> <div id="hours" class="tran"></div> <div id="minutes" class="tran"></div> <div id="seconds" class="tran"></div> <div id="dian"></div> </div> </div>
然后是CSS样式:
<style type="text/css"> #Tradion{ width: 100px; height: 100px; border: 2px solid #fff; border-radius: 100px; float: left; margin: 50px 50px; } #hours{ width: 30px; height: 2px; margin:50px 50px; background: #fff; transform-origin: left bottom; } #minutes{ width: 38px; height: 2px; background: #fff; margin:-50px 50px; transform-origin: left bottom; } #seconds{ width: 45px; height: 1px; background: #fff; margin:50px 50px; transform-origin: left bottom; } .tran{ } #dian{ width:6px; height: 6px; border-radius: 6px; background: #fff; margin:-55px 46px; } </style>
这是页面显示的效果,你们也可以根据自己的喜号做个比我更好看的页面显示效果,我这个垃圾点了:
最后就是js样式了:
var d = new Date(); var num3 = d.getHours(); var num2 = d.getMinutes(); var num1 = d.getSeconds(); a = num1*6-90; b = num2*6-90; c = num3*30-90; seconds.style.transform = "rotate(" + a + "deg)"; minutes.style.transform = "rotate(" + b + "deg)"; hours.style.transform = "rotate(" + c + "deg)"; var timer = setInterval(function() { var d = new Date(); var num3 = d.getHours(); var num2 = d.getMinutes(); var num1 = d.getSeconds(); a = num1*6-90; b = num2*6-90; c = num3*30-90; seconds.style.transform = "rotate(" + a + "deg)"; minutes.style.transform = "rotate(" + b + "deg)"; hours.style.transform = "rotate(" + c+ "deg)"; }, 1000)
实现效果自己运行一下就可以看到了.
最后谢谢大家赏脸看我的菜鸡操作.