使用原生JS编写时钟
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用原生JS编写时钟相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>钟表</title> <style type="text/css"> /*钟表圆圈的样式*/ .circle { position: relative; margin: 150px auto; width: 200px; height: 200px; border: 2px solid black; border-radius: 100px; } /*时针*/ #hour { position: absolute; top: 97px; left: 97px; width: 6px; height: 60px; background-color: blue; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } /*分针*/ #min { position: absolute; top: 98px; left: 98px; width: 4px; height: 80px; background-color: forestgreen; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } /*秒针*/ #sec { position: absolute; top: 99px; left: 99px; width: 2px; height: 90px; background-color: chocolate; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } /*钟表中心圆点*/ #point { position: absolute; z-index: 1; top: 90px; left: 90px; width: 20px; height: 20px; background-color: black; border-radius: 10px; } /*钟表刻度*/ ul li { list-style: none; position: absolute; top: 100px; left: 99px; width: 2px; height: 97px; border-bottom: 4px solid black; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } /*钟表小时刻度，就是长一点的那个刻度*/ ul li.lang { height: 93px; border-bottom: 8px solid black; } </style> </head> <body> <div class="circle"> <div id="point"></div> <div id="hour"></div> <div id="min"></div> <div id="sec"></div> <ul> </ul> </div> </body> <script type="text/javascript"> // 分别获取时针，分针，秒针和刻度的父元素ul var hour=document.getElementById("hour"); var min=document.getElementById("min"); var sec=document.getElementById("sec"); var oul=document.getElementsByTagName("ul")[0]; // 动态创建60个li表示钟表刻度并添加到父元素ul内 var olis=""; for (var i=0;i<60;i++){ olis+="<li></li>"; } oul.innerHTML=olis; // 获取创建好的每一个li var oLis=document.getElementsByTagName("li"); for(var i=0;i<60;i++){ // 每隔五个就有一个小时刻度，让它获取lang这个样式 if(i%5==0){ oLis[i].className="lang"; } // 整圆360度，每一个刻度是6度，让第i个li旋转6i度 oLis[i].style.transform="rotateZ("+i*6+"deg)"; } var timer = null; function run(){ //每次执行前关闭并清除之前的定时器，节约性能 clearTimeout(timer); timer = null; var nowDate=new Date; //但是如果当前时间是12点半，时针不应该是直直的指向12点，应该是在12和1之间， //所以就需要把当前多出的分钟数/60换算成小时数加起来，下面在计算角度的时候也就可以对应上了。 //分针同样如此 var s=nowDate.getSeconds(); sec.style.transform="rotateZ("+(s*6+180)+"deg)"; sec.style.webkitTransform="rotateZ("+(s*6+180)+"deg)"; sec.style.oTransform="rotateZ("+(s*6+180)+"deg)"; sec.style.msTransform="rotateZ("+(s*6+180)+"deg)"; sec.style.mozTransform="rotateZ("+(s*6+180)+"deg)"; //得到每一秒的旋转角度（每一秒是走6度） var m=nowDate.getMinutes()+s/60; min.style.transform="rotateZ("+(m*6+180)+"deg)"; min.style.oTransform="rotateZ("+(m*6+180)+"deg)"; min.style.webkitTransform="rotateZ("+(m*6+180)+"deg)"; min.style.msTransform="rotateZ("+(m*6+180)+"deg)"; min.style.mozTransform="rotateZ("+(m*6+180)+"deg)"; //得到每一分钟走的角度 每一小时之间是30 / 一小时中间有5个格 =30/5=6度 //每小时走360/12=30度 var h=nowDate.getHours()+m/60; hour.style.transform="rotateZ("+(h*30+180)+"deg)"; hour.style.oTransform="rotateZ("+(h*30+180)+"deg)"; hour.style.msTransform="rotateZ("+(h*30+180)+"deg)"; hour.style.mozTransform="rotateZ("+(h*30+180)+"deg)"; hour.style.webkitTransform="rotateZ("+(h*30+180)+"deg)"; //开启定时器，每一秒自动走 var timer=window.setTimeout(run,1000); } //执行函数 run(); </script> </html>
以上是关于使用原生JS编写时钟的主要内容，如果未能解决你的问题，请参考以下文章