<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滚动数字时钟</title>
<script src="https://file.alonesky.com/jscss/jquery.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
100%;
}
body {
background: black;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.clock {
height: 20vh;
color: white;
font-size: 22vh;
font-family: sans-serif;
line-height: 20.4vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative; /*background: green;*/
overflow: hidden;
}
.clock::before, .clock::after {
content: '';
7ch;
height: 3vh;
background: -webkit-linear-gradient(bottom, transparent, black);
background: linear-gradient(to top, transparent, black);
position: absolute;
z-index: 2;
}
.clock::after {
bottom: 0;
background: -webkit-linear-gradient(top, transparent, black);
background: linear-gradient(to bottom, transparent, black);
}
.clock>div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.tick {
line-height: 17vh;
}
.tick-hidden {
opacity: 0;
}
.move {
-webkit-animation: move linear 1s infinite;
animation: move linear 1s infinite;
}
@-webkit-keyframes move {
from {
-webkit-transform: translateY(0vh);
transform: translateY(0vh);
}
to {
-webkit-transform: translateY(-20vh);
transform: translateY(-20vh);
}
}
@keyframes move {
from {
-webkit-transform: translateY(0vh);
transform: translateY(0vh);
}
to {
-webkit-transform: translateY(-20vh);
transform: translateY(-20vh);
}
}
</style>
</head>
<body>
<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>
<script type="text/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) {
//tick()
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) {
//element.lastElementChild.textContent = number
var second = element.lastElementChild.cloneNode(true)
second.textContent = number
element.appendChild(second)
element.classList.add('move')
setTimeout(function() {
element.classList.remove('move')
}, 990)
setTimeout(function() {
element.removeChild(element.firstElementChild)
}, 990)
}
setInterval(updateTime, 100);
</script>
</body>
</html>