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

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

案例效果图：

案例分析

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

制作时钟外观

HTML结构

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

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来完成表面的设计：

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做刻度太麻烦了。。。

javascript 复制代码

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写在页面最下面：

javascript 复制代码

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);

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