jQuery实现日历效果


Posted in jQuery onSeptember 11, 2020

本文实例为大家分享了jQuery实现日历效果的具体代码,供大家参考,具体内容如下

jquery是用的是2.0版本。

1、html代码

<!DOCTYPE html>
<!--基于W3C标准 不用做任何修改-->
<html>
<!--起始标准-->
<head>
<!--设置初始化文档信息和文档管理标注-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--整个页面编码 utf-8 国际编码 通用性最强,GBK/gb2312 中文-->
<!--页面三要素-->
<title>显示详细签到详情</title>
<style>
* {
 margin: 0px;
 padding: 0px;
 font-size: 14px;
 font-family: '微软雅黑'
}
 
.signincalendar {
 
}
 
.signincalendar table {
 margin: 0 auto;
 border-radius: 0.5em;
 border: 1px solid #00D3D3;
 box-shadow: 0px 0px 7.5px 5px #00D3D3;
}
 
.signincalendar table tr {
 
}
 
.signincalendar table tr td {
 width: 50px;
 height: 34px;
 text-align: center;
 border: 1px solid black;
 border-radius: 0.5em;
 font-weight: bolder;
}
 
.signincalendar table tr.firsttr td, .signincalendar table tr.secondtr td
 {
 border: 0px;
}
 
table tr.secondtr td:nth-child(1) {
 color: #E13838;
 border-radius: 0px -1px 1px #FFFF68; 
}
 
table tr.secondtr td:nth-child(2) {
 color: orange;
 border-radius:0px -1px 1px #FFFF68;
}
 
table tr.secondtr td:nth-child(3) {
 color: #C2C200;
 border-radius:0px -1px 1px #FFFF68;
}
 
table tr.secondtr td:nth-child(4) {
 color: green;
 border-radius:0px -1px 1px #FFFF68;
}
 
table tr.secondtr td:nth-child(5) {
 color: #00D3D3;
 border-radius:0px -1px 1px #FFFF68;
}
 
table tr.secondtr td:nth-child(6) {
 color: blue;
 border-radius:0px -1px 1px #FFFF68;
}
 
table tr.secondtr td:nth-child(7) {
 color: purple;
 border-radius: 0px -1px 1px #FFFF68;
}
 
table tr td.cantsign {
 background: none repeat scroll 0% 0% #9B9B9B;
 color: #F2F2F2;
}
 
table tr.threetr td {
 background: #9AFAA0;
}
</style>
 
 
</head>
 
<body>
 <div data-role="content">
  <div class="signincalendar"></div>
 </div>
 <script type="text/javascript" src="jquery1.9.js"></script>
 <script type="text/javascript" src="mycanledar.js"></script>
</body>
</html>

2、以下是mycanledar.js的代码

// JavaScript Document
var nstr = new Date(); // 获取当前日期
var changedYear = nstr.getFullYear(); // 年份
var changedMonth = nstr.getMonth(); // 月份
var dnow = nstr.getDate(); // 今日日期
var n1str = new Date(changedYear, changedMonth, 1); // 当月第一天Date
var initfirstday = n1str.getDay(); // 当月第一天星期几
var daynumber = getMonthAllDay(changedMonth, changedYear);
showCanledar(changedMonth, initfirstday, dnow, daynumber);
reloadyear();
reloadmonth(1);
function reloadyear() {
 var initYearSelect = $("#currentyear option");
 initYearSelect.each(function() {
 
 if ($(this).val().substring(0, 4) == changedYear) {
  $(this).attr("selected", true);
 }
 });
}
 
function reloadmonth(isinit) {
 var initMonthSelect = $("#currentmonth option");
 initMonthSelect.each(function() {
 if (isinit == 1) {
  if ($(this).index() == changedMonth) {
  $(this).attr("selected",true);
  }
 } else {
  
  if ($(this).index() == changedMonth - 1) {
  $(this).attr("selected", true);
  }
 
 }
 
 });
}
 
// 是否为闰年
function is_leap(year) {
 return (year % 100 == 0 ? res = (year % 400 == 0 ? 1 : 0)
  : res = (year % 4 == 0 ? 1 : 0));
}
 
