这学期信息技术课后期，信息集成部分的内容我选了网页制作，有学生对JavaScript脚本有兴趣，就给他讲了讲，随手写了段倒计时的脚本，放这标记下，有需要来拿。

先用ps制作几个图片，gif格式，背景透明，0-9十个数字，每个数字三个色，实际只用两组，一个用于显示上午颜色，一个用于下午颜色，如图：

程序代码在浏览器中运行的效果如下，上面是今天时间，下面是倒计时：

写的代码：

<script type="text/javascript">
function toDouble(num)
{
 if(num<10)
 {
  return '0'+num;
 }else{
  return ''+num;
 }
}

function toFour(num)
{
 if(num<1000)
 {
  return '00'+num;
 }else{
  return ''+num;
 }
}

window.onload=function()
{
 var aImgs01=document.getElementById("today").getElementsByTagName('img');
 var aImgs02=document.getElementById("target").getElementsByTagName('img');
 
 function update()
 {
  var oDate=new Date();
  var str=''+oDate.getFullYear()+toDouble(oDate.getMonth()+1)+toDouble(oDate.getDate())+toDouble(oDate.getHours())+toDouble(oDate.getMinutes())+toDouble(oDate.getSeconds());  
  
  
  //倒计时
  var cyear=oDate.getFullYear(); //获取当前年份
  var targetyear=2020; //目标年份
  var targetmonth=2; //目标月份
  var targetdate=20; //目标日期
  var k=targetyear-cyear;
  var month2_days=new Array(); //各年二月天数
  var year_days=new Array();  //各年一年天数  
    
  var i=0;
  for(i=0;i<=k;i++)
  {
   if((cyear+i)%4==0&&(cyear+i)%100!=0||(cyear+i)%400==0){
   year_days[i]=366;
   month2_days[i]=29;
   }else{
   year_days[i]=365;
   month2_days[i]=28; 
   }   
  }
  
  var total_year_days=0; //所有完整年的总天数(不包括目标年)
  for(i=0;i<k;i++)
  {
   total_year_days+=year_days[i]; 
  }  
  
  //计算当前年的过去的天数
  var cmonth=oDate.getMonth(); //获得当前月份
  var cdate=oDate.getDate(); //获取当前日期
  var firstyear_days=cdate; //当前年份已过去的天数
  
  var firstyear_Monthdays=[31,month2_days[0],31,30,31,30,31,31,30,31,30,31];   //第一年月份的天数数组
  var i=0;
  for(i=0;i<cmonth;i++)
  {
   firstyear_days+=firstyear_Monthdays[i]; 
  }
  
  //计算目标年的天数
  var endyear_month=targetmonth; //目标年的月份
  var endyear_days=targetdate; //目标年的日期
  var endyear_Monthdays=[31,month2_days[k],31,30,31,30,31,31,30,31,30,31];   //目标年月份的天数数组
  var i=0;
  for(i=0;i<(endyear_month-1);i++)
  {
   endyear_days+=endyear_Monthdays[i]; 
  }
  
  var display_days=total_year_days-firstyear_days+endyear_days;  //计算倒计时总天数
  
  
  //下面为计算所剩下的小时数
  var current_hours=oDate.getHours(); //获取当前小时数
  var target_hours=8; //倒计时目标小时数
  var s_hours=(24-current_hours)+target_hours; //显示出的所剩下的小时数
  /*alert(s_hours);*/
  
  //下面为计算所剩下的分钟数
  var current_mintues=oDate.getMinutes(); //获取当前分钟数  
  var target_mintues=0;  //倒计时目标分钟数  
  var s_mintues=(60-current_mintues)+target_mintues; //显示出的所剩下的分钟数
    
  //下面为计算所剩下的秒数
  var current_seconds=oDate.getSeconds(); //获取当前秒数
  var target_seconds=0; //倒计时目标秒数
  var s_seconds=(60-current_seconds)+target_seconds; //显示出的所剩下的小时数
    
  //下面为将所剩下的时分秒转秒数
  var total_seconds=s_hours*3600+s_mintues*60+s_seconds; //剩下的总秒数
    
  //下面为将总秒数转时分秒,parseInt取整
  var display_hours=parseInt(total_seconds/3600); 
  var display_mintues=parseInt((total_seconds-display_hours*3600)/60); 
  var display_seconds=total_seconds-display_hours*3600-display_mintues*60;
  
  var str2=''+toFour(display_days)+toDouble(display_hours)+toDouble(display_mintues)+toDouble(display_seconds);
  
  //今天的日期显示，晚上18点到早上8点显示蓝色，8点到12点绿色，其他红色
  var i=0;
  for(i=0;i<aImgs01.length;i++)
  {
   if(current_hours<8 || current_hours>18)
   {
    aImgs01[i].src="/imgs/"+str.charAt(i)+'.gif';
   }else if(current_hours>=8 && current_hours<=12)
   {
    aImgs01[i].src="/imgs/"+str.charAt(i)+'_A.gif';
   }else
   {
    aImgs01[i].src="/imgs/"+str.charAt(i)+'_p.gif';
   }
  }
  
  //倒计时显示，少于100天时，天数红色
  var s_days=toFour(display_days);
  var i=0;
  for(i=0;i<aImgs02.length;i++)
  {
   aImgs02[i].src="/imgs/"+str2.charAt(i)+'_A.gif';
   if(s_days<=100)
   {
    var j=0;
    for(j=0;j<4;j++)
    {
     aImgs02[j].src="/imgs/"+str2.charAt(j)+'_p.gif'; 
    }    
   }
  }
 }
 setInterval(update,1000);
 update();  
}

 </script>

这段代码放网页头部，网页中表格中插入的图片是数字0的图片，这段代码的关键就是定时刷新获得当前时间，将当前时间转字符串，再用charAt（）函数截取，更换图片img的scr源，当然还有闰年的判断和上下午时间的判断等。

网页中分两个表格，上面放的“今天时间”，id=today，下面是“倒计时”，目标时间自己设，好像写的2020.2.20，id=target。

里面定义数组的时候犯了个错new Array()写成了new array（），检查了半天，标记下。

闰年的判断，网上查的，有点忘了，也标记下，下面的代码是循环获得目标年份减去当前年份的天数和二月天数的数组，数组声明如下

var k=targetyear-cyear;
var month2_days=new Array(); //各年二月天数
var year_days=new Array();  //各年一年天数

代码：

for(i=0;i<=k;i++)
  {
   if((cyear+i)%4==0&&(cyear+i)%100!=0||(cyear+i)%400==0){
   year_days[i]=366;
   month2_days[i]=29;
   }else{
   year_days[i]=365;
   month2_days[i]=28; 
   }   
  }

——cyear当前年份