【构思】

  因为只需要的是两小时,所以时间直接写死,然后通过setInterval每1000ms对时间进行减1操作

  前期未考虑到当时分秒小于10的状态,所以后面又加上了一个checkTime()来进行限制,小时则直接在变量中加了。

【步骤】

  

<html>
<head>
<title>2小时倒计时</title>
<style>
*{
margin: 0;
padding: 0;
}
.cutDown{
width: 100%;
height: 100%;
background: url(2.jpg) no-repeat;
background-size: 100%;
text-align: center;
color: #fff;
font-size: 80px;
font-weight: 100;
font-family: monospace;
position: absolute;
bottom: 0px;
}
</style>
</head>
<body >
<div id="time" class="cutDown"></div>
<script>
window.onload = function(){
var time = {
init: function() {
var oTime=document.getElementById("time");
var h='0' + 1;
var m=59;
var s=59;
oTime.innerHTML="02 : 00 : 00"; //进行倒计时显示
var time = setInterval(function(){
--s;
if(s<0){
--m;
s=59;
}
if(m<0){
--h;
m=59
}
if(h<0){
s=0;
m=0;
}
// 判断当时分秒小于10时补0
function checkTime(i){
if (i < 10) {
i = '0' + i
}
return i;
}
s = checkTime(s);
m = checkTime(m);
oTime.innerHTML=h+" : "+m+" : "+s;
},1000);
}
}
time.init();
}
</script>
</body>
</html>

  

  

05-11 13:42