使用类或css动画实现时钟

1.时钟1（类）

<!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>Document</title><style>.clock {border: 3px solid #000;padding: 8px;border-radius: 5px;display: inline-block;}.h {color: #f00}.m {color: #0f0;}.s {color: #00f;}</style></head><body><div class="clock1"></div><div class="clock2"></div><div class="clock3"></div></body><script>class Clock {// 属性// 该始终对象所挂载的页面节点#root#h = 0#m = 0#s = 0// 计时器#timer// 构造函数constructor(root, h = 0, m = 0, s = 0) {this.#root = rootthis.setTime(h, m, s)}// 行为// 开始运行start() {this.stop()this.#timer = setInterval(() => {this.run()this.render()console.log(this.toString());}, 1000)// 渲染第一帧this.render()}// 停止运行stop() {clearInterval(this.#timer)}// 运行run() {this.#s++if (this.#s >= 60) {this.#m++this.#s = 0if (this.#m >= 60) {this.#h++this.#m = 0if (this.#h >= 24) {this.#h = 0}}}}// 设置时间setTime(h, m, s) {this.#h = hthis.#m = mthis.#s = s}toString() {return `${this.#h < 10 ? '0' + this.#h : this.#h}:${this.#m < 10 ? '0' + this.#m : this.#m}:${this.#s < 10 ? '0' + this.#s : this.#s}`}// 渲染函数// 渲染函数的目的是将该对象的html展示出来render() {let html = `<div class="clock"><span class="h">${this.#h < 10 ? '0' + this.#h : this.#h}</span>:<span class="m">${this.#m < 10 ? '0' + this.#m : this.#m}</span>:<span class="s">${this.#s < 10 ? '0' + this.#s : this.#s}</span></div>`this.#root.innerHTML = html}}let clock = new Clock(document.querySelector('.clock1'), 23, 59, 48)clock.start()let clock2 = new Clock(document.querySelector('.clock2'), 14, 44, 57)clock2.start()let clock3 = new Clock(document.querySelector('.clock3'), 08, 14, 24)clock3.start()</script></html>

2.时钟2

<!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>Document</title><style>.clock {width: 400px;height: 400px;background-color: #000;border: 30px solid #808080;border-radius: 50%;position: relative;}.point {width: 10px;height: 10px;background-color: #fff;position: absolute;/* calc 计算函数可以计算尺寸单位的大小运算符的两端需要添加空格 */left: calc(50% - 5px);top: 10px;border-radius: 5px;transform-origin: center 190px;transform: rotate(0deg);}.point-container {width: 400px;height: 400px;position: absolute;top: 0;left: 0;}.hour {width: 30px;height: 100px;background-color: #575757;position: absolute;left: calc(50% - 15px);top: 100px;transform-origin: center bottom;transform: rotate(0deg);transition: all 0.5s linear;}.hour::before {content: '';display: block;width: 0;height: 0;border-style: solid;border-width: 15px;border-color: transparent transparent #575757 transparent;position: absolute;top: -30px;}.minute {width: 20px;height: 150px;background-color: #fff;position: absolute;left: calc(50% - 10px);top: 50px;transform-origin: center bottom;transform: rotate(0deg);transition: all 0.5s linear;}.minute::before {content: '';display: block;width: 0;height: 0;border-style: solid;border-width: 10px;border-color: transparent transparent #fff transparent;position: absolute;top: -20px;}.second {width: 10px;height: 180px;background-color: #f00;position: absolute;left: calc(50% - 5px);top: 20px;transform-origin: center bottom;transform: rotate(0deg);transition: all 0.5s linear;}.second::before {content: '';display: block;width: 0;height: 0;border-style: solid;border-width: 5px;border-color: transparent transparent #f00 transparent;position: absolute;top: -10px;}.cover {width: 50px;height: 50px;background-color: #f00;border-radius: 50%;position: absolute;left: calc(50% - 25px);top: calc(50% - 25px);}</style></head><body><div class="clock"><div class="point-container"></div><div class="hour"></div><div class="minute"></div><div class="second"></div><div class="cover"></div></div></body><script>const pointContainer = document.querySelector('.point-container')const hourEl = document.querySelector('.hour')const minuteEl = document.querySelector('.minute')const secondEl = document.querySelector('.second')// 渲染时钟的表盘function renderClock() {// 页面内容的中间变量let html = ''// 渲染刻度for (let i = 0; i < 60; i++) {// 计算高度let height = i % 5 === 0 ? 'height: 20px' : ''html += `<div class="point" style="transform: rotate(${i * 6}deg); ${height}"></div>`}pointContainer.innerHTML = html}// 渲染指针function renderPointer() {// 设置指针的旋转角度hourEl.style.transform = `rotate(${hRound * 360 + hour * 30}deg)`minuteEl.style.transform = `rotate(${mRound * 360 + minute * 6}deg)`secondEl.style.transform = `rotate(${sRound * 360 + second * 6}deg)`}renderClock();// 声明时钟的变量let hour = 11let minute = 59let second = 45// 指针旋转的圈数let hRound = 0let mRound = 0let sRound = 0// 初始化指针renderPointer()// 渲染循环setInterval(() => {// 先执行指针旋转逻辑second++// 进行进位判断if (second >= 60) {minute++sRound++second = 0if (minute >= 60) {hour++mRound++minute = 0if (hour >= 12) {hour = 0hRound++}}}// 设置指针的旋转角度renderPointer()}, 1000)// 总结// 1. 创建刻度的html模板// 2. 寻找旋转中心并进行验证// 3. 通过 js 代码循环渲染刻度</script></html>