search

Home >Web Front-end >JS Tutorial >Javascript implementation of 2016 New Year calendar_javascript skills

Javascript implementation of 2016 New Year calendar_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:18:151159browse

Look at the renderings first, the effect is relatively simple:

Specific code: 

<html>
  <head>
    <title>javaScript日历</title>
    <meta charset="utf-8"/>
    <style type="text/css">
      *{
        margin:0;
        padding:0;
      }
 
      .calendar{
        width:300px;
        margin:100px auto;
        text-align:center;
        font-size:12px;
      }
       
      .calendar .wrap{
        width:100%;
        height:36px;
        line-height:36px;
      }
       
      .calendar .wrap .theYear{
         
      }
 
      .calendar .wrap .theMonth{
        color:#666;       
      }      
 
      .calendar .wrap span{
        font-size:24px;
        color: #DDD;
        cursor:pointer;
        font-family: Georgia, "Times New Roman", Times, serif;
      }
 
      .calendar .wrap span b:hover{        
        color: #777;
      }      
 
      .calendar .wrap .span{
        float:left;
      }
       
      .calendar .wrap .prev_year{
        float:right;
        margin-right:12px;
        font-family:"sans-serif";
        font-weight:bold;
        font-size:14px;
         
      }
 
      .calendar .wrap .next_year{
        float:right;
        font-family:"sans-serif";
        font-weight:bold;
        font-size:14px;
      }
 
      .calendar .wrap .prev_month{
        float:right;
        margin-right:12px;
        font-family:"sans-serif";
        font-weight:bold;
        margin-right:10px;
      }
 
      .calendar .wrap .next_month{
        float:right;
        font-family:"sans-serif";
        font-weight:bold;
        margin-right:10px;
      }      
 
      .calendar .wrap .next_year:hover,.calendar .wrap .prev_year:hover,
      .calendar .wrap .next_month:hover,.calendar .wrap .prev_month:hover{
        color:#999;
      }
 
      .calendar table{
        width:100%;
        border-collapse:collapse;
      }
       
      .calendar .header{
        background-color:#EEE;     
        font-family:"Microsoft YaHei"; 
      }
       
      .calendar .header td{
        cursor:default;
      }
     
      .calendar td{
        border:1px solid #CCC;
        line-height:36px;
        cursor:pointer;
      }
 
      .calendar td:hover{
        background-color:#EEE;
      }
       
      .calendar .empty{
        cursor:default;
      }
 
      .calendar .empty:hover{
        background-color:#FFF;
      }
       
      .calendar .today{
        background-color:#66BE8C;
        color:#FFF;
      }
 
      .calendar .today:hover{
        background-color:#66BE8C;
        color:#FFF;
      }      
 
    </style>
    <script src="jquery-1.8.2.js"></script>
    <script src="func.js"></script>
  </head>
  <body>
    <div id="calendar" class="calendar">
      <div class="wrap">
        <span class="span"><b id="theYear" class="theYear">2016</b>/<b id="theMonth" class="theMonth">1</b></span>
        <span class="next_year" id="next_year" title="下一年">>></span> 
        <span class="next_month" id="next_month" title="下一月">></span>  
        <span class="prev_month" id="prev_month" title="上一月"><</span>  
        <span class="prev_year" id="prev_year" title="上一年"><<</span>       
      </div>
      <table cellpadding="0" cellspacing="0">
        <tr class="header">
          <td>日</td>
          <td>一</td>
          <td>二</td>
          <td>三</td>
          <td>四</td>
          <td>五</td>
          <td>六</td>
        </tr>       
      </table>
    </div>
     
    <script type="text/javascript">  
 
      $("#prev_month").click(function(){       
        var theMonth=eval($("#theMonth").html());
        var theYear=eval($("#theYear").html());
        if(theMonth<=1){
          $("#theMonth").html("12");
          if(theYear<=1){
            $("#theYear").html(1);
          }else{
            $("#theYear").html(theYear-1);
          }
        }else{
          $("#theMonth").html(theMonth-1);  
        }
        cur_year=eval($("#theYear").html());
        cur_mon=eval($("#theMonth").html());
        $("#calendar table tr").not(".header").remove();
        $("#calendar table").append(createCalendar(cur_year,cur_mon));
        $("#calendar table tr").not(".header").hide().fadeIn(500);
      })
 
 
      $("#next_month").click(function(){
        var theMonth=eval($("#theMonth").html());
        if(theMonth>=12){
          var theYear=eval($("#theYear").html());
          if(theYear>=2200){
            $("#theYear").html(2200);  
          }else{
            $("#theYear").html(eval(theYear+1));
          }          
          $("#theMonth").html(1); 
        }else{
          $("#theMonth").html(eval(theMonth+1)); 
        }
        cur_year=eval($("#theYear").html());
        cur_mon=eval($("#theMonth").html());    
        $("#calendar table tr").not(".header").remove();
        $("#calendar table").append(createCalendar(cur_year,cur_mon));
        $("#calendar table tr").not(".header").hide().fadeIn(500);
      })
 
 
      $("#prev_year").click(function(){  
        var theYear=eval($("#theYear").html());
        if(theYear<=1){
          $("#theYear").html(1);         
        }else{
          $("#theYear").html(eval(theYear-1));
        }    
        cur_year=eval($("#theYear").html());
        cur_mon=eval($("#theMonth").html());
        $("#calendar table tr").not(".header").remove();
        $("#calendar table").append(createCalendar(cur_year,cur_mon));
        $("#calendar table tr").not(".header").hide().fadeIn(500);
      })
 
 
      $("#next_year").click(function(){  
        var theYear=eval($("#theYear").html());
        if(theYear>=2200){
          $("#theYear").html(2200);          
        }else{
          $("#theYear").html(eval(theYear+1));
        }    
        cur_year=eval($("#theYear").html());
        cur_mon=eval($("#theMonth").html());
        $("#calendar table tr").not(".header").remove();
        $("#calendar table").append(createCalendar(cur_year,cur_mon));
        $("#calendar table tr").not(".header").hide().fadeIn(500);
      })
 
      $("#calendar table").append(createCalendar());
 
    </script>
     
  </body>
