js 时钟 旋转 + 定时器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> #xxxx > div{ display: inline-block; width: 50px; height: 50px; } #cup{ width: 300px; height: 300px; position: relative; border: 1px solid black; } #cup #hzhizhen{ position: absolute; left:49%; top: 49%; width: 25%; transform-origin:0px 0px; transform:rotateZ(0deg); height: 1%; background: black; } #cup #tzhizhen{ position: absolute; left:49%; top: 49%; width: 35%; height: 1%; transform-origin:0px 0px; transform:rotateZ(0deg); background: black; } #cup #szhizhen{ position: absolute; left:49%; top: 49%; transform-origin:0px 0px; transform:rotateZ(0deg); width: 49%; height: 1%; background: black; } .h12,.h3,.h6,.h9{ position: absolute; } .h12{ top: 0%; left: 49%; } .h3{ top: 49%; right: 0%; } .h6{ left: 49%; bottom: 0%; } .h9{ top: 49%; left: 0%; } </style> <body> <div id="xxxx"> <div id="h"></div>: <div id="t"></div>: <div id="s"></div> </div> <div id="cup"> <div id="hzhizhen"></div> <div id="tzhizhen"></div> <div id="szhizhen"></div> <div class="h12">12</div> <div class="h3">3</div> <div class="h6">6</div> <div class="h9">9</div> </div> <script> var api = new API({ h:"h", t:"t", s:"s", zhizhen:{ hzhizhen:"hzhizhen", tzhizhen:"tzhizhen", szhizhen:"szhizhen", } }) function API(obj){ this.obj=obj; var h=document.getElementById(obj.h); var t=document.getElementById(obj.t); var s=document.getElementById(obj.s); var hzhizhen=document.getElementById(obj.zhizhen.hzhizhen); var tzhizhen=document.getElementById(obj.zhizhen.tzhizhen); var szhizhen=document.getElementById(obj.zhizhen.szhizhen); time=function(){ var timer=setInterval(function(){ var myDate=new Date(); //360/12=30 h.innerHTML=myDate.getHours(); hzhizhen.style.transform="rotateZ("+(30*myDate.getHours()-90)+"deg)"; //360/60=6 t.innerHTML=myDate.getMinutes(); tzhizhen.style.transform="rotateZ("+(6*myDate.getMinutes()-90)+"deg)"; //360/60=6 s.innerHTML=myDate.getSeconds(); szhizhen.style.transform="rotateZ("+(6*myDate.getSeconds()-90)+"deg)"; console.log(h.style.transform); },1000); }(); }; </script> </body> </html>
评论 (6 )
最新评论
okok 看到了 我现在改了一下 没有加很多css样式 只是最初的形态,然后稍稍封装了一下 发现写错字了 再重新谢了一遍
okok 看到了 我现在改了一下css样式 没有调 只是最初的形态,然后稍稍封装了一下
不能直接写,编辑器上有个插入代码
不知道怎么弄 上传以后 就是 看不到 效果 第一次 笔记 我也不太懂, 但是 本地是ok 的 代码没问题 已测
不知道怎么弄 上传以后 就是 看不到 效果 第一次 笔记 我也不太懂, 但是 本地是ok 的 代码没问题 已测
看不到效果