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