基于jQuery日历插件制作日历
这篇文章主要介绍了基于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
;
}
看起来还不错,但是这是一个插件,要写这么多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的
<script> $(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); }) </script>
再打开浏览器看看,现在的日历是长这样
打开手机日历看一看,现在是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
>
现在来给按键们都绑上点击事件,输入框绑上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程序设计有所帮助。
转载于:https://www.cnblogs.com/Anderson-An/p/9962886.html
基于jQuery日历插件制作日历相关推荐
- 基于jquery+php+mysql 制作 仿google日历记事
转载:基于jquery+php+mysql 制作 仿google日历记事 download: 本帖隐藏的内容 仿google日历记事.zip (33.55 KB, 下载次数: 0) 原帖地址:htt ...
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- 基于jquery fly插件实现加入购物车抛物线动画效果
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
- RPGMAKER游戏引擎基于JavaScript的插件制作(六)——重写方法(三):在场景(scenes)中创建精灵(Sprite)——复制式重写的实例教学
因为要开新坑了,准备连续更新把这个插件制作的坑填完,之后更新的是"可交互精灵--事件绑定教学","窗口(windows)教学","自动战斗AI实现-- ...
- 基于jQuery的插件扩展,主要用于识别浏览器内核与外壳的类型和版本
写了个基于jQuery的插件扩展,主要用于识别浏览器内核与外壳的类型和版本.可识别各种浏览器的内核,并已经支持多种国内主流浏览器. 费话不多说,上我的JavaScript代码:(文件名:jquery ...
- html日期选择器日历并记录事件,8个基于jQuery和HTML5的日历时钟插件
jQuery是一个当前依然非常流行的Web前端JavaScript框架,这次我们要分享的就是基于jQuery的日历时钟插件,部分日历插件还是基于HTML5技术实现的,因此动画效果都还不错.有兴趣的朋友 ...
- php html5日期插件,基于jQuery和HTML5的日历时钟插件 的图文详解
jQuery是一个当前依然非常流行的Web前端JavaScript框架,这次我们要分享的就是基于jQuery的日历时钟插件,部分日历插件还是基于HTML5技术实现的,因此动画效果都还不错.有兴趣的朋友 ...
- 用html和css制作日历,CSS3制作日历
前面使用了CSS3制作过Progress Bars.分页导航.Login栏.Search Box等等.今天一起和大家使用css3来制作一个日历效果,希望大家喜欢. 目标 今天我们的目标是制作如下面DE ...
- RPGMAKER游戏引擎基于JavaScript的插件制作(三)——重写方法预备知识教学
"重写方法"重写指的是对系统原函数的重写,重写方法的目的在于改变系统原函数的作用或者快速制作出与原函数功能类似的函数 3.1 什么是方法 其实这个应该属于语法上的知识,由于非常重要 ...
最新文章
- 【NLP机器学习基础】从线性回归和Logistic回归开始
- offer from university of edinburgh
- Attachment multiple read API - performance with regular expression
- NetBeans Java EE技巧#1 –数据库中的实体类
- C#中双问号、双冒号等几个特殊关键字
- 神奇 | 神奇,原来 Linux 终端下还有这两种下载文件方式
- C++提高部分_C++函数模板_案例_数组排序---C++语言工作笔记083
- 谷歌这个大杀器要让英伟达慌了,实战评测:TPU相比GPU简直又快又省
- 数据库基础知识——互动百科
- 三包围结构的字是什么样的_清桦学书之结构篇——包围结构。
- 学习Scala:孤立对象的实现原理
- unity SDK/NDK的下载
- 超大图片(4000×3000像素)的畸变矫正,python+OpenCV实现
- php+laravel 扫码二维码签到
- 史上最快最新最全倾斜摄影(ContextCapture)空三/建模、单机/集群硬件配置方案2018
- 京东月薪8万快递员:真正牛逼的人,都拥有这个特质
- unity中content size fitter组件不起作用
- windows 10中使用docker Client.Timeout exceeded while awaiting headers
- Python django 会议室管理系统
- iphone照片恢复至android,绝招!如何恢复苹果/安卓手机上误删的照片,详细教程奉上!...
热门文章
- 怎样在 Centos 6.8 中安装 Elasticsearch 5.2
- 关于Python对齐问题
- Qt组件中的双缓冲无闪烁绘图
- Swift - 操作表(UIActionSheel)的用法,也叫底部警告框
- 云中漫步 - 3:2013-4-27 微软云体验营北京站
- WebSVN(2.3.1版本)中文注释以及中文路径乱码的解决方法【未完待续】
- 下血本!Facebook AI 20万美金举办“图像匹配”大赛
- HTML MySQL实现登录注册_servlet+html+mysql实现登录注册功能
- 新突破!Swin-UNet:基于纯 Transformer 结构的医学图像分割网络
- 2021最新全球CS专业排名发布,CMU再夺榜首,清华和MIT并列