续自制壁纸-HTML添加时钟
壁纸怎么能没有时间显示呢？于是今天搞了个好看的时钟。这个时钟是一个动态时钟，然后有普通时钟和数字时钟组合而成，数字时钟采用的是12小时制。
整体分析
我们的HTML文件包含了具有类名“container”的div容器，它用于包含所有的时钟元素，如表盘和数字时钟。表盘由三个类名为“circle、 circle2和circle3”的div元素组成，分别代表秒针、分针和时针。它们的颜色采用了不同的自定义变量颜色值（--clr），使时针、分针和秒针能够轻松分辨。除了指针外，还有12个带有数字的标签，分别标识从1到12的小时。在数字时钟部分，我们定义了四个div元素，分别标识小时、分钟、秒钟和当天是AM还是PM。它们的数字将由我们的JavaScript代码更新。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自制时钟</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="clock">
<div id="sc" class="circle" style="--clr:#04fc43;"><i></i></div>
<div id="mn" class="circle circle2" style="--clr:#fee800;"><i></i></div>
<div id="hr" class="circle circle3" style="--clr:#ff2972;"><i></i></div>
<span style="--i:1">
<b>1</b>
</span>
<span style="--i:2">
<b>2</b>
</span>
<span style="--i:3">
<b>3</b>
</span>
<span style="--i:4">
<b>4</b>
</span>
<span style="--i:5">
<b>5</b>
</span>
<span style="--i:6">
<b>6</b>
</span>
<span style="--i:7">
<b>7</b>
</span>
<span style="--i:8">
<b>8</b>
</span>
<span style="--i:9">
<b>9</b>
</span>
<span style="--i:10">
<b>10</b>
</span>
<span style="--i:11">
<b>11</b>
</span>
<span style="--i:12">
<b>12</b>
</span>
</div>
<!-- digital clock -->
<div id="time">
<div id="hours" style="--clr:#ff2972;">00</div>
<div id="minutes" style="--clr:#fee800;">00</div>
<div id="seconds" style="--clr:#04fc43;">00</div>
<div id="ampm">AM</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
CSS特别分析
CSS 中的 box-sizing 属性可以让元素的边框和填充不再影响元素的宽高计算，这样更适合响应式设计。而像 border-radius、box-shadow、inset 等属性可以让我们实现各种立体、柔和的效果。其中 .clock 对象是整个 UI 的核心，它被设置为圆形，使得钟表更加逼真，而 span 和 b 标签则隐藏于圆形背后。.circle 和 .circle2、.circle3 对象是其他小圆圈，它们会随时间流动而随机出现和消失。最后的 digital clock 显示当前时间，通过 keyframes 实现不断闪烁的效果，整个效果非常炫酷。
特殊点 阴影的设置 由三个不同的阴影效果叠加而成：外阴影、内阴影1和内阴影2。 其中inset就是内阴影，它跟外阴影的使用类似。
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
inset 5px 5px 20px rgba(255, 255, 255, 0.2),
inset -5px -5px 15px rgba(0, 0, 0, 0.75)
js时钟的实现
特别点 时钟分为360deg 十二个时辰，于是每个时辰为30deg , 然后每个小时里有五个时间刻度，所以每个时间刻度是6deg。最后需要注意的是时针的指针不仅只是时针的偏转角还要加上分钟的偏转角所占的时针的比例。
它分为两部分：模拟指针时钟和数字时钟。
首先，在第一部分中，我们定义了三个变量 hr、mn 和 sc，它们分别代表时针、分针和秒针。接着，我们使用了 JavaScript 中的 setInterval() 方法，在每秒钟的时间间隔内获取当前时间，并计算出时针、分针和秒针应该旋转的角度，最后通过修改 CSS 样式中的 transform 属性来实现指针旋转的效果。
setInterval(() => {
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * 6;
let ss = day.getSeconds() * 6
hr.style.transform = `rotateZ(${hh + (mm / 12)}deg)` //时针 + 分针所占比例
mn.style.transform = `rotateZ(${mm}deg)`
sc.style.transform = `rotateZ(${ss}deg)`
})
在第二部分中，我们定义了四个变量 hours、minutes、seconds 和 ampm，它们分别代表时、分、秒和上午/下午状态。同样的，我们使用了 JavaScript 中的 setInterval() 方法，在每秒钟的时间间隔内获取当前时间，并计算出时、分、秒以及上午/下午状态。最后通过修改 HTML 元素的 innerHTML 属性来实现数字时钟的显示。
// digital clock
setInterval(()=>{
let hours = document.getElementById('hours')
let minutes = document.getElementById('minutes')
let seconds = document.getElementById('seconds')
let ampm = document.getElementById('ampm')
let h = new Date().getHours();
let m = new Date().getMinutes();
let s = new Date().getSeconds();
// am pm 设置
let am =h >=12 ? 'PM' :'AM'
// 12个小时
if(h>12){
h=h-12
}
// 格式化
h = (h <10? '0'+h :h)
m = (m <10? '0'+m :m)
s = (s <10? '0'+s :s)
hours.innerHTML = h;
minutes.innerHTML = m;
seconds.innerHTML = s;
ampm.innerHTML=am;
})
整体js代码
let hr = document.querySelector('#hr');
let mn = document.querySelector('#mn');
let sc = document.querySelector('#sc');
// let day = new Date();
//360deg 360/12 ===30deg 30/5 ===6deg
// console.log(day.getHours(), day.getMinutes(), day.getSeconds());
// console.log(hh, mm, ss);
setInterval(() => {
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * 6;
let ss = day.getSeconds() * 6
hr.style.transform = `rotateZ(${hh + (mm / 12)}deg)` //时针 + 分针所占比例
mn.style.transform = `rotateZ(${mm}deg)`
sc.style.transform = `rotateZ(${ss}deg)`
})
// digital clock
setInterval(()=>{
let hours = document.getElementById('hours')
let minutes = document.getElementById('minutes')
let seconds = document.getElementById('seconds')
let ampm = document.getElementById('ampm')
let h = new Date().getHours();
let m = new Date().getMinutes();
let s = new Date().getSeconds();
// am pm 设置
let am =h >=12 ? 'PM' :'AM'
// 12个小时
if(h>12){
h=h-12
}
// 格式化
h = (h <10? '0'+h :h)
m = (m <10? '0'+m :m)
s = (s <10? '0'+s :s)
hours.innerHTML = h;
minutes.innerHTML = m;
seconds.innerHTML = s;
ampm.innerHTML=am;
})
