HTML5+CSS3+JS Realizes Dynamic Clock
Using HTML5+CSS3+JS to realize a simple clock, for reference only
Renderings:
Ideas:
timepiece1. First define a round table dial with the class name
HTML:
<div class="timepiece">
</div>
CSS:
.timepiece {
position: relative;
width: 401px;
height: 401px;
border: 1px solid #333;
border-radius: 50%;
margin: 0 auto;
}
2. Define a type of constantlyul tag named to put the time when li is used as a clock
HTML:
<div class="timepiece">
<!-- 钟表的刻度 -->
<ul class="constantly"></ul>
</div>
3. Use JS to generate the time scale and add the corresponding style class name
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. Define a class named intervalbox to store and display hours and minutes
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. Set the time of the second, here we regard each scale as the second hour hand and second, then change the second hand there
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. Set a minutebox with the class name as the minute hour hand
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. Set hoursthe clock pointer with the class name
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. Online code address: