图片img：
本来想着压缩一下上传的，但是不允许，如果你们有既省空间有方便上传图片视频的方法，欢迎留言分享给我。
效果图：
HTML代码部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/倒计时.css" />
</head>
<body>
<div id="wrapper">
<div id="box">
<!--小时里的十位图片-->
<div class="time" id="aHour">
<div></div>
<div></div>
</div>
<!--小时里的个位图片-->
<div class="time" id="bHour">
<div></div>
<div></div>
</div>
<!--符号图片-->
<div class="colon">
</div>
<!--分钟里的十位图片-->
<div class="time" id="aMinute">
<div></div>
<div></div>
</div>
<!--分钟里的个位图片-->
<div class="time" id="bMinute">
<div></div>
<div></div>
</div>
<!--符号图片-->
<div class="colon">
</div>
<!--秒数里的十位图片-->
<div class="time" id="aSecond">
<div></div>
<div></div>
</div>
<!--秒数里的个位图片-->
<div class="time" id="bSecond">
<div></div>
<div></div>
</div>
</div>
</div>
</body>
</html>
CSS代码部分：
html,
body {
margin: 0;
padding: 0;
}
#wrapper {
width: 400px;
height: 70px;
padding: 20px 20px;
text-align: center;
margin: 100px auto;
/*border: 1px solid black;*/
}
#box {
width: 400px;
height: 70px;
position: relative;
overflow: hidden;
/*border: 1px solid blue;*/
}
#box>div {
width: 50px;
height: 70px;
/*border: 1px solid red;*/
float: left;
}
.time {
position: relative;
}
.time div:first-child {
background-image: url(../img/0.jpg);
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 70px;
}
.time div:last-child {
background-image: url(../img/0.jpg);
position: absolute;
top: 70px;
left: 0;
width: 50px;
height: 70px;
}
.colon {
background-image: url(../img/c.jpg);
}
JS代码部分：
//所有的符号图片div
var oColon = document.getElementsByClassName("colon");
// 获取小时十位数图片div对象
var aHourDiv = document.getElementById("aHour");
// 获取小时个位数图片div对象
var bHourDiv = document.getElementById("bHour");
// 获取分钟十位数图片div对象
var aMunuteDiv = document.getElementById("aMinute");
// 获取分钟个位数图片div对象
var bMinuteDiv = document.getElementById("bMinute");
// 获取秒数十位数图片div对象
var aSecondDiv = document.getElementById("aSecond");
// 获取秒数个位数图片div对象
var bSecondDiv = document.getElementById("bSecond");
//获取当前系统时间
var oDate = new Date();
// 获取的时间除于10，得到小时数的十位数，有可能有小数，直接使用向下取整忽略，其他位数的都是类推
//当前时间得到的小时位数的十位
var aHour = Math.floor(oDate.getHours() / 10);
//当前时间得到的小时位数的个位
var bHour = oDate.getHours() % 10;
//当前时间得到的分钟位数的十位
var aMinute = Math.floor(oDate.getMinutes() / 10);
//当前时间得到的分钟位数的个位
var bMinute = oDate.getMinutes() % 10;
//当前时间得到的秒数位数的十位
var aSecond = Math.floor(oDate.getSeconds() / 10);
//当前时间得到的秒数位数的个位
var bSecond = oDate.getSeconds() % 10;
// 获取到每个数值之后立刻更改页面上的图片数值
//改变小时十位的图片
changeImage(aHourDiv, aHour);
//改变小时个位的图片
changeImage(bHourDiv, bHour);
//改变分钟十位的图片
changeImage(aMunuteDiv, aMinute);
//改变分钟个位的图片
changeImage(bMinuteDiv, bMinute);
//改变秒数十位的图片
changeImage(aSecondDiv, aSecond);
//改变秒数个位的图片
changeImage(bSecondDiv, bSecond);
// 根据获取的时间数字改变图片的函数
function changeImage(oDiv, time) {
var oDivs = oDiv.getElementsByTagName("div");
oDivs[0].style.backgroundImage = 'url(img/'+time+'.jpg)';
};
// 单独调用一次，因为下面的那句代码要延迟一秒后才能调用，跟系统时间慢一秒，所以要提前调用
showTime();
//每隔一秒，检测时，分，秒所在的图片是否需要改变
setInterval(showTime, 1000);
var bDate;//每隔一秒存储系统最新时间
function showTime() {
bDate = new Date();
//如果之前存储的小时十位和现在系统的小时十位数字不一样，则改变图片，且移动
if (aHour != Math.floor(bDate.getHours() / 10)) {
aHour = Math.floor(bDate.getHours() / 10);
move(aHourDiv, aHour);
}
//如果之前存储的小时个位和现在系统的小时个位数字不一样，则改变图片，且移动
if (bHour != Math.floor(bDate.getHours() % 10)) {
bHour = Math.floor(bDate.getHours() % 10);
move(bHourDiv, bHour);
}
//如果之前存储的分钟十位和现在系统的分钟个位数字不一样，则改变图片，且移动
if (aMinute != Math.floor(bDate.getMinutes() / 10)) {
aMinute = Math.floor(bDate.getMinutes() / 10);
move(aMunuteDiv, aMinute);
}
//如果之前存储的分钟个位和现在系统的分钟个位数字不一样，则改变图片，且移动
if (bMinute != Math.floor(bDate.getMinutes() % 10)) {
bMinute = Math.floor(bDate.getMinutes() % 10);
move(bMinuteDiv, bMinute);
}
//如果之前存储的秒数十位和现在系统的秒数十位数字不一样，则改变图片，且移动
if (aSecond != Math.floor(bDate.getSeconds() / 10)) {
aSecond = Math.floor(bDate.getSeconds() / 10);
move(aSecondDiv, aSecond);
}
//每隔一秒,都应该改变秒数个位的图片
bSecond = Math.floor(bDate.getSeconds() % 10);
move(bSecondDiv, bSecond);
//每隔一秒，符号切换
for (var i = 0; i < oColon.length; i++) {
if (bSecond % 2 == 0) {
oColon[i].style.backgroundImage = "url(img/c.jpg)";
} else {
oColon[i].style.backgroundImage = "url(img/b.jpg)";
}
}
};
//下面显示时间的图片，移动到上面的函数
function move(oDiv, time) {
var oDivs = oDiv.getElementsByTagName("div");
//切换下面隐藏的图片,然后往上移动出来
oDivs[1].style.backgroundImage = 'url(img/'+time+'.jpg)';
var timer = setInterval(function(){
//每70毫秒,移动的距离为7px
oDiv.style.top = oDiv.offsetTop - 7 + "px";
if (parseFloat(oDiv.style.top) <= -70) {
//当第一张图片移出屏幕时,则立马切换到第一张
oDiv.style.top = 0;
//第一张的图片切换成第二张图片，做到过渡重合
oDivs[0].style.backgroundImage = 'url(img/'+time+'.jpg)';
//取消定时器
clearInterval(timer);
}
}, 70)
};
如有误，欢迎指出！
