JS：计时器

前端 JavaScript

一、date对象

1. date对象定义

var myDate = new Date()：定义Date对象，把当前的日期和时间保存为初始值，再做以下方法引用；

2. date对象方法

3. 其它

Math.ceil(x)方法执行的是向上取整计算，它返回的是大于或等于函数参数，并且与之最接近的整数。
parseInt解析一个字符串，并返回一个整数。

二、计时器应用

1. 当前时间动态计时器

HTML部分

<div id="time"></div>

JS部分

window.onload = showTime;
// 主函数，显示时间信息；
function showTime(){
    var timeDate = new Date();
    var year = timeDate.getFullYear();
    var month = timeDate.getMonth();
    var date = timeDate.getDate();
    var day = timeDate.getDay();
    var hour = timeDate.getHours();
    var minute = timeDate.getMinutes();
    var second = timeDate.getSeconds();
    minute = checkFigure(minute);
    second = checkFigure(second);
    var weekday = new Array('星期日','星期一','星期二','星期三','星期四','星期五','星期六');
    document.getElementById('time').innerHTML = year + '年' + month + '月' + date + '日 ' + weekday[day] + ' ' + hour + ':' + minute + ':' + second;           
}
// 补位函数，把单一位数字通过在前面+“0”转化为两位；
function checkFigure(i){
    if(i<10){
        i = '0' + i;
    }
    return i;
}
setInterval(showTime,500);

2. 天数倒计时器

HTML部分

<div id="time2">
    距离元旦还有<span id="time2NewYear"></span>天。
</div>
<div id="timeIsNewYear">
    然而今天就是元旦。
</div>
<div id="timePast">
    元旦已经过去<span id="timePastNewYear"></span>天。
</div>

JS部分

window.onload = function(){
    var currentTime = new Date();
    var endTime = new Date('2016,1,1');
    var leftTime = endTime - currentTime;
    var leftDay = leftTime/(1000*60*60*24);
    if (leftDay > 0) {
        document.getElementById('time2NewYear').innerHTML = ' ' + Math.ceil(leftDay) + ' ';
        document.getElementById('timePast').style.display = 'none';
        document.getElementById('timeIsNewYear').style.display = 'none';
    }
    else if(leftDay == 0){
        document.getElementById('time2').style.display = 'none';
        document.getElementById('timePast').style.display = 'none';
    }
    else{
        leftDay = -leftDay;
        document.getElementById('timePastNewYear').innerHTML = ' ' + Math.ceil(leftDay) + ' ';
        document.getElementById('time2').style.display = 'none';
        document.getElementById('timeIsNewYear').style.display = 'none';
    };
}

改变var leftTime = endTime - currentTime;中被减数与减数关系即可获得正数计时器（如纪念日计时器等）。

3. 秒数动态倒计时器

HTML部分

<div id="leftTime"></div>

JS部分

window.onload = showTime;
function showTime(){
    var nowtime = new Date();
    var endtime = new Date("2015/12/27,00:00:00");
    //将当前时间以及结束时间转换为秒，之后再用结束时间减去当前时间
    var lefttime = parseInt((endtime.getTime()-nowtime.getTime())/1000);
    //换算出天
    var d = parseInt(lefttime/(24*60*60));
    //换算出小时之后，取模运算，获得具体的小时数
    var h = parseInt(lefttime/(60*60)%24);
    //换算出分钟,一小时等于60分钟，所以对60取模
    var m = parseInt(lefttime/60%60);
    var s = parseInt(lefttime%60);
    document.getElementById('leftTime').innerHTML='还剩 '+d+'天'+h+'小时'+m+'分钟'+s+'秒';
    //判断活动是否结束
    if(lefttime <= 0){
        document.getElementById('leftTime').innerHTML='团购已结束！';
    }
    //showtime是一个函数，500毫秒
    setTimeout(showTime,500);
}

同理，改变var lefttime = parseInt((endtime.getTime()-nowtime.getTime())/1000);中被减数与减数关系即可获得正数秒数动态计时器。

附：参考

慕课：倒计时效果