css模拟时钟

 

css模拟时钟
css模拟时钟

思路:

 

画时钟数字(x,y)坐标

x = x0 + r*cos(deg)
y = y0 + r*sin(deg)

知识点:

  1. 创建元素: createElement
  2. 添加元素: appendChild
  3. css3旋转: transform:rotate(30deg);
  4. css3改变旋转中心点: transform-origin:0 0;
  5. 获取当前时间, 把时间数字转换为度数
  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. <meta charset="UTF-8"> 
  5. <title>Title</title> 
  6. <style> 
  7. * { margin: 0; padding: 0; } 
  8. #bg { 
  9. width: 400px; 
  10. height: 400px; 
  11. background: #ddd; 
  12. border-radius: 10px; 
  13. /* div上下左右垂直居中 */ 
  14. position: absolute; 
  15. left: 50%; 
  16. top: 50%; 
  17. margin-top: -200px; 
  18. margin-left: -200px; 
  19. } 
  20.  
  21. #bg #clock { 
  22. width: 360px; 
  23. height: 360px; 
  24. background: #fff; 
  25. border-radius: 50%; 
  26. display: inline-block; 
  27. margin: 20px; 
  28. position: relative; 
  29. } 
  30.  
  31. #hour { 
  32. width: 70px; 
  33. height: 16px; 
  34. background: #000; 
  35. position: absolute; 
  36. left: 180px; 
  37. top: 172px; 
  38. border-radius: 16px; 
  39. transform-origin:0 8px; 
  40. } 
  41. #minute { 
  42. width: 120px; 
  43. height: 12px; 
  44. background: #000; 
  45. position: absolute; 
  46. left: 180px; 
  47. top: 174px; 
  48. border-radius: 12px; 
  49. transform-origin:0 6px; 
  50. } 
  51. #second { 
  52. width: 140px; 
  53. height: 6px; 
  54. background: #f00; 
  55. position: absolute; 
  56. left: 180px; 
  57. top: 177px; 
  58. border-radius: 6px; 
  59. transform-origin:0 1px; 
  60. /*transform:rotate(30deg);*/ 
  61. /*animation: clockRotate 3s linear infinite;*/ 
  62. } 
  63.  
  64. @keyframes clockRotate { 
  65. from {transform:rotate(0deg);} 
  66. to {transform:rotate(360deg);} 
  67. } 
  68.  
  69. #point{ 
  70. width: 30px; 
  71. height: 30px; 
  72. border-radius: 50%; 
  73. background: #000; 
  74. position: absolute; 
  75. left: 50%; 
  76. top: 50%; 
  77. margin: -15px 0 0 -15px; 
  78. } 
  79.  
  80. #clock .number{ 
  81. position: absolute; 
  82. font-size: 28px; 
  83. width: 50px; 
  84. height: 50px; 
  85. line-height: 50px; 
  86. text-align: center; 
  87. } 
  88. </style> 
  89. </head> 
  90. <body> 
  91. <div id="bg"> 
  92. <div id="clock"> 
  93. <div id="hour"></div> 
  94. <div id="minute"></div> 
  95. <div id="second"></div> 
  96. <div id="point"></div> 
  97. </div> 
  98. </div> 
  99.  
  100. <script> 
  101. var clock = document.getElementById('clock'); 
  102. var r = 150; 
  103. var angle = Math.PI * 2; // 2PI = 360° 
  104. for (var i = 1; i <=12; i++) { 
  105. var deg = angle/12 * i - Math.PI/2; 
  106. var x = r + r*Math.cos(deg); 
  107. var y = r + r*Math.sin(deg); 
  108. //console.log(x,y); 
  109. var num = document.createElement('div');//创建div 
  110. num.className = 'number';//设置class样式 
  111. num.innerText = i; 
  112. //设置坐标 
  113. num.style.top = y + 'px'; 
  114. num.style.left = x + 'px'; 
  115. //添加 
  116. clock.appendChild(num); 
  117. } 
  118.  
  119. //TODO 1. 数字转换度数 
  120. function run() { 
  121. var date = new Date(); 
  122. //时(0-23) 分(0-59)秒(0-59) 
  123. var hour = date.getHours(); 
  124. var minute = date.getMinutes(); 
  125. var second = date.getSeconds(); 
  126.  
  127. var hourDeg = 360/12 * hour - 90; 
  128. var minuteDeg = 360/60 * minute - 90; 
  129. var secondDeg = 360/60 * second - 90; 
  130.  
  131. var hourDiv = document.getElementById('hour'); 
  132. var minuteDiv = document.getElementById('minute'); 
  133. var secondDiv = document.getElementById('second'); 
  134.  
  135. hourDiv.style.transform = 'rotate('+hourDeg+'deg)'; 
  136. minuteDiv.style.transform = 'rotate('+minuteDeg+'deg)'; 
  137. secondDiv.style.transform = 'rotate('+secondDeg+'deg)'; 
  138. } 
  139.  
  140. //TODO 2. 设置定时器 
  141. run(); 
  142. setInterval(function () { 
  143. run(); 
  144. },1000); 
  145. </script> 
  146. </body> 
  147. </html> 
posted @ 2018-09-06 19:23  林宇风  阅读(376)  评论(0)  编辑  收藏  举报