欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript實(shí)現(xiàn)2016新年版日歷

 更新時(shí)間：2016年01月25日 17:15:27   作者：馬富天  
這篇文章主要為大家介紹了javascript實(shí)現(xiàn)2016新年版日歷的詳細(xì)代碼，感興趣的小伙伴們可以參考一下

先看看效果圖，效果比較簡(jiǎn)單：

具體代碼：

<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="下一年">&gt;&gt;</span> 
        <span class="next_month" id="next_month" title="下一月">&gt;</span>  
        <span class="prev_month" id="prev_month" title="上一月">&lt;</span>  
        <span class="prev_year" id="prev_year" title="上一年">&lt;&lt;</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代碼     

// 判斷是否為閏年
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); // 月份天數(shù)數(shù)組
  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);  // 表格所需行數(shù)     
  var calendarBody="";
  for(var i=0;i<lines;i++){
    calendarBody+="<tr class='line'>";
    for(var j=0;j<7;j++){
      idx=i*7+j; //  單元格自然序列號(hào)
      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;
}

相關(guān)文章

  • javascript正則表達(dá)式中分組詳解

    javascript正則表達(dá)式中分組詳解

    這篇文章主要介紹了javascript正則表達(dá)式中分組的相關(guān)資料,包括捕獲性分組和非捕獲性分組,需要的朋友可以參考下
    2016-07-07
  • php main 與 iframe 相互通訊類(js+php同域/跨域)

    php main 與 iframe 相互通訊類(js+php同域/跨域)

    這篇文章主要介紹了php main 與 iframe 相互通訊類(js+php同域/跨域),需要的朋友可以參考下
    2017-09-09
  • JS Pro-深入面向?qū)ο蟮某绦蛟O(shè)計(jì)之繼承的詳解

    JS Pro-深入面向?qū)ο蟮某绦蛟O(shè)計(jì)之繼承的詳解

    一般的面向?qū)ο蟪绦蛘Z(yǔ)言，有兩種繼承方法——接口繼承（interface inheritance）和實(shí)現(xiàn)繼承（implementation inheritance）。接口繼承只繼承方法簽名，而實(shí)現(xiàn)繼承則繼承實(shí)際的方法。在JavaScript中，函數(shù)沒(méi)有簽名，所以在JavaScript只支持實(shí)現(xiàn)繼承，而且主要是依靠原型鏈（prototype chaining）來(lái)是實(shí)現(xiàn)的
    2013-05-05
  • js實(shí)現(xiàn)雙人五子棋小游戲

    js實(shí)現(xiàn)雙人五子棋小游戲

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)雙人五子棋小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-05-05
  • javascript判斷復(fù)選框是否選中的方法

    javascript判斷復(fù)選框是否選中的方法

    這篇文章主要介紹了javascript判斷復(fù)選框是否選中的方法，需要的朋友可以參考下
    2015-10-10
  • 如何實(shí)現(xiàn)axios的自定義適配器adapter

    如何實(shí)現(xiàn)axios的自定義適配器adapter

    Axios是一個(gè)非常優(yōu)秀的基于promise的HTTP庫(kù)，可以用在瀏覽器和node.js中。并且提供了很多便捷的功能，但如果我們想基于axios 擴(kuò)展一些自己的數(shù)據(jù)請(qǐng)求方式（例如某些APP內(nèi)專屬的數(shù)據(jù)請(qǐng)求方式等），并能夠使用上axios提供的便捷功能，該怎么自定義一個(gè)適配器adapter
    2021-05-05
  • 詳解微信小程序緩存--緩存時(shí)效性

    詳解微信小程序緩存--緩存時(shí)效性

    這篇文章主要介紹了微信小程序緩存時(shí)效性，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • Bootstrap CSS組件之面包屑導(dǎo)航(breadcrumb)

    Bootstrap CSS組件之面包屑導(dǎo)航(breadcrumb)

    這篇文章主要為大家詳細(xì)介紹了Bootstrap CSS組件之面包屑導(dǎo)航(breadcrumb)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-12-12
  • js下拉菜單語(yǔ)言選項(xiàng)簡(jiǎn)單實(shí)現(xiàn)

    js下拉菜單語(yǔ)言選項(xiàng)簡(jiǎn)單實(shí)現(xiàn)

    大家對(duì)下拉菜單并不陌生吧，下面為大家介紹下使用js實(shí)現(xiàn)下拉菜單語(yǔ)言選項(xiàng)，具體實(shí)現(xiàn)如下，喜歡的朋友可以看看
    2013-09-09
  • 一文徹底理解js原生語(yǔ)法prototype,__proto__和constructor

    一文徹底理解js原生語(yǔ)法prototype,__proto__和constructor

    作為一名前端工程師,必須搞懂JS中的prototype、__proto__與constructor屬性,相信很多初學(xué)者對(duì)這些屬性存在許多困惑,容易把它們混淆,下面這篇文章主要給大家介紹了關(guān)于js原生語(yǔ)法prototype,__proto__和constructor的相關(guān)資料,需要的朋友可以參考下
    2021-10-10

最新評(píng)論