<!doctype html>
<html>
<head>
<title>倒计时</title>
<link href="vl.css" rel="stylesheet" type="text/css">
</head>
<style type="text/css">
*{font-size:18px;margin:0;}
body table{margin:auto;margin-top:30px;border:2px green solid;}
body table tr td{font-size:24px;font-weight:bold;width:100px;height:100px;text-align:center;background:
#FFF1B3;color:#000000;}
</style>
<script type="text/javascript">
/*
目标:打开此文本,根据当前时间自动,圈注已过时间,具体根据电脑系统时间
2014年12月,2015年1月,2015年2月。
过年倒计时.标记已过去的日期,和当前时间.
*/
var day=0;
function init(){
for(var k=0;k<7;k++){
document.getElementsByTagName('td')[k].style.background="#D63315";
}
var datetime=new Date();
var yy=datetime.getFullYear();
var MM=datetime.getMonth()+1; //因为1月这个方法返回为0,所以加1
var dd=datetime.getDate();
var date=yy+"-"+MM+"-"+dd;
var time="2014-11-30";
var changeDate=date;
var start=new Date("2014","10","30");// 11月30
var end=new Date("2015","1","28"); //2月28
//alert(datetime+"\n"+start+"\n"+end);
if(datetime>start&&datetime<end){
for(var i=1;i<98;i++){
changeDate=controlDate(changeDate,-1);
if(changeDate==time){
var tdLength=document.getElementsByTagName("td").length;
document.getElementsByTagName('td')[i+7].style.background="green";
document.getElementsByTagName("td")[i+7].style.color="#FFFFFF";
for(var j=0;j<i;j++){
document.getElementsByTagName('td')[j+7].style.background="gray";
document.getElementsByTagName('td')[j+7].style.color="#CCCCCC";
}
document.getElementById('day').innerHTML="<font style='font-size:48px;'>距离过年还有"+(98-8-9-i)+"天</font>";
return ;
}
}
}
}
function controlDate(changeDate,val){
var change=changeDate.split("-");
var date=new Date(change[0],change[1]-1,change[2]);
date=date.valueOf();
date=date+val*24*60*60*1000;
date=new Date(date);
var yy=date.getFullYear();
var MM=date.getMonth()+1;
var dd=date.getDate();
var date=yy+"-"+MM+"-"+dd;
return date;
}
</script>
<body onload="init();">
<div style="width:60px;float:right;float:auto;font-size:48px;" id="day">
</div>
<table border="1" cellpadding="0" cellspacing="0">
<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>
<tr><td></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td></tr>
<tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td></tr>
<tr><td>28</td><td>29</td><td>30</td><td>31</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
<tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td></tr>
<tr><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td></tr>
<tr><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr>
<tr><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td></tr>
<tr><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td></tr>
</table>
</body>
</html>