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网页加载进度条的实现
Jun 01 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jQuery实现滚动效果
Nov 17 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 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加密解密的代码
2007/07/16 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
详解webpack loader和plugin编写
2018/10/12 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
Django接收自定义http header过程详解
2019/08/23 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
Python图像读写方法对比
2020/11/16 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
自考生自我鉴定范文
2013/10/01 职场文书
物理教师自荐信范文
2013/12/28 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
《蒲公英》教学反思
2014/02/28 职场文书
财务会计专业自荐书
2014/06/30 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
通知函格式范文
2015/04/27 职场文书
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js