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 29 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
jQuery实现动态操作table行
Nov 23 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
拼音码表的生成
2006/10/09 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python的id()函数解密过程
2012/12/25 Python
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
Python利用ansible分发处理任务
2015/08/04 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
对Python字符串中的换行符和制表符介绍
2018/05/03 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
班级安全教育实施方案
2014/02/23 职场文书
党员违纪检讨书
2015/05/05 职场文书
责任书范本大全
2015/05/11 职场文书
对学校的意见和建议
2015/06/04 职场文书
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android