基于jQuery日历插件制作日历


Posted in Javascript onMarch 11, 2016

来看下最终效果图吧:

基于jQuery日历插件制作日历

是长得丑了一点,不要吐槽我-。-

首先来说说这个日历主要的制作逻辑吧:

·一个月份最多有31天,需要一个7X6的表格去装载

·如果知道了某个月份1号是星期几,这个月份有多少天,一个循环就可以显示某个月的日历了吧(眼睛都放光了*.*)

·加上一些控件让用户可以方便操作吧(比如可以输入年份、月份,可以点击选择年份、月份)

新建一个html文件,html结构:

<div class="container">
 <input type="text" value="" id="cal-input"/>
 <div class="cal-box">
 <table>
  <thead>
  <tr>
   <td class="sun">日</td>
   <td>一</td>
   <td>二</td>
   <td>三</td>
   <td>四</td>
   <td>五</td>
   <td class="sta">六</td>
  </tr>
  </thead>
  <tbody>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  </tbody>
 </table>
 </div>
</div>

再加点样式进去,打开浏览器看看效果:

thead td,tbody td{
  width: 20px;
  height: 20px;<br><span class="styles-clipboard-only"> 

 <span class="webkit-css-property">text-align: <span class="expand-element"><span class="value">center;</span></span></span></span>
 }
 thead td.sun,thead td.sta{
  color: #eec877;
 }
 tbody td{
  border: 1px solid #eee;
 }

 基于jQuery日历插件制作日历

看起来还不错,但是这是一个插件,要写这么多html的代码是不合理的,应该是在这个插件内部动态插入的,这样写也是为了直观演示。

要开始写JS代码了,现在要得知某月的1号是星期几,方便去遍历显示某月的日历出来,这里用到了蔡勒公式

PS:简单解释一下,蔡勒公式:var week = y + parseInt(y/4) + parseInt(c/4) - 2*c + parseInt(26*(m+1)/10) + d - 1;

c是年份的前两位,y是年份的后两份(2016年,c是20,y就是16),m是月份,d是日期,把week%7后得出的结果就是星期几
但是1,2月要当成上一年的13,14月进行计算,比如2016.2.3,就要换算成2015.14.3来使用蔡勒公式

week是正数和负数时求模是不一样的,负数时要 (week%7+7)%7,正数时直接求模 week%7,

还有得知道这个月份有多少天,1、3、5、7、8、10、12月是31天,4、6、9、11月是30天,2月分闰年和平年,平年是28天,闰年是29天,闰年是能被4整除但不能被100整除的,好了有了些前提下,还是能很快写出JS的

$(function(){
 var $td = $('tbody').find('td');
 
 var date = new Date(),
  year = date.getFullYear(),
  month = date.getMonth() + 1,
  day = date.getDate(),days;
 
 
 function initCal(yy,mm,dd){
  if(mm ==2 && yy%4 == 0 && yy%100 !==0 ){
  days = 28;
  }else if(mm == 1 || mm == 3 || mm == 5 || mm == 7 || mm == 8 || mm == 10 || mm == 12){
  days = 31;
  }else if(mm==4 || mm==6 || mm==9 || mm==11 ){
  days = 30;
  }else{
  days = 29;
  }
 
  var m = mm < 3 ? (mm == 1 ? 13 : 14): mm;
  yy = m > 12 ? yy - 1 : yy;
  var c = Number(yy.toString().substring(0,2)),
   y = Number(yy.toString().substring(2,4)),
   d = 1;
  //蔡勒公式
  var week = y + parseInt(y/4) + parseInt(c/4) - 2*c + parseInt(26*(m+1)/10) + d - 1;
 
  week = week < 0 ? (week%7+7)%7 : week%7;
 
  for(var i=0 ;i<42;i++){
  $td.eq(i).text('');
//清空原来的text文本
  }
 
  for(var i = 0;i < days; i++){
  $td.eq( week % 7 +i).text(i+1);


  }
 }
 
 initCal(year,month,day);
 })

再打开浏览器看看,现在的日历是长这样

基于jQuery日历插件制作日历

打开手机日历看一看,现在是16年3月,嗯,长得一毛一样(得意脸)

现在要添加一些控件进去,两个输入框和四个按键,按键是使用了iconfont,html代码如下:

<div class="container">
 <input type="text" value="" id="cal-input"/>
 <div class="cal-box">
 <div class="cal-control-box">
  <div class="wif iw-bofangqixiayiqu left"></div>
  <div class="wif iw-iconfont-bofang left"></div>
  <input type="" value=""/>
  <span>年</span>
  <input type="" value=""/>
  <div class="wif iw-iconfont-bofang right"></div>
  <div class="wif iw-bofangqixiayiqu right"></div>
 </div>
 <table>
  <thead>
  <tr>
   <td class="sun">日</td>
   <td>一</td>
   <td>二</td>
   <td>三</td>
   <td>四</td>
   <td>五</td>
   <td class="sta">六</td>
  </tr>
  </thead>
  <tbody>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  </tbody>
 </table>
 </div>
</div>

现在的日历是长这样子了

基于jQuery日历插件制作日历

现在来给按键们都绑上点击事件,输入框绑上change事件

//更改月份按钮
 $(document).on("click",".iw-iconfont-bofang",function(){
  if($(this).hasClass("left")){
  //判断加还是减
  if(month == 1 ){
   month = 12;
   year--;
  }else{
   month--;
  }
  }else{
  if(month == 12){
   month = 1;
   year ++;
  }else{
   month ++;
  }
  }
  initCal(year,month,day);
 })
 
 //更改年份
 $(document).on("click",".iw-bofangqixiayiqu",function(){
  if($(this).hasClass("left")){
  year--;
  }else{
  year++;
  }
  initCal(year,month,day);
 })
 //年份输入
 $(document).on("change","input.cal-year",function(){
  year = $(this).val();
  initCal(year,month,day);
 })
 
 //月份输入
 $(document).on("change","input.cal-month",function(){
  month = $(this).val();
  initCal(year,month,day);
 })

顺便在initCal()函数里面要把年份和月份的值用JQ的val()方法,放进input框里面就ok啦

结束语:这里呢并没有写成一个插件的形式,但是把这个日历的实现主要思路写好了,最近也是忙着写毕业论文,还有挺多东西想写下来分享的,总是感觉时间不够用,下次写一下怎么将这个日历写成一个chrome插件,就是下面这个

基于jQuery日历插件制作日历

希望本文所述对jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript实现焦点滚动图效果 具体方法
Jun 24 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
如何在node的express中使用socket.io
Dec 15 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
使用javascript做在线算法编程
May 25 Javascript
微信小程序如何调用json数据接口并解析
Jun 29 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
JS正则表达式常见函数与用法小结
Apr 13 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 #Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 #Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
Mar 11 #Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 #Javascript
Angularjs中使用Filters详解
Mar 11 #Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 #Javascript
JavaScript制作简单的日历效果
Mar 10 #Javascript
You might like
深入分析PHP引用(&amp;)
2014/09/04 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
javascript Demo模态窗口
2009/12/06 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
最佳JS代码编写的14条技巧
2011/01/09 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
垃圾回收器的相关知识点总结
2018/05/13 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
Python自定义类的数组排序实现代码
2016/08/28 Python
Python3中的json模块使用详解
2018/05/05 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
python处理大日志文件
2019/07/23 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
护理专业优质毕业生自荐书
2014/01/31 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
论语读书笔记
2015/06/26 职场文书
导游词之张家界
2019/10/31 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
python实现剪贴板的操作
2021/07/01 Python