javascript倒计时器的知识点+案例

知识点

javascript调用日期相关的对象:

Date() -- 返回当前的日期和时间
getFullYear() -- 返回完整格式的年份(2016)
getYear() -- 返回年份
getMonth() -- 返回月份值(从0开始计算,递增+1)
getDate() -- 查看Date对象并返回日期,格式(1-31)
getDay() -- 返回星期几(0-6)
getHours() -- 返回小时数(0-23)
getMinutes() -- 返回分钟数(0-59)
getSeconds() -- 返回秒数
getTime() -- 返回毫秒数

javascript数值处理函数:

Math.ceil();向上取整
parseInt(); 取整,舍去小数点后的内容
% 取余

使用方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var myDate = new Date();
//年月日
var year = myDate.getFullYear();
var month = myDate.getMonth()+1;
var date = myDate.getDate();
//星期
var weekday = new Array(7);
weekday[0]="星期日";
weekday[1]="星期一";
weekday[2]="星期二";
weekday[3]="星期三";
weekday[4]="星期四";
weekday[5]="星期五";
weekday[6]="星期六";
var week = weekday[myDate.getDay()];
//时分秒
var H = myDate.getHours();
var M = myDate.getMinutes();
var S = myDate.getSeconds();
var tt = myDate.getTime();

时间效果实现

考试倒计时

1
2
3
4
5
6
7
8
9
10
//做一个指定结束日期的倒计时器,用`new Date()`新建日期,
//开始日期和结束日期对象:
var curTime=new Date();
var endTime=new Date("2016,6,6");
//剩余时间/时间差即为:
var leftTime=curTime-endTime;
//再将时间差进行天数折算,一天24小时,一小时60分钟,一分钟60秒,一秒1000毫秒,那么,相差的天数为:
leftTime = leftTime/(24*60*60*1000);
//再将数值取整,得到倒计时天数:
leftTime = Math.ceil(leftTime);

活动倒计时:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function countDay(){
var nowtime = new Date();
var endtime = new Date("2016/6/1,11:11:11");//结束时间
var lefttime = parseInt((endtime.getTime()-nowtime.getTime())/1000);//换算为毫秒差,及最小单位的差值
if (lefttime<0) {
document.getElementById('leftTime').innerHTML = "活动已结束";
clearInterval(timer);
}else{
var d = parseInt(lefttime/(24*60*60));
var h = parseInt(lefttime/(60*60)%24);
var m = parseInt(lefttime/60%60);
var s = parseInt(lefttime%60);
document.getElementById('leftTime').innerHTML = " "+d+"天"+h+"小时"+m+"分钟"+s+"秒";
}
}
countDay();
var timer = setInterval('countDay()',500);

演示

查看源码:nooldey@github

在线演示:show@github

以上,实现javascript计时器效果。

写得好!朕重重有赏!