JS+CSS案例：用CSS+JS做漂亮的拟真时钟

JS+CSS案例：用CSS+JS做漂亮的拟真时钟

今天给大家分享一个挺酷的CSS+js模拟的时钟。

案例效果图：

案例分析

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

制作时钟外观

HTML结构

首先，我们要定义一个表盘，然后再表盘里布置刻度，还有3、6、9、12四个大数字，当然，还有3个指针（时针、分针、秒针’）。表盘上就这些东西，我们写HTML结构如下：

<div id="clock">      <!-- 表盘 -->     <div class="frame-face">         <!-- 指针 -->         <div class="hours-hand"></div>         <div class="minutes-hand"></div>         <div class="seconds-hand"></div>         <!-- 数字 -->         <ul id="digits">           <li>3</li>           <li>6</li>           <li>9</li>           <li>12</li>         </ul>                 <!-- 刻度 -->         <ul id="minute-marks"></ul>     </div> </div>

CSS样式表

接下来，我们就来使用CSS来完成表面的设计：

/* style 用CSS做时钟 */  *{ margin: 0; padding: 0;}  #clock{   margin-top: 10%; }  #clock .frame-face {   position: relative;   width: 30em;   height: 30em;   margin: 2em auto;   border-radius: 50%;   background: -webkit-linear-gradient(top, #fafafa, #ccc);   background: -moz-linear-gradient(top, #fafafa, #ccc);   background: linear-gradient(top, #fafafa, #ccc);   box-shadow: 0.5em 0.5em 2em rgba(0, 0, 0, 0.5);   }  #minute-marks li {   display: block;   width: 0.2em;   height: 0.6em;   background: #929394;   position: absolute;   top: 50%;   left: 50%;   margin: -0.4em 0 0 -0.1em; } #digits {     width: 30em;     height: 30em;     border-radius: 15em;    } #digits li {   font-size: 3.4em;   display: block;   width: 2.4em;   height: 2.4em;   position: absolute;   top: 50%;   left: 50%;   line-height: 2.4em;   text-align: center;   margin: -1.2em 0 0 -1.2em;   font-weight: bold; }  /* 四个数字的位置控制 */  #digits li:nth-child(1) {   transform: translate(3em, 0) } #digits li:nth-child(2) {   transform: translate(0, 3em) } #digits li:nth-child(3) {   transform: translate(-3em, 0) } #digits li:nth-child(4) {   transform: translate(0, -3em) }   #digits:before {   content:'';   width:1.6em;   height:1.6em;   border-radius:.8em;   position:absolute;   top:50%; left:50%;   margin:-.8em 0 0 -.8em;   background:#121314; } #digits:after {   content:'';   width:4em;   height:4em;   border-radius:2.2em;   position:absolute;   top:50%; left:50%;   margin:-2.1em 0 0 -2.1em;   border:.1em solid #c6c6c6;   background:-webkit-radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);   background:-moz-radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);   background:radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%); }  /* 时针 */ #clock .hours-hand {     width:.8em;     height:8em;     border-radius:.5em;     background:#232425;     position:absolute;     bottom:50%;      left:50%;     margin:0 0 -.8em -.4em;     box-shadow:#232425 0 0 2px;     transform-origin:0.4em 7.2em;     transform:rotate(-25deg); } /* 分针 */ #clock .minutes-hand {     width:.6em;     height:10.5em;     border-radius:.5em;     background:#343536;     position:absolute;     bottom:50%;      left:50%;     margin:0 0 -0.5em -.4em;     box-shadow:#343536 0 0 2px;     transform-origin:0.4em 10em; }  /* 秒针 */ #clock .seconds-hand {   width:.2em;   height:14em;   border-radius:.1em .1em 0 0/10em 10em 0 0;   background:#c00;   position:absolute;   bottom:50%; left:50%;   margin:0 0 -2em -.1em;   box-shadow:rgba(0,0,0,.8) 0 0 .2em;   transform-origin:0.1em 12em;  } #clock .seconds-hand:after {   content:'';   width:1.4em;   height:1.4em;   border-radius:.7em;   background:inherit;   position:absolute;   left:-.65em; bottom:1.35em; }

现在我们来看看这个简约的时钟：

生成刻度：

css做刻度太麻烦了。。。

window.onload = function () {   // 生成刻度   let markWrap = document.getElementById('minute-marks')    for (let index = 0; index < 60; index++) {     let markItem = document.createElement('li')     markItem.style.cssText = "transform:rotate(" + index * 6 + "deg) translateY(-12.7em)";     if (index % 5 == 0) {       markItem.style.width = "0.3em";       markItem.style.height = "1em";     }     markWrap.appendChild(markItem)   } }

控制时钟的JS代码

表盘完成，接下来写个js控制表针的旋转。 把JS写在页面最下面：

setInterval(function () {     // 获得系统当前时间     var time = new Date();      var hour = time.getHours()     var minute = time.getMinutes();     var second = time.getSeconds();     var hournum;          // 控制表针转动     if (hour > 12) {       hournum = ((hour - 12) + minute / 60) * 30;     } else {       hournum = (hour + minute / 60 * 100) * 30;     }     var minnum = (minute + second / 60) * 6 + second / 60;     var sennum = second * 6;     document.getElementsByClassName("hours-hand")[0].style.transform = "rotate(" + hournum + "deg)"     document.getElementsByClassName("minutes-hand")[0].style.transform = "rotate(" + minnum + "deg)"     document.getElementsByClassName("seconds-hand")[0].style.transform = "rotate(" + sennum + "deg)"          // 输出数字样式时间到电子表     if(hour<10){         hour="0"+parseInt(hour);     }     if(minute<10){         minute="0"+parseInt(minute);     }     if(second<10){         second="0"+parseInt(second);     }   }, 1000);

郑重说明：这个代码不是我原创的。当时觉得很酷，就复制下来放存到了我的有道里，时间久远，转载的来源找不到了。本例对样式和结构做了少许调整，分享给大家，供大家学习和借鉴。非常感谢原作者！