HTML5+CSS3+JS实现动态时钟

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时钟在线代码