爱站程序员基地每日CSS_实时时钟效果
2020_12_22
源码链接
附: 时钟照片地址如下 (http://cdn.xiaxiang.tech/E:/frondend/travel/css/每日CSS/2020__12/clock2.png)
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.querySelad8ector(\'#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;}
