javascript实现2016新年版日历


Posted in Javascript onJanuary 25, 2016

先看看效果图,效果比较简单:

javascript实现2016新年版日历

具体代码:

<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代码    

// 判断是否为闰年
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;
}
Javascript 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
jQuery中size()方法用法实例
Dec 27 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
ECMAScript6--解构
Mar 30 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
react build 后打包发布总结
Aug 24 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
基于javascript实现图片左右切换效果
Jan 25 #Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 #Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 #Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 #Javascript
jQuery中inArray方法注意事项分析
Jan 25 #Javascript
jquery ui dialog替代confirm实例分析
Jan 25 #Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 #Javascript
You might like
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
PHP分页效率终结版(推荐)
2013/07/01 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python设计模式之代理模式实例
2014/04/26 Python
python交互界面的退出方法
2019/02/16 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
软件配置管理有什么好处
2015/04/15 面试题
海洋科学专业求职信
2014/08/10 职场文书
普通话演讲稿
2014/09/03 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
初中政治教学工作总结
2015/08/13 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS