zoukankan      html  css  js  c++  java
  • javascript简单的日历实现

    知识点:

      主要是对Date对象的使用。(下面的介绍内容来自网络)

      创建 Date 对象的语法:
        var myDate=new Date()
        Date 对象会自动把当前日期和时间保存为其初始值。
       参数形式有以下5种:
           new Date("month dd,yyyy hh:mm:ss");
         new Date("month dd,yyyy");
           new Date(yyyy,mth,dd,hh,mm,ss);
           new Date(yyyy,mth,dd);
           new Date(ms);

      注意:最后一种形式,参数表示的是需要创建的时间和GMT时间1970年1月1日之间相差的毫秒数。

      参数的含义如下:

      month:用英文表示月份名称,从January到December

      mth:用整数表示月份,从(1月)到11(12月)

      dd:表示一个月中的第几天,从1到31

      yyyy:四位数表示的年份

      hh:小时数,从0(午夜)到23(晚11点)

      mm:分钟数,从0到59的整数

      ss:秒数,从0到59的整数

      ms:毫秒数,为大于等于0的整数

      Date对象的方法: 

      getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。  
      getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。  
      getMonth() 从 Date 对象返回月份 (0 ~ 11)。  
      getFullYear() 从 Date 对象以四位数字返回年份。 
      getYear() 请使用 getFullYear() 方法代替。 
      getHours() 返回 Date 对象的小时 (0 ~ 23)。  
      getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。  
      getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。  
      getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。  
      getTime() 返回 1970 年 1 月 1 日至今的毫秒数。  
      getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。  
      getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。  
      getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。  
      getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11)。  
      getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份。  
      getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23)。  
      getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。 
      getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。  
      getUTCMilliseconds() 根据世界时返回 Date 对象的毫秒(0 ~ 999)。  
      parse() 返回1970年1月1日午夜到指定日期(字符串)的毫秒数。 
      setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。 
      setMonth() 设置 Date 对象中月份 (0 ~ 11)。  
      setFullYear() 设置 Date 对象中的年份(四位数字)。  
      setYear() 请使用 setFullYear() 方法代替。  
      setHours() 设置 Date 对象中的小时 (0 ~ 23)。  
      setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。  
      setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。  
      setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。  
      setTime() 以毫秒设置 Date 对象。  
      setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。  
      setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。  
      setUTCFullYear() 根据世界时设置 Date 对象中的年份(四位数字)。  
      setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。  
      setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。  
      setUTCSeconds() 根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。  
      setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。  
      toSource() 返回该对象的源代码。  
      toString() 把 Date 对象转换为字符串。  
      toTimeString() 把 Date 对象的时间部分转换为字符串。  
      toDateString() 把 Date 对象的日期部分转换为字符串。 
      toGMTString() 请使用 toUTCString() 方法代替。 1 3 
      toUTCString() 根据世界时,把 Date 对象转换为字符串。   
      toLocaleString() 根据本地时间格式,把 Date 对象转换为字符串。  
      toLocaleTimeString() 根据本地时间格式,把 Date 对象的时间部分转换为字符串。 
      toLocaleDateString() 根据本地时间格式,把 Date 对象的日期部分转换为字符串。 
      UTC() 根据世界时返回 1997 年 1 月 1 日 到指定日期的毫秒数。 
      valueOf() 返回 Date 对象的原始值。  
      var objDate=new Date([arguments list]);

    简单日历实现:

    效果:

     代码:

      1 <style>
      2 #calendar{
      3     font-size: 12px;
      4 }
      5 #calendar tbody td{
      6     background:#033;
      7     color: #fff;
      8     text-align: center;
      9     padding: 2px;
     10 }
     11 .detail{
     12     text-align:center;
     13 }
     14 </style>
     15 测试值:<input id="calendar_value" name="" type="text" /><br />
     16 <button id="cal_prev">上一月</button>
     17 <button id="cal_next">下一月</button>
     18 <button id="cal_preyear">上一年</button>
     19 <button id="cal_nextyear">下一年</button>
     20 <button id="cal_today">今天</button>
     21 <div id="calendar" style="position:absolute;"></div>
     22 
     23 <script>
     24 
     25 var Calendar=function(year,monthNum,parent){
     26     this.year=year;
     27     this.parent=parent;
     28     this.monthNum=monthNum-1;
     29     function isLeapYear(y){
     30         return (y>0)&&!(y%4)&&((y%100)||!(y%400));    
     31     }
     32     this.numDays=[31,isLeapYear(this.year)?29:28,31,30,31,30,31,31,30,31,30,31][this.monthNum];
     33     this.weekDays=["","","","","","",""];
     34     this.nowDate=new Date;
     35     this.init();
     36 }
     37 
     38 Calendar.prototype={
     39     setMonthNum:function(monthNum){
     40         this.monthNum=monthNum-1;
     41     },
     42     getMonthNum:function(){
     43         return this.monthNum+1;
     44     },
     45     setYearNum:function(year){
     46         this.year=year;
     47     },
     48     getYearNum:function(){
     49         return this.year;    
     50     },
     51     init:function(){
     52         this.setup(this.parent);    
     53     },
     54     reflesh:function(){
     55         this.setup(this.parent);            
     56     },
     57     setup:function(id){    
     58         var date=this.nowDate;
     59         var cal=document.getElementById(id);
     60         cal.innerHTML="";
     61         var calDiv=document.createElement("div");
     62         var tab=document.createElement("table");
     63         cal.appendChild(calDiv);
     64         calDiv.innerHTML=this.getSummary();
     65         cal.appendChild(tab);        
     66         calDiv.className="detail"
     67         this.thead=document.createElement("thead");
     68         this.tbody=document.createElement("tbody");
     69         this.tfoot=document.createElement("tfoot");    
     70         this.tr=document.createElement("tr");
     71         this.td=document.createElement("td");
     72         
     73         tab.appendChild(this.thead);
     74         tab.appendChild(this.tbody);
     75         this.setThead();
     76         this.create();
     77         
     78     },
     79     setThead:function(){
     80         var day=this.weekDays;
     81         var tr=this.tr.cloneNode(true);
     82         this.thead.appendChild(tr);
     83         for(var i=0;i<7;i++){
     84             var td=this.td.cloneNode(true);
     85             tr.appendChild(td);
     86             td.innerHTML=day[i];
     87         }
     88     },
     89     create:function(){
     90         var day=new Date(this.year,this.monthNum,1);
     91         var tr=this.tr.cloneNode(true);
     92         var dayCount=this.numDays;
     93         var that=this;
     94         
     95         that.tbody.appendChild(tr);        
     96         for(var j=0;j<day.getDay();j++){
     97             var td=that.td.cloneNode(true);
     98             tr.appendChild(td);
     99             td.innerHTML="&nbsp;";
    100         }
    101         for(var i=1;i<=dayCount;i++){            
    102             if((j+i)%7-1==0){
    103                 tr=that.tr.cloneNode(true);                
    104                 that.tbody.appendChild(tr);                
    105             }
    106             var td=that.td.cloneNode(true);
    107             var s=i;
    108             if(i==that.nowDate.getDate()){
    109                 s="<font color='red'>"+i+"</font>";    
    110             }
    111             td.innerHTML=s;            
    112             td.style.cursor="pointer";
    113             td.onclick=function(){
    114                 document.getElementById("calendar_value").value=(that.getYearNum()+"/"+that.getMonthNum()+"/"+this.innerHTML)    
    115             }
    116             td.onmouseover=function(){
    117                 this.style.background="#fff";
    118                 this.style.color="#033"
    119             }
    120             td.onmouseout=function(){
    121                 this.style.background="";
    122                 this.style.color="#fff"
    123             }
    124             tr.appendChild(td);    
    125         }
    126     },
    127     getSummary:function(){
    128         var date=this.nowDate;
    129         return     this.year+""+(this.monthNum+1)+""+date.getDate()+"";
    130     }
    131 }
    132 var cal=new Calendar(2013,5,"calendar");
    133 cal.init();
    134 
    135 document.getElementById("cal_prev").onclick=function(){
    136     cal.monthNum--;
    137     if(cal.getMonthNum()<1){
    138         cal.setMonthNum(12);
    139         cal.year--;
    140     }    
    141     cal.reflesh();
    142 }
    143 document.getElementById("cal_next").onclick=function(){
    144     cal.monthNum++
    145     if(cal.getMonthNum()>12){
    146         cal.setMonthNum(1);
    147         cal.year++;
    148     }    
    149     cal.reflesh();
    150 }
    151 document.getElementById("cal_today").onclick=function(){
    152     cal.setYearNum((new Date).getFullYear());
    153     cal.setMonthNum((new Date).getMonth()+1)
    154     cal.reflesh();
    155 }
    156 document.getElementById("cal_preyear").onclick=function(){
    157     cal.setYearNum(cal.getYearNum()-1);
    158     cal.reflesh();
    159 }
    160 document.getElementById("cal_nextyear").onclick=function(){
    161     cal.setYearNum(cal.getYearNum()+1);
    162     cal.reflesh();
    163 }
    164 </script>

    总结:

      以上代码未加注释,写得有点急。以后再整理一下,许多功能未实现。

  • 相关阅读:
    ajax
    异步加载js的方法
    node的特点,优缺点及应用场景
    ajax面试题
    jQuery实现手风琴效果
    jQuery简介
    原型
    string 对象属性和方法
    函数声明和函数表达式
    JavaScript 基本语法
  • 原文地址:https://www.cnblogs.com/wengxuesong/p/3095372.html
Copyright © 2011-2022 走看看