首页
所有分类
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 相关文章推荐
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
javascript进行数组追加方法小结
Jun 16 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
three.js 入门案例详解
Jan 23 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 Javascript
微信小程序实现拍照和相册选取图片
May 09 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) update(2) 全局锁(1) IP(1) 索引(8) 索尼ICF-36(1) tcp/ip(1) 备份(2) python小游戏(5) 德生2P3(1)
You might like
php用正则表达式匹配中文实例详解
2013/11/06 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
PHP预定义变量9大超全局数组用法详解
2016/04/23 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
使用PYTHON创建XML文档
2012/03/01 Python
最基础的Python的socket编程入门教程
2015/04/23 Python
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
Django单元测试工具test client使用详解
2019/08/02 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
numpy.array 操作使用简单总结
2019/11/08 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
HealthElement海外旗舰店：新西兰大卖场
2018/02/23 全球购物
W Hamond官网：始于1979年的钻石专家
2020/07/20 全球购物
四下基层实施方案
2014/03/28 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
法律顾问服务方案
2014/05/15 职场文书
社区活动策划方案
2014/08/21 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
小学新课改心得体会
2016/01/22 职场文书