</html>


JavaScript code 

// 判断是否为闰年
function IsLeapYear(year){
  if((year%400==0)||(year%4==0 && year%100!=0)){
    return true;
  }
  return false;
}
 
// 日历
function createCalendar(year,month,date){
  var d=new Date();          
  if(!year || year<=0){
    cur_year=d.getFullYear();  // 年份
  }else{
    cur_year=year;
  }
 
  if(!month || month<=0){
    cur_mon=d.getMonth();  // 日期     
  }else{
    cur_mon=month-1;
  }
 
  if(!date || date<=0){
    cur_date=d.getDate();  // 日期     
  }else{
    cur_date=date;
  }
 
  month_days=new Array(31,28+IsLeapYear(d.getFullYear()),31,30,31,30,31,31,30,31,30,31); // 月份天数数组
  month_firstday_date=new Date(cur_year,cur_mon,1);
  monthDays=month_days[cur_mon];     
  monthFirstday=month_firstday_date.getDay(); // 月份的第一天是星期几
  lines=Math.ceil((monthDays+monthFirstday)/7);  // 表格所需行数     
  var calendarBody="";
  for(var i=0;i<lines;i++){
    calendarBody+="<tr class='line'>";
    for(var j=0;j<7;j++){
      idx=i*7+j; //  单元格自然序列号
      if(i==0 && idx<monthFirstday){
        calendarBody+="<td class='empty'></td>";
      }else if(idx<monthDays+monthFirstday){
        var date=idx+1-monthFirstday;
        if(date==cur_date && cur_mon==d.getMonth() && cur_year==d.getFullYear()){
          calendarBody+="<td class='today'>"+date+"</td>";
        }else{
          calendarBody+="<td>"+date+"</td>";
        }
      }else{
        calendarBody+="<td class='empty'></td>";
      }
    }
    calendarBody+="</tr>";
  }
  return calendarBody;
}

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Directive in AngularJS implements lazy loading_AngularJSNext article：Directive in AngularJS implements lazy loading_AngularJS

Related articles

See more