首页 > 编程语言 > jQuery实现日历效果
2020
10-10

jQuery实现日历效果

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

jquery是用的是2.0版本。

1、html代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!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的代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
// 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);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自学编程网。

编程技巧