热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jQuery联动日历实现代码

首先还是感谢下妙味课堂录制的这一个日历联动的视频,正好整理下,方便需要的朋友
来看下效果图

一、先来说下功能:

1.点击“确定”显示日历
2。再次点击隐藏,或从DOM中删除这个日历。如些反复第一,和第二这两步。
3.让日历中显示当前月份日期(多少天,每天是多少号)。
4.让当前月份的日期和星期几对应.
5.让左边两边的日历关联起来。

二、再来说下HTML结构。

1.上面蓝色的是一个DIV,显示当前月分,和上月,下月。
2.下面的日期和星期,是用一个table结构存放数据。星期用thead,日期用:tbody存放。

三、功能展开分析:

3.1、前两个功能?
  让我想起使用JQUERY里面的toggle。很方便就可以解决。

3.2、让日历中显示当前月份日期数?
  既然跟日期有关的,肯定会想起Deta这个对象了。在这个对象中,我们可以获取或设某年,某天,某月,某日,某星期几。但就是不能直接获取这一个月中有多少天。?怎么办呢?
  所以我们只能用判断了。根据当前月份的数值。来把天数存到一个变量当中。(对象获取到的当前月份要+1。国它是从零开始计算的).
  比如现在是五月,根据判断,五月是大,所以变量中就存31这个数值;即这个月有31天。

3.3、让当前月份的日期和星期几对应.??
  这个问题,解决办法就是,获取到当月一号,对应的星期几。后面的就可以依次排列下去了。这里的依次排列,我理解的是,因为存放日期的都是TD标签,在TBODY里面这些TD的索引,都是排列好的,所以把一号插入到那个TD当中,后面的二号,就会插入到后一个TD当中了。

3.4、让左边两边的日历关联起来。

  这里重点是“关联”:我最近写了“倒计时”,再就是这次的"联动日历",还有让我想起了“联动下拉菜单”,比如省份和市的联动下拉菜单;这些都涉汲到“联动”.
  我总结了一下,就是需要“联动”的东西,必定有一个“点”(先这么叫吧),其它需要变化,都要和这个点相关联起来,这样改变这个点,其它和这个点关联的东西,也就都会发生改变,也就实现了“联动”这一效果。

  比如,上次的“倒计时”,里面的“点”,就是当前时间和设定以后时间,之前相差的"总毫秒数"。倒计时显示的,时,分,秒,都和这个"总毫秒数"有关联,只要这个“总毫秒数”变化,那么时,分,秒,都会变化,这就是"联动"了.

  这次的日历联动,里面的"点",就是当前创建日期对象后,获得的年,月。根据这个年,月,来去设置右边,即下个月该显示的东西。那么只要当前获取的年,月,有变化,后面的自然也会变化。也就“联动”了。
  当然里面还是有点小多细节,处理。

四、上代码,太长了,所以只放了结构,里面的内容可以下载文章最后的DEMO
代码如下:

$(function(){
var nowDate = $(".nowDate"), //左边的日历盒子
nextDate = $(".nextDate"), //右边的日历盒子
lstrTd = "", //左日期的行的DOM结构
rstrTd = "", //右日期的行的DOM结构
lrows = 0, //左日期行数
rrows = 0, //右日期行数
iHtmlNow = "", //左边的日历结构
iHtmlNext = "", //右边的日历的结构
nowTitleDateY = "", //左边标题年份
nowTitleDateM = "", //左边显示的月份
nowlastM = "", //左边的翻月显示
nextTitleDateY = "", //右边标题年份
nextTitleDateM = "", //右边显示的月份
nextLastM = "", //右边的翻月显示
creatbtu = true, //只创建一次HTML结构的开关
NumDay = 0, //左边每个月的天数;
rNumDay = 0, //左边每个月的天数;
lfday = 0, //左边当前月份的第一天,是星期几
rfday = 0; //右边当前月份的第一天,是星期几
//创建日期行
function creatTr(l,r){
}
/*创建当前和下一个月的日期和年份
*这里分三种情况,当前月为12月 当前月为11月,当前月为1月
*/
function getTitleDate(){
var odate = new Date();
//如果当前月是12月分,那么右边的月份,就应该是1月份
//如果当前月是11月分,那么右边的月份,就应该是1月份
//如果当前月是1月分,那么左边的月份,就应该是12月份
}
/*获取当前月份的一号,是星期几
*首先设置你创建日期对象的年份,月份,和你需要知道的日期数,把这些设置好之后,再使用getDay()方法,就可以获取你设置日期的,星期数了;
*/
function getfirstD(m1,y1,m2,y2){
}
//根据大小月份取得天数
function getTdDay(m1,y1,m2,y2){
}
//根据传入的年份参数,判断是否是润年,即能够被4整除,但不能被100整除,同时满足时;或者能被400整除;
function isRunYear(y){
}
//创建HMTL结构
function creatHtml(creatbtu){
//根据当前月份的一号是星期几,来生成有几行存放所有日期
}
//将日期插入到对应的TD当中
function insertdate(d,t){
//插入到左边
//插入到边
}
//插入到DOM
function insertHtml(){
}
//从DOM中删除
function delHtml(){
}
//点击确定显示或隐藏日历
$("input[type=button]").toggle(function(){
//加这个判断是防止连续点击确定按钮
if(!nowDate.add(nextDate).is(":animated")&&nowDate.add(nextDate).is(":empty")){
//获得标题上面的年份和月份
getTitleDate();
//获得左和右的月份的天数
getTdDay(nowTitleDateM,nowTitleDateY,nextTitleDateM,nextTitleDateY);
//获得左和右的月份一号是星期几
getfirstD(nowTitleDateM,nowTitleDateY,nextTitleDateM,nextTitleDateY);
//创建HTML结构
creatHtml();
//将结构插入到DOM当中
insertHtml();
//插入日期到左和右的表格TD当中
insertdate(lfday,rfday);
//展开日期
nowDate.add(nextDate).slideDown(200);
}
},function(){
//加这个判断是防止连续点击
if(!nowDate.add(nextDate).is(":animated")){
//收起日历
nowDate.add(nextDate).slideUp(200);
//从DOM中删除日历结构
delHtml();
}
});
})

