ToB企服应用市场:ToB评测及商务社交产业平台

标题: JS+CSS案例：用CSS+JS做美丽的拟真时钟 [打印本页]
作者: 卖不甜枣    时间: 2024-8-7 08:00
标题: JS+CSS案例：用CSS+JS做美丽的拟真时钟
JS+CSS案例：用CSS+JS做美丽的拟真时钟

今天给各人分享一个挺酷的CSS+js模拟的时钟。
案例结果图：


案例分析

通过CSS画一个表的表面，通过JS获取当前时间，并控制表针做对应角度的旋转。
制作时钟表面

HTML结构

起首，我们要界说一个表盘，然后再表盘里部署刻度，还有3、6、9、12四个大数字，当然，还有3个指针（时针、分针、秒针’）。表盘上就这些东西，我们写HTML结构如下：
  1. <div id="clock">
  2.     <!-- 表盘 -->
  3.     <div class="frame-face">
  4.         <!-- 指针 -->
  5.         <div class="hours-hand"></div>
  6.         <div class="minutes-hand"></div>
  7.         <div class="seconds-hand"></div>
  8.         <!-- 数字 -->
  9.         <ul id="digits">
  10.           <li>3</li>
  11.           <li>6</li>
  12.           <li>9</li>
  13.           <li>12</li>
  14.         </ul>        
  15.         <!-- 刻度 -->
  16.         <ul id="minute-marks"></ul>
  17.     </div>
  18. </div>
复制代码
CSS样式表

接下来，我们就来使用CSS来完成表面的设计：
  1. /* style 用CSS做时钟 */
  3. *{ margin: 0; padding: 0;}
  5. #clock{
  6.   margin-top: 10%;
  7. }
  9. #clock .frame-face {
  10.   position: relative;
  11.   width: 30em;
  12.   height: 30em;
  13.   margin: 2em auto;
  14.   border-radius: 50%;
  15.   background: -webkit-linear-gradient(top, #fafafa, #ccc);
  16.   background: -moz-linear-gradient(top, #fafafa, #ccc);
  17.   background: linear-gradient(top, #fafafa, #ccc);
  18.   box-shadow: 0.5em 0.5em 2em rgba(0, 0, 0, 0.5);  
  19. }
  21. #minute-marks li {
  22.   display: block;
  23.   width: 0.2em;
  24.   height: 0.6em;
  25.   background: #929394;
  26.   position: absolute;
  27.   top: 50%;
  28.   left: 50%;
  29.   margin: -0.4em 0 0 -0.1em;
  30. }
  31. #digits {
  32.     width: 30em;
  33.     height: 30em;
  34.     border-radius: 15em;   
  35. }
  36. #digits li {
  37.   font-size: 3.4em;
  38.   display: block;
  39.   width: 2.4em;
  40.   height: 2.4em;
  41.   position: absolute;
  42.   top: 50%;
  43.   left: 50%;
  44.   line-height: 2.4em;
  45.   text-align: center;
  46.   margin: -1.2em 0 0 -1.2em;
  47.   font-weight: bold;
  48. }
  50. /* 四个数字的位置控制 */
  51. #digits li:nth-child(1) {
  52.   transform: translate(3em, 0)
  53. }
  54. #digits li:nth-child(2) {
  55.   transform: translate(0, 3em)
  56. }
  57. #digits li:nth-child(3) {
  58.   transform: translate(-3em, 0)
  59. }
  60. #digits li:nth-child(4) {
  61.   transform: translate(0, -3em)
  62. }
  65. #digits:before {
  66.   content:'';
  67.   width:1.6em;
  68.   height:1.6em;
  69.   border-radius:.8em;
  70.   position:absolute;
  71.   top:50%; left:50%;
  72.   margin:-.8em 0 0 -.8em;
  73.   background:#121314;
  74. }
  75. #digits:after {
  76.   content:'';
  77.   width:4em;
  78.   height:4em;
  79.   border-radius:2.2em;
  80.   position:absolute;
  81.   top:50%; left:50%;
  82.   margin:-2.1em 0 0 -2.1em;
  83.   border:.1em solid #c6c6c6;
  84.   background:-webkit-radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
  85.   background:-moz-radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
  86.   background:radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
  87. }
  89. /* 时针 */
  90. #clock .hours-hand {
  91.     width:.8em;
  92.     height:8em;
  93.     border-radius:.5em;
  94.     background:#232425;
  95.     position:absolute;
  96.     bottom:50%;
  97.     left:50%;
  98.     margin:0 0 -.8em -.4em;
  99.     box-shadow:#232425 0 0 2px;
  100.     transform-origin:0.4em 7.2em;
  101.     transform:rotate(-25deg);
  102. }
  103. /* 分针 */
  104. #clock .minutes-hand {
  105.     width:.6em;
  106.     height:10.5em;
  107.     border-radius:.5em;
  108.     background:#343536;
  109.     position:absolute;
  110.     bottom:50%;
  111.     left:50%;
  112.     margin:0 0 -0.5em -.4em;
  113.     box-shadow:#343536 0 0 2px;
  114.     transform-origin:0.4em 10em;
  115. }
  117. /* 秒针 */
  118. #clock .seconds-hand {
  119.   width:.2em;
  120.   height:14em;
  121.   border-radius:.1em .1em 0 0/10em 10em 0 0;
  122.   background:#c00;
  123.   position:absolute;
  124.   bottom:50%; left:50%;
  125.   margin:0 0 -2em -.1em;
  126.   box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  127.   transform-origin:0.1em 12em;
  128. }
  129. #clock .seconds-hand:after {
  130.   content:'';
  131.   width:1.4em;
  132.   height:1.4em;
  133.   border-radius:.7em;
  134.   background:inherit;
  135.   position:absolute;
  136.   left:-.65em; bottom:1.35em;
  137. }
