登录
当前位置： 首页 > 编程笔记 >

javascript实现2016新年版日历

敖涵容
2023-03-14
本文向大家介绍javascript实现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="下一年">&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); // 月份天数数组
  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;
}
 类似资料：
  • 分割日期从. CSV文件： 1/16/2016到年： 2016，日： 16，月： 1

    我有一本书。包含以下列的csv文件：名称、日期、信息、统计信息、更多信息 我想进口这个。csv文件（使用Python 3.6代码或Pandas） 然后我需要过滤列：NAME，DATE，INFO 这是我有麻烦的地方，我需要采取我的. csv文件的'日期'列，其中列出了一个日期为1/16/2016，并将其分开，这样我就可以只选择月份为我的过滤. csv输出文件。 我最后要读的专栏，比如名字、月份、信息

  • 2016年4月22日的日期格式？[副本]

    类似于: 2016年4月1日 2016年4月3日 2016年4月22日的日期格式将是什么 那么有没有API可以这样解析日期呢？ 编辑：重复的问题不包含任何关于分析日期1(st)、2(nd)、3(rd)的答案。我不知道如何分析第1中的st,第2中的nd和第3中的rd。

  • 2016-11-14 更新日志 v2.9.1

    爱客服V2.9.1版本更新 Hello，三周未见，又到了爱客服更新的日子，不知各位周末是否愉快，明天便是工作日，在新的一周到来之前，爱客服如期为大家带来了V2.9.1的系统更新，至于为什么不是V3.0，因为V3.0这样的大招是需要憋一阵的，我们将对UI、系统后台、知识库等关键功能做一次系统性迭代，从而较好的提升客服系统的实用属性及易用属性，所以还请各位保持期待，爱客服将一如既往的不断优化，如果有任

  • Cocos2dx，Google Play警告和OpenSSL易受攻击版本2016年3月新警告

    我们一直在开发游戏Cocos2DX，我们收到了谷歌女巫的警告： 本邮件末尾列出的您的应用程序使用的OpenSSL版本包含一个或多个安全漏洞。请尽快将您的应用迁移到OpenSSL 1.02f/1.01r或更高版本，并增加升级后的APK的版本号。从2016年7月11日开始，Google Play将阻止发布任何使用旧版本OpenSSL的新应用或更新。如果您使用捆绑了OpenSSL的第三方库，您需要将其升

  • javascript年、月、日倒计时

  • 附录 B - 历史 (至2016年1月)

    迁移到Github 这篇文章已经在github上作为一个仓库创建了，这样它可以很容易地被分享、更新、提高。它是从这里复制过来的。http://samizdat.mines.edu/howto/HowToBeAProgrammer.htm by Braydie Grove。 2016年1月迁移到github。 希望反馈或扩展。 请将你对这篇文章的任何评论发给我，我会考虑所有的建议，大部分都会对这篇文

相关阅读

JavaScript实现简单日历效果Android日期选择器实现年月日三级联动原生javascript实现自动更新的时间日期JavaScript实现简单的日历效果更新日期+一年在mysql中

相关文章

2023年9月4日4399笔试北京新道科技 日常实习2023年3月18日百度群面数新网络前端日常实习一面中国青年出版社视觉设计面试

相关问答

Javascript Date（）按日、月、年计算年龄工作现在（2016年06/2016）是否仍有不使用访问令牌获取instagram feed的方法？2016年在GitHub wiki中嵌入SVG图像使用AD FS 4.0（2016）或更高版本获取新刷新令牌JavaScript中两个日期（年、月、日）之间的差异

相关工具

新浪微博SDK C++ codeblocks版本年会抽奖程序《Redis 设计与实现》实时更新的曲线图《Apache Spark 设计与实现》

相关文档

人月神话（二十周年纪念版）Gradle 实战中文版现代 JavaScript 教程JavaScript 高级程序设计（第3版）JavaScript 编程精解 中文第三版
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.