每日CSS_实时时钟效果

2020_12_22

源码链接

1. 代码解析

1.1 html 代码片段

<div class="clock">
  <div class="hour">
    <div class="hr" id="hr"></div>
  </div>
  <div class="min">
    <div class="mn" id="mn"></div>
  </div>
  <div class="sec">
    <div class="sc" id="sc"></div>
  </div>
</div>

如类名所示, clock 容纳整个时钟, 其子类 hour, min, sec 为各个指针的容纳块, 而 hr, mn, sc 代表了各个指针.

1.2 script 代码片段

<script>
  const deg = 6;
  const hr = document.querySelector('#hr');
  const mn = document.querySelector('#mn');
  const sc = document.querySelector('#sc');

  setInterval(()=>{
    let day = new Date();
    // 一个小时转 30 度
    let hh = day.getHours() * 30;
    let mm = day.getMinutes() * deg;
    let ss = day.getSeconds() * deg;
    hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
    mn.style.transform = `rotateZ(${mm}deg)`;
    // ``是模板运算符, 可以自动执行  
    sc.style.transform = `rotateZ(${ss}deg)`;
  })
</script>

需要注意的代码有两个, hr.style.transform =rotateZ(${(hh)+(mm/12)}deg); 60分钟时钟转30度, 所以, 分钟和时钟转的度数有个两倍关系, 此时的 mm 是分钟 * 6, 因此, 时钟转的度数是, mm / (2*6).

const deg = 6; 时钟有 60 个小格, 360度, 因此每格 6 度.

1.3 css 代码片段

基础设置

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #98889c;
}

时钟背景设置

.clock{
  width: 350px;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("clock2.png");
  background-size: cover;
  border: 4px solid #0f1621;
  border-radius: 50%;
  box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
              inset 0 -15px 15px rgba(255, 255, 255, 0.05),
              0 15px 15px rgba(0, 0, 0, 0.3),
              inset 0 15px 15px rgba(0, 0, 0, 0.3);
}

中心小圆点设置

.clock:before{
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background: #fff;
  border-radius: 50%;
  z-index: 10;
}

时钟, 分钟, 秒钟 区域设置

.clock .hour,
.clock .min,
.clock .sec{
  position: absolute;
}
.clock .hour, .hr{
  width: 160px;
  height: 160px;
}
.clock .min, .mn{
  width: 190px;
  height: 190px;
}
.clock .sec, .sc{
  width: 230px;
  height: 230px;
}
.hr, .mn, .sc{
  display: flex;
  justify-content: center;
  border-radius: 50%;
}

时钟, 分钟, 秒钟的指针创建

.hr:before{
  content: "";
  position: absolute;
  width: 8px;
  height: 80px;
  background: #ff105e;
  z-index: 1;
  border-radius: 6px 6px 0 0;
}
.mn:before{
  content: "";
  position: absolute;
  width: 4px;
  height: 90px;
  background: #fff;
  z-index: 2;
  border-radius: 6px 6px 0 0;
}
.sc:before{
  content: "";
  position: absolute;
  width: 2px;
  height: 150px;
  background: #fff;
  z-index: 3;
  border-radius: 6px 6px 0 0;
}

2. 源码

2.1 html 源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="2020_12_21.css">
</head>
<body>
<div class="clock">
  <div class="hour">
    <div class="hr" id="hr"></div>
  </div>
  <div class="min">
    <div class="mn" id="mn"></div>
  </div>
  <div class="sec">
    <div class="sc" id="sc"></div>
  </div>
</div>
<script>
  const deg = 6;
  const hr = document.querySelector('#hr');
  const mn = document.querySelector('#mn');
  const sc = document.querySelector('#sc');

  setInterval(()=>{
    let day = new Date();
    // 一个小时转 30 度
    let hh = day.getHours() * 30;
    let mm = day.getMinutes() * deg;
    let ss = day.getSeconds() * deg;

    // console.log(hh);

    hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
    mn.style.transform = `rotateZ(${mm}deg)`;
    sc.style.transform = `rotateZ(${ss}deg)`;
  })

</script>
</body>
</html>

2.2 css 源码

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #98889c;
}
.clock{
  width: 350px;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("clock2.png");
  background-size: cover;
  border: 4px solid #0f1621;
  border-radius: 50%;
  box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
              inset 0 -15px 15px rgba(255, 255, 255, 0.05),
              0 15px 15px rgba(0, 0, 0, 0.3),
              inset 0 15px 15px rgba(0, 0, 0, 0.3);
}
.clock:before{
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background: #fff;
  border-radius: 50%;
  z-index: 10;
}
.clock .hour,
.clock .min,
.clock .sec{
  position: absolute;
}
.clock .hour, .hr{
  width: 160px;
  height: 160px;
}
.clock .min, .mn{
  width: 190px;
  height: 190px;
}
.clock .sec, .sc{
  width: 230px;
  height: 230px;
}
.hr, .mn, .sc{
  display: flex;
  justify-content: center;
  border-radius: 50%;
}
.hr:before{
  content: "";
  position: absolute;
  width: 8px;
  height: 80px;
  background: #ff105e;
  z-index: 1;
  border-radius: 6px 6px 0 0;
}
.mn:before{
  content: "";
  position: absolute;
  width: 4px;
  height: 90px;
  background: #fff;
  z-index: 2;
  border-radius: 6px 6px 0 0;
}
.sc:before{
  content: "";
  position: absolute;
  width: 2px;
  height: 150px;
  background: #fff;
  z-index: 3;
  border-radius: 6px 6px 0 0;
}

版权声明：本文为xiaxiangx原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/xiaxiangx/p/14171758.html