快捷導(dǎo)航

jQuery實現(xiàn)日歷效果

更新時間：2020年09月11日 08:18:37 作者：啊哈！前端

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jQuery實現(xiàn)日歷效果的具體代碼，供大家參考，具體內(nèi)容如下

jquery是用的是2.0版本。

1、html代碼

<!DOCTYPE html>
<!--基于W3C標(biāo)準(zhǔn) 不用做任何修改-->
<html>
<!--起始標(biāo)準(zhǔn)-->
<head>
<!--設(shè)置初始化文檔信息和文檔管理標(biāo)注-->
<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(); // 獲取當(dāng)前日期
var changedYear = nstr.getFullYear(); // 年份
var changedMonth = nstr.getMonth(); // 月份
var dnow = nstr.getDate(); // 今日日期
var n1str = new Date(changedYear, changedMonth, 1); // 當(dāng)月第一天Date
var initfirstday = n1str.getDay(); // 當(dāng)月第一天星期幾
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();
 
}
// 獲取當(dāng)月的天數(shù)
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();
}
 
// 獲得表格行數(shù)
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>"; // 過濾無效日期（小于等于零的、大于月總天數(shù)的）
  // 打印日期：今天底色為紅
  // 查詢月簽到情況
 
 
 }
 tb += "</tr>";
 // 表格的行結(jié)束
 }
 tb += "</table>"; // 表格結(jié)束
 $(".signincalendar").html(tb);
 
}
 
/** 改變年后觸發(fā)事件,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);
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: