JS之日历实践

在很多采集信息的过程中,日期的准确输入是一个重要的问题,因为日期在不同的地方以不同的格式表达。本例旨在应用于网页中,用户可通过鼠标点击向程序输入日期数据。

程序是这个样子的:首先采集用户输入的年份和月份,经过计算获取该月份的最大天数,并获取月份第一天是星期几。然后在表格中填充该月份的具体信息。

 

<html>
 <head>
  <title>日历测试</title>
  <script>

   function getMonthJuZhen(date){
    
    if(arguments.length == 0){
     throw new Error("need a date");
    }
    
    if(arguments[0] == null){
     throw new Error("date is null or undefined");
    }
    
    if(arguments[0] instanceof Date){
    
     var monthjuzhen = new Array(5);
     for(var r = 0 ; r < 5 ; r++){
      monthjuzhen[r] = [0,0,0,0,0,0,0];
     }
     
     var maxDay = getMaxDay(arguments[0]);
     arguments[0].setDate(1);
     var r = 0;
     var c = arguments[0].getDay();
     for(var d = 1 ; d <= maxDay ; d++){
      monthjuzhen[r][c] = d;
      if(c == 6){
       if(r == 4){
        r = 0;
       }
       else{
        r++;
       }
       c = 0;
      }
      else{
       c++;
      }
     }
     
     return monthjuzhen;
     
    }
    else{
     throw new Error("need a date");
    }
   }

   function getMaxDay(date){

    if(arguments.length == 0){
     throw new Error("need a date");
    }
    
    if(arguments[0] == null){
     throw new Error("date is null or undefined");
    }
    
    
    if(arguments[0] instanceof Date){
    
     var tempDate = new Date(arguments[0].toString());
     if(arguments[0].getMonth() == 11){
      tempDate.setFullYear((tempDate.getFullYear()+1));
      tempDate.setMonth(0);
     }
     else{
      tempDate.setMonth((tempDate.getMonth()+1));
     }
     return Math.floor((tempDate.getTime()-arguments[0].getTime())/(1000*60*60*24));
    }
    else{
     throw new Error("need a date");
    }
   }

   
   function updateDate(){
    var yearInput = document.getElementById("yearinput");
    var monthInput = document.getElementById("monthinput");
    try{
     var year = parseInt(yearInput.value);
     var month = parseInt(monthInput.value);
     if(isNaN(year)){
      if(isNaN(month)){
       monthInput.value = "";
      }
      yearInput.value = "";
      return;
     }
     if(isNaN(month)){
      monthInput.value = "";
      return;
     }
     if(month > 12 || month < 1){
      monthInput.value = "";
      return;
     }
     month--;
     var date = new Date(year,month);
     var monthjuzhen = getMonthJuZhen(date);
     var day;
     var dayvalue;
     for(var r in monthjuzhen){
      for(var c in monthjuzhen[parseInt(r)]){
       day = document.getElementById(r+"-"+c);
       dayvalue = monthjuzhen[parseInt(r)][parseInt(c)];
       if(dayvalue == 0){
        if(day.hasChildNodes()){
         day.removeChild(day.firstChild);
        }
        day.onmouseover = null;
        day.onmouseout = null;
        day.onclick = null;
        continue;
       }
       if(day.hasChildNodes()){
        day.firstChild.nodeValue = dayvalue;
       }
       else{
        day.appendChild(document.createTextNode(dayvalue));
       }
       day.setAttribute("date",year+"-"+month+"-"+dayvalue);
       day.onmouseover = function(){this.style.backgroundColor = "black";this.style.color = "white";};
       day.onmouseout = function(){this.style.backgroundColor = "white";this.style.color = "black"};
       day.onclick = subDate;
      }
     }
    }
    catch(e){
     alert(e);
    }
   }
   
   function subDate(){
    var date = this.getAttribute("date").match(/(/d+)-(/d+)-(/d+)/);
    alert(new Date(date[1],date[2],date[3]));
   }
   
   </script>
 </head>
 <body>
  <div><table style="background-color:white;">
    <tr>
     <td colspan="7">
      <input id="yearinput" type="text" size="4" MAXLENGTH="4" οnchange="updateDate()"/>年
      <input id="monthinput" type="text" size="2" MAXLENGTH="2" οnchange="updateDate()"/>月&nbsp;&nbsp;<span οnclick="updateDate()">更新</span></td>
    </tr>
     <tr>
               <td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td>
           </tr>
           <tr>
               <td id="0-0"></td><td id="0-1"></td><td id="0-2"></td><td id="0-3"></td><td id="0-4"></td><td id="0-5"></td><td id="0-6"></td>
           </tr>
           <tr>
               <td id="1-0"></td><td id="1-1"></td><td id="1-2"></td><td id="1-3"></td><td id="1-4"></td><td id="1-5"></td><td id="1-6"></td>
           </tr>
           <tr>
               <td id="2-0"></td><td id="2-1"></td><td id="2-2"></td><td id="2-3"></td><td id="2-4"></td><td id="2-5"></td><td id="2-6"></td>
           </tr>
           <tr>
               <td id="3-0"></td><td id="3-1"></td><td id="3-2"></td><td id="3-3"></td><td id="3-4"></td><td id="3-5"></td><td id="3-6"></td>
           </tr>
           <tr>
               <td id="4-0"></td><td id="4-1"></td><td id="4-2"></td><td id="4-3"></td><td id="4-4"></td><td id="4-5"></td><td id="4-6"></td>
           </tr>
       </table>
  </div>
 </body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值