• 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> 
  • 相关阅读:
    C++ 引用做左值
    C++ 引用本质的详解
    C++ 引用基础
    C语言错误 指针的类型错误
    C++ c++与C语言的区别（三目运算符，const修饰符）
    C++ c++与C语言的区别（struct类型的加强，函数-变量类型加强，bool类型）
    C++ c++与C语言的区别（实用性增强，register关键字增强，全局变量检测增强）
    C++ c++初识
    C语言 Linux内核链表（企业级链表）
    C语言 结构体中属性的偏移量计算
  • 原文地址：https://www.cnblogs.com/linyufeng/p/9600391.html
Copyright © 2020-2023  润新知