首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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实现2016新年版日历

- Author -

马富天

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 手动给表增加数据的小例子
Jul 10 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
如何编写高质量JS代码(续)
Feb 25 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
安装vue-cli的简易过程
May 22 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
vue 解决数组赋值无法渲染在页面的问题
Oct 28 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
鉴频器(1) 灵敏度(1) 高放电路(1) 实习报告(1) 频偏(1) 原理(1) 频率(1) 发烧友(1) AM(1) 电路(15)
You might like
基于mysql的bbs设计（二）
2006/10/09 PHP
简单的过滤字符串中的HTML标记
2006/12/25 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
JavaScript 原型与继承说明
2010/06/09 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
小程序实现录音功能
2020/09/22 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
python分割和拼接字符串
2013/11/01 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
Django对models里的objects的使用详解
2019/08/17 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
马来西亚网上购物平台：ezbuy
2018/02/13 全球购物
英国派对礼服和连衣裙购物网站：TFNC London
2018/07/07 全球购物
合伙经营协议书范本（通用版）
2014/12/03 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
新闻通讯稿模板
2015/07/22 职场文书
学习党史心得体会2016
2016/01/23 职场文书
竞聘开场白方式有哪些？
2019/08/28 职场文书
基于python实现银行管理系统
2021/04/20 Python
canvas绘制折线路径动画实现
2021/05/12 Javascript
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers