关于javascript:HTML5CSS3JS实现动态时钟

HTML5+CSS3+JS 实现动静时钟

利用 HTML5+CSS3+JS 实现简略的钟表，仅供参考学习

效果图：

在线成果预览

思路：

1. 先定义一个类名为 timepiece 的圆表表盘

HTML:

<div class="timepiece">
    
</div>

CSS:

.timepiece {
            position: relative;
            width: 401px;
            height: 401px;
            border: 1px solid #333;
            border-radius: 50%;
            margin: 0 auto;
        }

2. 定义一类名为 constantly 的 ul 标签来放 li 用来做钟表的时刻

HTML:

<div class="timepiece">
    <!-- 钟表的刻度 -->
   <ul class="constantly"></ul> 
</div>

3. 利用 JS 来生成工夫刻度并增加相应的款式类名

CSS:

/* 所有时刻的款式类名 */
.constantly .li {
            position: absolute;
            left: 50%;
            top: 0;
            transform: translate(-50%);
            width: 1px;
            height: 9px;
            background-color: #333;
            transform-origin: center 200px;
        }
/* 每个小时的时刻款式 */
.constantly .lip {
         width: 3px;
         height: 12px;
 }

JS:

// 获取到 ul 标签
let ul = document.querySelector('.constantly')
// 遍历实现时钟刻度
for (let i = 0; i < 60; i++) {
            // 创立 li 标签
            let li = document.createElement('li')
            // 给所有里标签增加旋转属性
            li.style.transform = `translate(-50%) rotate(${i * 6}deg)`
             // 把 li 标签增加到 ul 外面
            ul.appendChild(li)
            // 给所有 ul 标签里的 li 标签增加一个里的类名
            ul.children[i].classList.add('li')
        }
// 为每个时刻增加款式
for (let j = 0; j < 12; j++) {ul.children[j * 5].classList.add('lip')
        }

4. 定义一个类名为 interval 的盒子寄存显示小时和分钟

HTML:

<div class="timepiece">
    <!-- 钟表的两头 -->
    <div class="interval"></div>
</div>

CSS:

/* 定位在盒子两头和增加相应的款式 */
.interval {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            background-color: #ccc;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;
        }

JS:

// 获取到 interval 元素
let interval = document.querySelector('.interval')
// 封装一个获取以后工夫的函数，并以对象的形式返回
function getTimes() {
            // 初始化工夫
            let date = new Date()
            let hours = date.getHours()
            let minute = date.getMinutes()
            let second = date.getSeconds()
            // 返回一个工夫对象
            return {hours: hours, minute: minute, second: second}
        }
// 设置定时器让时钟动态显示
setInterval(() => {
    // 增加时候到 interval 外面显示，并格式化工夫
    let h = getTimes().hours < 10 ? '0' + getTimes().hours : getTimes().hours
    let m = getTimes().minute < 10 ? '0' + getTimes().minute : getTimes().minute
    interval.innerText = `${h}:${m}`
},1000)

5. 设置秒钟的时真，这里咱们把每一个刻刻度的当成秒钟时针秒钟到那那里变秒钟指针

CSS:

.constantly .lis {
            width: 8px;
            height: 14px;
            background-color: aqua;
        }

JS:

// 设置定时器让时钟动态显示
setInterval(() => {  
    // 定义一个变量寄存秒钟
    let i = getTimes().second
    // 在增加秒钟款式的时候把上一个的刻度的秒钟款式移除
    // ul.children[i - 1 === -1 ? 59 : i - 1].classList.remove('lis')
    // 把所有 li 标签的秒钟款式革除一遍
    for (let i = 0; i < 60; i++) {ul.children[i].classList.remove('lis')
     }
    // 增加秒钟款式
    ul.children[i].classList.add('lis')
},1000)

6. 设置一个类名为 minute 的盒子作为分钟时针

HTML:

<div class="timepiece">
    <!-- 绘制一个分钟的指针 -->
    <div class="minute"></div>
</div>

CSS:

.minute {
            position: absolute;
            left: 50%;
            top: 79px;
            transform: translate(-50%);
            width: 5px;
            height: 67px;
            background-color: #333;
            border-radius: 2px;
            transform-origin: center 121px;
        }

JS:

// 获取分钟元素
let minute = document.querySelector('.minute')
// 设置定时器让时钟动态显示
setInterval(() => {
    // 让分钟实时动起来
    minute.style.transform = `translate(-50%) rotate(${getTimes().minute * 6}deg)`
},1000)

7. 设置类名为 hours 的时钟指针

HTML:

<div class="timepiece">
    <!-- 绘制一个时钟的指针 -->
    <div class="hours"></div>
</div>

CSS:

.hours {
            position: absolute;
            left: 50%;
            top: 122px;
            transform: translate(-50%);
            width: 16px;
            height: 24px;
            background-color: aquamarine;
            border-radius: 2px;
            transform-origin: center 78px;
        }

JS:

// 获取时钟指针元素
let hours = document.querySelector('.hours')
setInterval(() => {
    // 让时格式化为 12 小时
    let h = getTimes().hours > 12 ? getTimes().hours - 12 : getTimes().hours
    // 把一个小时划分为五份，每一份占六度
     let h1 = getTimes().minute / 12 * 6
     // 时钟实时的旋转度数
     hours.style.transform = `translate(-50%) rotate(${h * 30 + h1}deg)`
},1000)

8. 在线代码地址：

JS 时钟在线代码