电商网站倒计时效果

倒计时效果主要应用计时器来实现，首先简单的布局，之后是js的代码。

<h3>限时抢购
        <font id="timer">
                距离本次结束还有 :
                <i></i> 时
                <i></i> 分
                <i></i> 秒
          </font>
</h3>

//如果该数是个位数在其前面加‘0’

function toDouble(a){

    return a < 10 ? '0' + a : "" + a;
}

function ShowCountDown(year,month,day)
{
    var oTimer = document.getElementById("timer");//获取font
    var oI = oTimer.getElementsByTagName('i');//获取font里的三个li
    var now = new Date(); //创建一个Date对象，获取当前时间
    var endDate = new Date(year, month - 1, day); //创建截止日期
    var leftTime=endDate.getTime() - now.getTime(); //当前天数到截止天数的总毫秒数
    var leftsecond = parseInt(leftTime / 1000); //当前天数到截止天数的总秒数
    var day1 = Math.floor(leftsecond / (60 * 60 * 24)); //获取天数
    var hour = Math.floor((leftsecond - day1 * 24 * 60 * 60) / 3600);//获取小时
    var minute = Math.floor((leftsecond - day1 * 24 * 60 * 60 - hour * 3600) / 60);//获取分钟
    var second = Math.floor(leftsecond - day1 * 24 * 60 * 60 - hour * 3600 - minute * 60);//获取秒数

    hour = day1 * 24 + hour;//如果不存在剩余天数的话，获取的小时数

      // 将获取的时分秒添加到文本中

        oI[0].innerHTML = toDouble(hour);
        oI[1].innerHTML = toDouble(minute);
        oI[2].innerHTML = toDouble(second);

}

//开启计时器

ShowCountDown(2016,11,23);
setInterval(function(){
    ShowCountDown(2016,11,23);
}, 1000);