// 获得下拉列表的年
function getNewYear() {
 // alert("得到年");
 return $("#currentyear option:selected").text().substring(0, 4);
}
// 获得下拉列表的月
function getNewMonth() {
 // alert("得到月");
 return $("#currentmonth option:selected").text();
 
}
// 获取当月的天数
function getMonthAllDay(month, year) {
 var m_days = new Array(31, 28 + is_leap(year), 31, 30, 31, 30, 31, 31, 30,
  31, 30, 31);
 return m_days[month];
}
 
// 获得某年某月某日是星期几
function getFirstWeekDay(year, month, day) {
 var date = new Date();
 date.setFullYear(year);
 date.setMonth(month);
 date.setDate(day);
 return date.getDay();
}
 
// 获得表格行数
function requiredRows(allday, firstday) {
 var trstr = Math.ceil((allday + firstday) / 7);
 // alert("trstr"+trstr);
 return trstr;
}
/* 显示日历 */
function showCanledar(month, firstday, dnow, allday) {
 
 var rows = requiredRows(allday, firstday);
 var tb = "<table data-role='none' cellpadding='0px' cellspacing='3px' id='dates'>";
 tb += "<tr class='firsttr'><td colspan='7' align='center'>";
 tb += "<select data-role='none' id='currentyear'><option>2015</option><option>2016</option><option>2017</option><option>2018</option><option>2019</option><option>2020</option></select>";
 tb += "<select data-role='none' id='currentmonth'><option>01</option><option>02</option><option>03</option><option>04</option><option>05</option><option>06</option><option>07</option><option>08</option><option>09</option><option>10</option><option>11</option><option>12</option></select>";
 tb += "</td></tr>";
 tb += "<tr class='secondtr'>";
 tb += "<td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td>";
 tb += "</tr>";
 for (var i = 0; i < rows; i++) {
 tb += "<tr>";
 for (var k = 0; k < 7; k++) { // 表格每行的单元格
  var idx = i * 7 + k; // 单元格自然序列号
  var date_str = idx - firstday + 1; // 计算日期
  (date_str <= 0 || date_str > allday) ? tb+="<td style='background:#DBDBDB'> </td>"
   : tb += "<td>" +date_str + "</td>"; // 过滤无效日期(小于等于零的、大于月总天数的)
  // 打印日期:今天底色为红
  // 查询月签到情况
 
 
 }
 tb += "</tr>";
 // 表格的行结束
 }
 tb += "</table>"; // 表格结束
 $(".signincalendar").html(tb);
 
}
 
/** 改变年后触发事件,jquery1.9版本废除了live()方法,使用on代替* */
var reg = new RegExp("^[0-9]*$");
$(function() {
 $(document).on('change', '#currentyear',function() {
 changedYear = getNewYear(); 
 changedMonth = getNewMonth();
 commChanged();
 reloadyear();
 reloadmonth(0);
 });
 
 $(document).on('change','#currentmonth', function() {
 changedMonth = getNewMonth();
 commChanged();
 reloadyear();
 reloadmonth(0);
 });
 
});
 
function commChanged() {
 var firstweekday = getFirstWeekDay(changedYear, parseInt(changedMonth) - 1,
  1);
 // alert("firstweekday="+firstweekday);
 
 var allday = getMonthAllDay(parseInt(changedMonth) - 1, changedYear);
 // alert("allday="+allday);
 showCanledar(changedMonth, firstweekday, 9, allday);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
jquery实现简单每周轮换的日历
Sep 10 #jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 #jQuery
jQuery实现简单三级联动效果
Sep 05 #jQuery
如何基于jQuery实现五角星评分
Sep 02 #jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 #jQuery
Jquery $.map使用方法实例详解
Sep 01 #jQuery
JQuery基于FormData异步提交数据文件
Sep 01 #jQuery
You might like
一个php作的文本留言本的例子(二)
2006/10/09 PHP
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
VBScript版代码高亮
2006/06/26 Javascript
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
浅谈Python2、Python3相对路径、绝对路径导入方法
2018/06/22 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
python数据抓取3种方法总结
2021/02/07 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
CSS3实现时间轴效果
2016/07/11 HTML / CSS
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
Jar包的作用是什么
2014/03/30 面试题
员工培训邀请函
2014/02/02 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书