<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function showDays(){
var allTags = document.getElementsByTagName("*");
for(var i=0; i<allTags.length; i++){ //遍历循环所有节点
if(allTags[i].className.indexOf("daysTill") > -1){ //如果className中有字符串DaysTill
allTags[i].innerHTML = showTheDaysTill(allTags[i].id); //把className中含有字符串DaysTill的元素节点的html设置为showTheDaysTill函数的返回值
}
};
function showTheDaysTill(thisDate){ //className中含有字符串DaysTill的元素节点的ID传给参数thisDate "bday" "xmas" "anniv"
var theDays; //初始化变量theDays
switch(thisDate){ //判断参数thisDate "bday" "xmas" "anniv"
case "anniv": //值为anniv
theDays = daysTill(1,6); //theDys变量设置为 函数传入参数5,6的返回值 函数返回计算出的天数
break;
case "xmas":
theDays = daysTill(12,24);
break;
case "bday":
theDays = daysTill(1,10);
break;
}
return theDays + "";
};
function daysTill(mm,dd){
var now = new Date();//通过 new 关键词来定义 Date 对象 Date 对象自动使用当前的日期和时间作为其初始值
var inDate = new Date(now.getFullYear(),mm-1,dd); //inDate为新的Date对象 对象初始化为 完整4位年份 传进月份-1 传进日
if(inDate.getTime() < now.getTime()){ //传进新变量的时间距离1970/1/1午夜的毫秒数<当前时间距离1970/1/1 也就是指定的日期小于当前的日期 就说明指定的日期已经过了 比如指定日期是2月2日 当前日期是2月3日 2月2日距离1970/1/1的毫秒数小于2月3日距离1970/1/1的毫秒数 已经错过了指定日期
inDate.setYear(now.getFullYear()+1); //给当前年份加1 以下一年的日期作为指定日期的年份 和当前日期进行比较
}
return (Math.ceil(dayTodays(inDate) - dayTodays(now))); //返回指定日期到1970/1/1天数 减去当前日期到1970/1/1天数 得到时间差 向上取整
};
function dayTodays(inTime){ //参数inTime为指定日期到1970/1/1毫秒数 和 当前日期到1970/1/1毫秒数
return (inTime.getTime()/(1000*60*60*24)); //到1970/1/1毫秒数除以1天的毫秒数 返回1970/1/1到现在的天数
}
};
window.onload = showDays;
/*
getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。
语法
dateObject.getTime()返回值
dateObject 指定的日期和时间距 1970 年 1 月 1 日午夜(GMT 时间)之间的毫秒数。
*/
</script>
</head>
<body>
<p>Dori says:</p>
<p>还有
<span class="daysTill" id="bday"></span>
天到我的生日和
<span class="daysTill" id="xmas"></span>
天到圣诞节,所以现在就需要购物.
</p>
<p>
而且还有
<span class="daysTill" id="anniv"></span>
天到结婚纪念日...
</p>
</body>
</html>