4.1分析下这代码结构看注解就可以明白的,以下几个步骤:
  1.获得当前年份,月份(联动的“点”)
  2.获得左边和右边对应月份的天数;
  3.获得左边和右边月分当中一号,分别对应的是星期几
  4.有了以上东西,我们就可以创建HTML结构了(因为要根据月份当中的日期排列,来决定,创建五行,还是六行。来显示日期)
  5.将创建好的结构,插入到DOM当中
  6.再将获得的天数,也就是日期数,插入到对应的表格存放日期的TD当中;

五、总结

  1.不用把TR分行处理,只接把tbody里面的td做为一个整体的数组,往里面插入数据;(因为显示的是数字,正好可以和)

  2.“联动”的规则

  3.像这种类似插入很多数据的东西,要用循解决。

  4。像这种数据多的,应该先存放到数组中(因为本例显示的是数字,所以可以直接用循环里面的变量,如果是值,要先存放到数组中,根据索引取出来)

在线演示:http://demo.jb51.net/js/2012/mycalendar/
DEMO下载:mycalendar_jb51.rar



推荐阅读
  • 本文详细介绍了如何解决Uploadify插件在Internet Explorer(IE)9和10版本中遇到的点击失效及JQuery运行时错误问题。通过修改相关JavaScript代码,确保上传功能在不同浏览器环境中的一致性和稳定性。 ... [详细]
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
  • 本文介绍了一段使用jQuery实现的用户注册页面表单验证代码,适用于前端开发人员学习和参考。该示例结合了HTML、CSS和JavaScript,确保用户输入的数据格式正确。 ... [详细]
  • jQuery HooRay:一款自创的实用 jQuery 工具插件
    这款插件主要由作者在工作中积累的常用功能开发而成,旨在解决现有插件间的冲突及浏览器兼容性问题。通过整合和优化现有插件,确保其稳定性和高效性。 ... [详细]
  • 在现代Web应用中,当用户滚动到页面底部时,自动加载更多内容的功能变得越来越普遍。这种无刷新加载技术不仅提升了用户体验,还优化了页面性能。本文将探讨如何实现这一功能,并介绍一些实际应用案例。 ... [详细]
  • 在网站制作中随时可用的10个 HTML5 代码片段
    HTML很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单。在这篇文章中,我收集了10个超有用的HTML代码片段,有HTML5启动模板、空白图片、打电话和发短信、自动完 ... [详细]
  • 基于JQuery实现的评分插件
    本文介绍了一个使用JQuery创建的交互式评分控件。当用户将鼠标悬停在星星上时,左侧的星星会变为实心,右侧保持空心,并显示对应的评分等级;移开鼠标后,所有星星恢复为空心状态。 ... [详细]
  • 本文探讨了如何利用jQuery在客户端实现页面跳转,并详细介绍了如何确保页面在浏览器的顶层窗口中打开,而不是局限于当前框架内。 ... [详细]
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • 在PHP后端开发中遇到一个难题:通过第三方类文件发送短信功能返回的JSON字符串无法解析。本文将探讨可能的原因并提供解决方案。 ... [详细]
  • 本文详细介绍了如何在Kendo UI for jQuery的数据管理组件中,将行标题字段呈现为锚点(即可点击链接),帮助开发人员更高效地实现这一功能。通过具体的代码示例和解释,即使是新手也能轻松掌握。 ... [详细]
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • Spring Boot 中静态资源映射详解
    本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ... [详细]
  • 本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化,使用户界面更加友好和美观。 ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
author-avatar
家具销售_903
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有