<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-family: "Microsoft YaHei", serif;
}
body, dl, dd, p, h1, h2, h3, h4, h5, h6 {
margin: 0;
}
ol, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none
}
#wrap{
/*overflow: hidden;*/
width: 400px;
height: 62px;
margin: 50px auto;
border: 1px solid red;
}
#wrap div{
float: left;
margin: 0 3px;
}
#wrap div.time{
position: relative;
top: 0;
width: 40px;
height: 124px;
transition: top .2s;
}
#wrap div.time p{
width: 100%;
height: 62px;
background-image: linear-gradient(gray 50%,black 50%);
border-radius: 10px;
font-size: 26px;
color: #fff;
text-align: center;
font-weight: bolder;
line-height: 62px;
}
#wrap div.dot p{
width: 20px;
height: 62px;
line-height: 62px;
text-align: center;
font-size: 30px;
}
/*#wrap div.time:nth-child(1){*/
/*background-color: #cc3366;*/
/*}*/
</style>
</head>
<body>
<div id="wrap">
<div class="time">
<p>0</p>
<p>0</p>
</div>
<div class="time">
<p>0</p>
<p>0</p>
</div>
<div class="dot">
<p>:</p>
</div>
<div class="time">
<p>0</p>
<p>0</p>
</div>
<div class="time">
<p>0</p>
<p>0</p>
</div>
<div class="dot">
<p>:</p>
</div>
<div class="time">
<p>0</p>
<p>0</p>
</div>
<div class="time">
<p>0</p>
<p>0</p>
</div>
</div>
<script>
(function () {
let aTime = document.querySelectorAll("#wrap div.time");
let aFirstP = document.querySelectorAll("#wrap div.time p:nth-child(1)");
let aSecondP = document.querySelectorAll("#wrap div.time p:nth-child(2)");
let lastTimeStr;
// 页面一开始需要直接执行获得一个事件
// 之后变化通过这个时间去变化 我用这个last存第一次的和之后变化的
// 去判断需要动哪个
// 初始执行
init();
setInterval(f,1000);
// 初始函数
function init() {
let date = new Date();
let h = toTwo(date.getHours());
let m = toTwo(date.getMinutes());
let s = toTwo(date.getSeconds());
// 整出来一个时间的字符串
lastTimeStr = h+m+s;
aFirstP.forEach(function (ele,i) {
ele.innerHTML = lastTimeStr.charAt(i)
});
aSecondP.forEach(function (ele,i) {
ele.innerHTML = lastTimeStr.charAt(i)
});
}
// 之后变化
function f() {
let date = new Date();
let h = toTwo(date.getHours());
let m = toTwo(date.getMinutes());
let s = toTwo(date.getSeconds());
// 整出来一个时间的字符串
let nowTimeStr = h+m+s;
// lastTimeStr页面开启之后就有值了
// 用前边定义好的lastTimeStr和nowTimeStr做比较 一样的就不用变化了
for (let i=0;i<6;i++) {
console.log(lastTimeStr);
console.log(nowTimeStr);
// 判断每一位是否和上一次显示的一样
if (nowTimeStr.charAt(i)===lastTimeStr.charAt(i)) {
continue
}
// 不一样的,也就是要变化的执行步骤
// 把变化了的 现在的时间给到第二排
aSecondP[i].innerHTML = nowTimeStr.charAt(i);
// 对应的div向上滚动
// 瞬间回去的时候把样式去掉了 下一次执行的时候需要再加上
aTime[i].style.transition = "top .2s";
aTime[i].style.top = "-62px";
setTimeout(function () {
aFirstP[i].innerHTML = nowTimeStr.charAt(i);
aTime[i].style.transition = "top 0s";
aTime[i].style.top = "0";
},200);
}
// 每次执行过后都需要把现在的时间给到定义的存储时间的地方
lastTimeStr = nowTimeStr
}
function toTwo(number) {
return (number<10? "0":"")+number;
}
})();
</script>
</body>
</html>
Python3Turtle