🔥🔥🔥使用CSS&JS纯代码绘制一个优雅动态钟表

前言

网页设计中，动态效果不仅可以增强用户体验，还能为网页增添趣味性。使用 CSS 和 JavaScript, 我将简单介绍一下如何使用这css和JS技术来绘制一个时钟，并使其指针能够随时间移动！

注意：用闲暇时间抽空写简单demo所以代码命名很随意也不是很规范,请见谅！ 😁

说明：本demo代码的编辑部分本身是没有难度的，主要是难点在于样式的配色和布局等控制！

走过,路过,请各位看官，辛苦 **点赞 点赞 点赞**🙏🙏🙏

在线预览Demo

HTML代码

  <!-- 钟表 start -->
  <div class="clock">
      <!-- 中心点 start -->
      <div class="origin"></div>
      <!-- 中心点 end -->
      <!-- 刻度 start -->
      <ul class="clock-line"></ul>
      <!-- 刻度 end -->
      <!-- 指针 start -->
      <div class="inner-clock-face">
          <i class="hour-bar"></i>
          <i class="min-bar"></i>
          <i class="second-bar"></i>
      </div>
      <!-- 指针 end -->
      <p class="label-info">Easy.Y</p>
  </div> 
  <!-- 钟表 end -->

css代码部分

*{
  box-sizing: border-box;
}
.clock {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 7px solid #505050;
  background-color: #e7e7e7;   
  background: radial-gradient(circle at 35% 35%, #fff, rgba(212, 212, 212, 0.7), rgba(255, 255, 255, 1)); 
  box-shadow: inset 0px 0px 12px rgba(0, 0, 0, 0.3),0px 8px 12px rgba(0, 0, 0, 0.3);
  .label-info{ 
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 40px;
    font-size: 12px;
    color: #0e0e0e;
    text-shadow: 0px 1px 1px #ffffff;
  }
  // 表刻度
  .clock-line{
    position: relative;
    width: 100%;
    height: 100%; 
    padding:0px;
    margin: 0px;
    
      li {
          z-index: 1;
          display: block;
          width: 1px;
          height: 6px;
          background: #bdbdbd;
          position: absolute;
          top: 50%;
          left: 50%;
          margin: -3px 0 0 -1px;
      } 
  }
  // 表圆心
  .origin{
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #e94319; 
    left: 50%;
    top:50%;
    margin-left: -5px;
    margin-top: -5px;
    z-index: 10;
    box-shadow: 0px 3px 5px #e94319;
  }  
  // 表指针
  .inner-clock-face {
    width: 92%;
    height: 92%;
    border-radius: 50%; 
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    border:1px dashed rgb(202, 202, 202);
    background-size: 110%;
      i {
        display: block;
        width: 50%;
        background: rgb(7, 7, 7);
        border-radius: 6px;
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translateY(-50%) rotateZ(90deg);
        transform-origin: 100% center; 
      }   
      // 时针
      .hour-bar {
        width: 28%;
        height: 5px;
        box-shadow: 0px 1px 8px rgba(151, 151, 151, 0.5);
        z-index: 7;
        margin-top:-1px;
      }
      // 分针
      .min-bar {
        width: 38%;
        height: 2px;
        box-shadow: 0px 1px 8px rgba(151, 151, 151, 0.5);
        z-index: 8;
      }
      // 秒针
      .second-bar {
        width: 42%;
        height: 1px;
        background: #e94319;
        box-shadow: 0px 1px 8px rgba(233, 67, 25, 0.5);
        z-index: 9;
      }
  }
}

JavaScript 动态效果

// 获取秒针
var secondHand = document.querySelector('.second-bar')
// 获取时针
var hourHand = document.querySelector('.hour-bar')
//获取分针
var minHand = document.querySelector('.min-bar')
// 刻度线
var clockLine = document.querySelector('.clock-line')
function setTime() {
    var now = new Date();
    // 读取秒
    var seconds = now.getSeconds();
    var secondsDegress = (seconds / 60) * 360 + 90
    secondHand.style.transform = `rotate(${secondsDegress}deg)`
    // 读取分
    var mins = now.getMinutes();
    var minsDegress = mins * 6 + 90
    minHand.style.transform = `rotate(${minsDegress}deg)`
    //读取时
    var hours = now.getHours();
    console.log(hours);
    var hoursDegress = hours * 30 + 90 + (mins / 60) * 30
    hourHand.style.transform = `rotate(${hoursDegress}deg)`
}
// 设置秒针旋转的角度
setTime()
// 定时器
setInterval(setTime, 1000)
// 创建表盘刻度
function createHourLines() {
    for (let index = 0; index < 60; index++) {
        let markItem = document.createElement('li')
        markItem.style.cssText = `transform:rotate(${index * 6}deg) translateY(-110px)`
        if (index % 5 == 0) {
            markItem.style.width = "2px";
            markItem.style.height = "8px";
            markItem.style.background = "#333";
        }
        clockLine.appendChild(markItem)
    } 
 }
createHourLines()