复制代码
现在我们来看看这个简约的时钟：

生成刻度：

css做刻度太麻烦了。。。
  1. window.onload = function () {
  2.   // 生成刻度
  3.   let markWrap = document.getElementById('minute-marks')
  5.   for (let index = 0; index < 60; index++) {
  6.     let markItem = document.createElement('li')
  7.     markItem.style.cssText = "transform:rotate(" + index * 6 + "deg) translateY(-12.7em)";
  8.     if (index % 5 == 0) {
  9.       markItem.style.width = "0.3em";
  10.       markItem.style.height = "1em";
  11.     }
  12.     markWrap.appendChild(markItem)
  13.   }
  14. }
复制代码
控制时钟的JS代码

表盘完成，接下来写个js控制表针的旋转。 把JS写在页面最下面：
  1. setInterval(function () {
  2.     // 获得系统当前时间
  3.     var time = new Date();
  4.     var hour = time.getHours()
  5.     var minute = time.getMinutes();
  6.     var second = time.getSeconds();
  7.     var hournum;
  8.    
  9.     // 控制表针转动
  10.     if (hour > 12) {
  11.       hournum = ((hour - 12) + minute / 60) * 30;
  12.     } else {
  13.       hournum = (hour + minute / 60 * 100) * 30;
  14.     }
  15.     var minnum = (minute + second / 60) * 6 + second / 60;
  16.     var sennum = second * 6;
  17.     document.getElementsByClassName("hours-hand")[0].style.transform = "rotate(" + hournum + "deg)"
  18.     document.getElementsByClassName("minutes-hand")[0].style.transform = "rotate(" + minnum + "deg)"
  19.     document.getElementsByClassName("seconds-hand")[0].style.transform = "rotate(" + sennum + "deg)"
  21.         // 输出数字样式时间到电子表
  22.     if(hour<10){
  23.         hour="0"+parseInt(hour);
  24.     }
  25.     if(minute<10){
  26.         minute="0"+parseInt(minute);
  27.     }
  28.     if(second<10){
  29.         second="0"+parseInt(second);
  30.     }
  31.   }, 1000);
复制代码
郑重说明：这个代码不是我原创的。当时以为很酷，就复制下来放存到了我的有道里，时间久远，转载的泉源找不到了。本例对样式和结构做了少许调整，分享给各人，供各人学习和借鉴。非常感谢原作者！


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4