【構思】
因為只需要的是兩小時,所以時間直接寫死,然后通過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>
