JavaScript倒计时案例

这里以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进行查看哦~
如果有不正确的地方，欢迎提出来，共同取得进步哦！
正在学习中~~~