js原生制作时钟

最新推荐文章于 2022-07-10 17:30:36 发布

weixin_41912152

最新推荐文章于 2022-07-10 17:30:36 发布

阅读量367

点赞数

文章标签： js 时钟原生代码没有开局一秒的bug

本文链接：https://blog.csdn.net/weixin_41912152/article/details/80896680

版权

 
  <!DOCTYPE html> 
 
 
  <html lang= 
  "en" 
  > 
 

 
  <head> 
 
 
  <meta charset= 
  "UTF-8" 
  > 
 
 
  <title>时钟 
  </title> 
 
 
  <style> 
 
 
  * { 
 
 
  margin: 
  0; 
 
 
  padding: 
  0; 
 

   } 
 
 
  .wrapper { 
 
 
  width: 
  200px; 
 
 
  height: 
  200px; 
 
 
  position: 
  relative; 
 
 
  border: 
  4px 
  solid 
  blueviolet; 
 
 
  border-radius: 
  50%; 
 

   } 
 
 
  .h { 
 
 
  width: 
  10px; 
 
 
  height: 
  80px; 
 
 
  position: 
  absolute; 
 
 
  background: 
  black; 
 
 
  left: 
  95px; 
 
 
  top: 
  40px; 
 
 
  /* c3新属性,旋转中心 x y */ 
 
 
  transform-origin: 
  50% 
  60px; 
 
 
  /* x,y以当前div的左上起点为0点 */ 
 

   } 
 
 
  .m { 
 
 
  width: 
  8px; 
 
 
  height: 
  100px; 
 
 
  position: 
  absolute; 
 
 
  background: 
  yellowgreen; 
 
 
  left: 
  96px; 
 
 
  top: 
  20px; 
 
 
  transform-origin: 
  50% 
  80px; 
 

   } 
 
 
  .s { 
 
 
  width: 
  4px; 
 
 
  height: 
  100px; 
 
 
  position: 
  absolute; 
 
 
  background: 
  red; 
 
 
  left: 
  98px; 
 
 
  top: 
  20px; 
 
 
  transform-origin: 
  50% 
  80px; 
 

   } 
 
 
  div[ 
  class 
  ^= 
  "a"] { 
 
 
  position: 
  absolute; 
 
 
  width: 
  20px; 
 
 
  height: 
  20px; 
 
 
  text-align: 
  center; 
 
 
  top: 
  0; 
 
 
  left: 
  90px; 
 
 
  transform-origin: 
  50% 
  100px; 
 

   } 
 
 
  .a1 { 
  transform: 
  rotate( 
  30deg);} 
 
 
  .a2 { 
  transform: 
  rotate( 
  60deg);} 
 
 
  .a3 { 
  transform: 
  rotate( 
  90deg);} 
 
 
  .a4 { 
  transform: 
  rotate( 
  120deg);} 
 
 
  .a5 { 
  transform: 
  rotate( 
  150deg);} 
 
 
  .a6 { 
  transform: 
  rotate( 
  180deg); } 
 
 
  .a7 { 
  transform: 
  rotate( 
  210deg);} 
 
 
  .a8 { 
  transform: 
  rotate( 
  240deg);} 
 
 
  .a9 { 
  transform: 
  rotate( 
  270deg);} 
 
 
  .a10 { 
  transform: 
  rotate( 
  300deg);} 
 
 
  .a11 { 
  transform: 
  rotate( 
  330deg); } 
 
 
  .a12 { 
  transform: 
  rotate( 
  360deg);} 
 
 
  < 
  /style> 
 
 
  </head> 
 

 
  <body> 
 
 
  <div class= 
  "wrapper" 
  > 
 
 
  <div class= 
  "h" 
  ></div> 
 
 
  <div class= 
  "m" 
  ></div> 
 
 
  <div class= 
  "s" 
  ></div> 
 
 
  <div class= 
  "a1" 
  >1 
  </div> 
 
 
  <div class= 
  "a2" 
  >2 
  </div> 
 
 
  <div class= 
  "a3" 
  >3 
  </div> 
 
 
  <div class= 
  "a4" 
  >4 
  </div> 
 
 
  <div class= 
  "a5" 
  >5 
  </div> 
 
 
  <div class= 
  "a6" 
  >6 
  </div> 
 
 
  <div class= 
  "a7" 
  >7 
  </div> 
 
 
  <div class= 
  "a8" 
  >8 
  </div> 
 
 
  <div class= 
  "a9" 
  >9 
  </div> 
 
 
  <div class= 
  "a10" 
  >10 
  </div> 
 
 
  <div class= 
  "a11" 
  >11 
  </div> 
 
 
  <div class= 
  "a12" 
  >12 
  </div> 
 
 
  </div> 
 
 
  <script> 
 
 
  var 
  h 
  = 
  document.querySelector( 
  '.h'); 
 
 
  var 
  m 
  = 
  document.querySelector( 
  '.m'); 
 
 
  var 
  s 
  = 
  document.querySelector( 
  '.s'); 
 
 
  function 
  task() { 
 
 
  // 获取到当前的时间 
 
 
  var 
  now 
  = 
  new 
  Date(); 
 
 
  var 
  ss 
  = 
  now 
  .getSeconds(); 
 
 
  var 
  sss 
  = 
  ss 
  * 
  6; 
 
 
  var 
  ms 
  = 
  now 
  .getMinutes(); 
 
 
  var 
  mss 
  = ( 
  ms 
  * 
  60 
  + 
  ss) 
  / 
  3600 
  * 
  360; 
 
 
  var 
  hs 
  = 
  now 
  .getHours(); 
 
 
  var 
  hss 
  = (( 
  hs 
  * 
  60 
  + 
  ms) 
  * 
  60 
  + 
  ss) 
  /( 
  3600 
  * 
  12) 
  * 
  360; 
 
 
  s.style. 
  transform 
  = 
  `rotate(${ 
  sss 
  }deg)`; 
 
 
  m.style. 
  transform 
  = 
  `rotate(${ 
  mss 
  }deg)`; 
 
 
  h.style. 
  transform 
  = 
  `rotate(${ 
  hss 
  }deg)`; 
 

   } 
 
 
  // 起步先调用一次,能够过滤打开页面的一秒停顿,更流畅 
 
 
  task(); 
 
 
  setInterval( 
  task, 
  1000); 
 
 
  < 
  /script> 
 
 
  </body> 
 
 
  </html> 
 

weixin_41912152

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js原生制作时钟

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;时钟&lt;/title&gt; &lt;style&gt; * { margin: 0;
复制链接

扫一扫