首页
所有分类
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 相关文章推荐
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
JavaScript获得当前网页来源页面（即上一页）的方法
Apr 03 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
JS返回顶部实例代码
Aug 09 Javascript
小程序关于请求同步的总结
May 05 Javascript
功能完善的小程序日历组件的实现
Mar 31 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
Master(1) 封装(1) 主从复制(1) variables(1) Slave(1) ESXI(1) 表约束(2) transaction(1) PyAutoGUI(1) 百度地图(1)
You might like
PHP和XSS跨站攻击的防范
2007/04/17 PHP
PHP 全角转半角实现代码
2010/05/16 PHP
php INI配置文件的解析实现分析
2011/01/04 PHP
php define的第二个参数使用方法
2013/11/04 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
一文读懂vue动态属性数据绑定（v-bind指令）
2020/07/20 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
python3 图片referer防盗链的实现方法
2018/03/12 Python
python ddt实现数据驱动
2018/03/14 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
python实现最短路径的实例方法
2020/07/19 Python
django使用channels实现通信的示例
2020/10/19 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
Myprotein瑞士官方网站：运动营养和健身网上商店
2019/09/25 全球购物
铭立家具面试题
2012/12/06 面试题
类和结构的区别
2012/08/15 面试题
毕业生自我推荐
2013/11/04 职场文书
党课培训心得体会
2014/09/02 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
python内置进制转换函数的操作
2021/06/02 Python