基于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中强制执行toString()具体实现
Apr 27 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
javascript中setInterval的用法
Jul 19 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
使用开源工具制作网页验证码的方法
Oct 17 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
在vue项目中引用Iview的方法
Sep 14 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
js实现每日签到功能
Nov 29 Javascript
layui实现数据分页功能
Jul 27 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 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设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
php多文件上传实现代码
2014/02/20 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
详解Python pygame安装过程笔记
2017/06/05 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
Python的logging模块基本用法
2020/12/24 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
岗位职责定义及内容
2013/11/08 职场文书
制冷与电控专业应届生求职信
2013/11/11 职场文书
法律专业实习鉴定
2013/12/22 职场文书
工作表扬信的范文
2014/01/10 职场文书
促销活动总结模板
2014/07/01 职场文书
人力资源管理求职信
2014/08/07 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js