[关闭]
@EncyKe 2015-12-27T07:22:35.000000Z 字数 2858 阅读 2879

JS:计时器

前端 JavaScript



一、date对象

1. date对象定义

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

2. date对象方法

方法 返回值 示例
Date() 返回当前的日期和时间
getDate() 查看Date对象并返回日期 (1-31)
getDay() 返回星期几 (0-6)
getHours() 返回小时数 (0-23)
getMinutes() 返回分钟数 (0-59)
getMonth() 返回月份值 (从0开始,+1即月份)
getSeconds() 返回秒数
getTime() 返回毫秒数
getYear() 返回年份 (非完整格式)
getFullYear() 方法来操作 (完整格式2015)

3. 其它

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

二、计时器应用

1. 当前时间动态计时器

HTML部分

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

JS部分

  1. window.onload = showTime;
  2. // 主函数,显示时间信息;
  3. function showTime(){
  4. var timeDate = new Date();
  5. var year = timeDate.getFullYear();
  6. var month = timeDate.getMonth();
  7. var date = timeDate.getDate();
  8. var day = timeDate.getDay();
  9. var hour = timeDate.getHours();
  10. var minute = timeDate.getMinutes();
  11. var second = timeDate.getSeconds();
  12. minute = checkFigure(minute);
  13. second = checkFigure(second);
  14. var weekday = new Array('星期日','星期一','星期二','星期三','星期四','星期五','星期六');
  15. document.getElementById('time').innerHTML = year + '年' + month + '月' + date + '日 ' + weekday[day] + ' ' + hour + ':' + minute + ':' + second;
  16. }
  17. // 补位函数,把单一位数字通过在前面+“0”转化为两位;
  18. function checkFigure(i){
  19. if(i<10){
  20. i = '0' + i;
  21. }
  22. return i;
  23. }
  24. setInterval(showTime,500);

2. 天数倒计时器

HTML部分

  1. <div id="time2">
  2. 距离元旦还有<span id="time2NewYear"></span>天。
  3. </div>
  4. <div id="timeIsNewYear">
  5. 然而今天就是元旦。
  6. </div>
  7. <div id="timePast">
  8. 元旦已经过去<span id="timePastNewYear"></span>天。
  9. </div>

JS部分

  1. window.onload = function(){
  2. var currentTime = new Date();
  3. var endTime = new Date('2016,1,1');
  4. var leftTime = endTime - currentTime;
  5. var leftDay = leftTime/(1000*60*60*24);
  6. if (leftDay > 0) {
  7. document.getElementById('time2NewYear').innerHTML = ' ' + Math.ceil(leftDay) + ' ';
  8. document.getElementById('timePast').style.display = 'none';
  9. document.getElementById('timeIsNewYear').style.display = 'none';
  10. }
  11. else if(leftDay == 0){
  12. document.getElementById('time2').style.display = 'none';
  13. document.getElementById('timePast').style.display = 'none';
  14. }
  15. else{
  16. leftDay = -leftDay;
  17. document.getElementById('timePastNewYear').innerHTML = ' ' + Math.ceil(leftDay) + ' ';
  18. document.getElementById('time2').style.display = 'none';
  19. document.getElementById('timeIsNewYear').style.display = 'none';
  20. };
  21. }

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

3. 秒数动态倒计时器

HTML部分

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

JS部分

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

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

附:参考

慕课:倒计时效果

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注