HTML5數字翻頁時鐘是一種新穎的時鐘顯示方式，它使用了HTML5技術來呈現時鐘數字的翻頁效果。HTML5數字翻頁時鐘的代碼也比較簡單，并且可以很容易地定制風格及顏色。
<html>
<head>
<script type="text/javascript">
function flip(num,id){
var obj = document.getElementById(id);
obj.innerHTML = "<span>" + num + "</span>";
obj.className += " animate";
}
function init(){
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
flip(Math.floor(h/10),"hourLeft1");
flip(h%10,"hourRight1");
flip(Math.floor(m/10),"minuteLeft1");
flip(m%10,"minuteRight1");
flip(Math.floor(s/10),"secondLeft1");
flip(s%10,"secondRight1");
setInterval(function(){
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
flip(Math.floor(h/10),"hourLeft1");
flip(h%10,"hourRight1");
flip(Math.floor(m/10),"minuteLeft1");
flip(m%10,"minuteRight1");
flip(Math.floor(s/10),"secondLeft1");
flip(s%10,"secondRight1");
}, 1000);
}
</script>
<style type="text/css">
.number{
width: 28px;
height: 31px;
line-height: 31px;
font-size: 20px;
color: #FFF;
text-align: center;
font-family: 'Times New Roman', Times, serif;
position: absolute;
top: 0;
left: 0;
animation-duration: 0.5s;
animation-timing-function: ease-out;
animation-name: flip;
}
.number span{
background-color: #3F3F3F;
display: block;
}
.card{
width: 31px;
height: 31px;
float:left;
margin-right: 5px;
position: relative;
}
.animate{
animation-duration: 0.5s;
animation-timing-function: ease-out;
animation-name: flip;
}
@keyframes flip{
0%{
transform:rotateY(0deg);
}
50%{
transform:rotateY(90deg);
}
100%{
transform:rotateY(0deg);
}
}
#hourLeft1{
top: 40px;
left: 80px;
}
#hourRight1{
top: 40px;
left: 114px;
}
#minuteLeft1{
top: 100px;
left: 80px;
}
#minuteRight1{
top: 100px;
left: 114px;
}
#secondLeft1{
top: 160px;
left: 80px;
}
#secondRight1{
top: 160px;
left: 114px;
}
</style>
</head>
<body onload="init()">
<div class="card">
<div id="hourLeft1" class="number"></div>
</div>
<div class="card">
<div id="hourRight1" class="number"></div>
</div>
<div class="card">
<div class="number"><span>:</span></div>
</div>
<div class="card">
<div id="minuteLeft1" class="number"></div>
</div>
<div class="card">
<div id="minuteRight1" class="number"></div>
</div>
<div class="card">
<div class="number"><span>:</span></div>
</div>
<div class="card">
<div id="secondLeft1" class="number"></div>
</div>
<div class="card">
<div id="secondRight1" class="number"></div>
</div>
</body>
</html>HTML5數字翻頁時鐘的代碼中，<div>元素中包含了一個<span>元素用于顯示數字。其位置、大小、字體等均可以通過修改樣式來定制。flip(num,id)函數用于每秒更新數字及效果，并觸發樣式的animation-name。在樣式中，@keyframes定義了數字翻轉效果。