前端 | 实时电子时钟
📚实现效果
📚模块实现解析
🐇html
- 搭个框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>喵喵大王立大功</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<main id="board">
<div class="clock">
<div class="hours">
<div class="first">
<div class="number">0</div>
</div>
<div class="second">
<div class="number">0</div>
</div>
</div>
<div class="tick">:</div>
<div class="minutes">
<div class="first">
<div class="number">0</div>
</div>
<div class="second">
<div class="number">0</div>
</div>
</div>
<div class="tick">:</div>
<div class="seconds">
<div class="first">
<div class="number">0</div>
</div>
<div class="second infinite">
<div class="number">0</div>
</div>
</div>
</div>
</main>
</body>
<script src="./js/clock.js"></script>
</html>
🐇css
🐇JavaScript
- 实时更新时间的显示,并且在数字变化时有一个平滑的动画效果。
var hoursContainer = document.querySelector('.hours')
var minutesContainer = document.querySelector('.minutes')
var secondsContainer = document.querySelector('.seconds')
var tickElements = Array.from(document.querySelectorAll('.tick'))
var last = new Date(0)
last.setUTCHours(-1)
var tickState = true
function updateTime () {
var now = new Date
var lastHours = last.getHours().toString()
var nowHours = now.getHours().toString()
if (lastHours !== nowHours) {
updateContainer(hoursContainer, nowHours)
}
var lastMinutes = last.getMinutes().toString()
var nowMinutes = now.getMinutes().toString()
if (lastMinutes !== nowMinutes) {
updateContainer(minutesContainer, nowMinutes)
}
var lastSeconds = last.getSeconds().toString()
var nowSeconds = now.getSeconds().toString()
if (lastSeconds !== nowSeconds) {
updateContainer(secondsContainer, nowSeconds)
}
last = now
}
function tick () {
tickElements.forEach(t => t.classList.toggle('tick-hidden'))
}
function updateContainer (container, newTime) {
var time = newTime.split('')
if (time.length === 1) {
time.unshift('0')
}
var first = container.firstElementChild
if (first.lastElementChild.textContent !== time[0]) {
updateNumber(first, time[0])
}
var last = container.lastElementChild
if (last.lastElementChild.textContent !== time[1]) {
updateNumber(last, time[1])
}
}
function updateNumber (element, number) {
var second = element.lastElementChild.cloneNode(true)
second.textContent = number
element.appendChild(second)
element.classList.add('move')
setTimeout(function () {
element.classList.remove('move')
}, 975)
setTimeout(function () {
element.removeChild(element.firstElementChild)
}, 975)
}
setInterval(updateTime, 100)
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/598118.html
如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!