基于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程序设计有所帮助。
基于jQuery日历插件制作日历的更多相关文章
- 基于jquery 移动插件的实现
引用谢灿勇 地址 http://www.cnblogs.com/st-leslie/p/6002148.html 一个思路分析:大致上实现的思路有以下两种. 一.判断块是否被按下(mousedown ...
- 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
- 基于JQuery.timer插件实现一个计时器
基于JQuery.timer插件实现一个计时器,需要的朋友可以参考下. 先去官网下载jQuery Timers插件 ,然后引用到html中.这里是1.2 version 复制代码代码如下: < ...
- 基于 jQuery Jcrop 插件的功能模块:头像剪裁
/** Jcrop version: 0.9.12 jQuery version: 1.9.0 Author: 小dee Date: 2014.10.30 */ 先看看他山之石:博客园的头像模块也是使 ...
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- 一款基于jQuery带事件记录的日历插件
之前我们也已经分享过不少jQuery日历插件,有些应用了CSS3的特性,外观就特别漂亮.今天要分享的这款jQuery日历插件不仅有着绚丽的外观,而且带有日期事件记录功能,点击日期即可展开事件记录窗口, ...
- 自己动手写插件底层篇—基于jquery移动插件实现
序言 本章作为自己动手写插件的第一篇文章,会尽可能的详细描述一些实现的方式和预备知识的讲解,随着知识点积累的一点点深入,可能到了后期讲解也会有所跳跃.所以,希望知识点不是很扎实的读者或者是初学者,不要 ...
- 编写基于jQuery的插件的方法
注意:jQuery中有一个extend的方法,这个方法是添加js对象字段的,下面会多次用到 1:添加全局类的方法 常用的ajax就是该类插件,下面要编写一个简单的加法和减法的基于jQuery的方法 $ ...
- 基于jquery分页插件
今天终于完成了基于jquery的分页插件的代码编写,也通过了功能测试,实现了分页功能:由于刚开始写jquery的插件,所以梳理逻辑的时间也很长,整个过程整整一周时间,今天终于搞完了,先将整个分页插件的 ...
随机推荐
- MySql环境变量配置
配置环境变量 前面步骤完成后安装好MySQL,为MySQL配置环境变量.MySQL默认安装在C:\Program Files下. 1)新建MYSQL_HOME变量,并配置:C:\Program Fil ...
- gitLab创建自己的私有库
一.创建私有库的流程简介 创建一个项目,留着后面的流程3制作私有库 在可以创建私有库的地方创建一个code repository, code repository是代码仓库,我们把代码上传到这个仓库. ...
- IntelliJ IDEA 2018.3(Ultimate Edition)激活方法
本因博主Windos10系统上IDEA 2017会出现自带输入法候选框不跟随光标的问题,故更新了IntelliJ IDEA 2018,当时官方发布虽然还是Beta版本,但是迫于输入中文累死眼睛的窘态下 ...
- python连接,操作 InfluxDB
准备工作 启动服务器 执行如下命令: service influxdb start 示例如下: [root@localhost ~]# service influxdb start Starting ...
- E - Guess the Root 拉格朗日差值法+交互
题目传送门 题意:告诉你存在一个未知项系数最高为10的$f(x)$,你最多可以有50次询问,每次询问给出一个$x'$,系统会返回你$f(x')$的值,你需要猜一个$x''$,使得$f(x'')=0$, ...
- django.core.exceptions.ImproperlyConfigured: The SECRET_KEY setting must not be empty
https://www.e-learn.cn/content/wangluowenzhang/165461 问题: I created a new project in django and past ...
- Mac 10.12安装Windows远程桌面工具Microsoft Remote Desktop
说明:之前Office自带的Windows远程桌面工具虽然简便,但是保存的服务器列表有限.而这个微软推出的自家工具可以完美解决这些问题. 下载: (链接:https://pan.baidu.com/s ...
- LINQ入门教程之各种标准查询操作符(一)
好久之前就想系统的学习下LINQ,好久之前…… 本篇文章主要介绍LINQ等的标准查询操作符,内容取自<LINQ高级编程>,后续还会介绍LINQ to XML ,LINQ to SQL. L ...
- hibernate的AnnotationHelloWorld
来龙去脉: 最开始sun这个土鳖设计了EJB2.0.EJB2.1那个时代.后来有人发现设计的很烂,不好用,就设计了hibernate,,人们发现用hibernate反而比EJB2.0.2.1好,hib ...
- Microsoft Power BI Desktop概念学习系列之Microsoft Power BI Desktop的下载和安装(图文详解)
不多说,直接上干货! 官网 https://powerbi.microsoft.com/zh-cn/downloads/ 这里,一般用126邮箱. 因为对于163这样的邮箱是不行. 欢迎大家,加入我的 ...