这里以12小时为例进行倒计时
javascript的整体思路如下
var totalTimer = 12*60*60; // 单位是秒 总时间是12小时
// 思路:
// 1.每隔一秒钟totalTimer-1;
// 2.把获取到的时间拆分成时,分,秒;
// 3.把获取到的时分秒分别添加到相应的span中
// 4.当倒计时完成后,要把时间停留在000000
这里是css部分
<style>
.timer{
width: 300px;
height: 30px;
border: 1px solid #ddd;
}
.timer-bg-title{
display: inline-block;
width: 40px;
height: 28px;
background: url("./images/time-start.png") no-repeat;
vertical-align: middle;
}
.timer-bg{
display: inline-block;
width: 20px;
height: 28px;
line-height: 28px;
background: url("./images/time-bg.png") no-repeat;
vertical-align: middle;
font-size: 20px;
color: #fff;
text-align: center;
}
</style>
<div class="timer" id="timer">
<span class="timer-bg-title"></span>
<span class="timer-bg">1</span>
<span class="timer-bg">2</span>
<i>: </i>
<span class="timer-bg">3</span>
<span class="timer-bg">4</span>
<i>: </i>
<span class="timer-bg">5</span>
<span class="timer-bg">6</span>
</div>
<script>
var totalTimer = 12*60*60;// 单位是秒 总时间是12小时
var timer = document.getElementById("timer");
var spans = document.getElementsByTagName("span");
timer = setInterval(function(){
if(total>0){
totalTimer--;//每隔一秒就把totalTimer的值减一
var hour = Math.floor( totalTimer/60/60 );//获取小时
var minute = Math.floor( (totalTimer - hour*60*60)/60 );//获取分钟
var second = totalTimer%60;//获取秒
console.log(hour,minute,second);
// 一共有6个span标签,把时分秒的值各拆分成两个,当时分秒的时间小于10的时候,需要补零.即把时间分为个位和十位进行取舍
spans[0].innerHTML = Math.floor( hour/10 );//获取小时的十位
spans[1].innerHTML = hour%10;//获取小时的个位
spans[2].innerHTML = Math.floor( minute/10 );//获取小时的十位
spans[3].innerHTML = minute%10;//获取小时的个位
spans[4].innerHTML = Math.floor( second/10 );//获取小时的十位
spans[5].innerHTML = second%10;//获取小时的个位
}else{
clearInterval(timer);
}
},1000)
</script>
运行效果
知识点补充:
css:
vertical-line:位置
对于行内元素来说 可以通过vertical-align来设置(只能在行内或者行内块内起作用哦!)
JavaScript Math.floor 向下取整 如需了解更多,请单击 http://www.w3school.com.cn/jsref/jsref_floor.asp进行查看哦~
如果有不正确的地方,欢迎提出来,共同取得进步哦!
正在学习中~~~