當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

二、 jQuery带本地时间的日历代码

發布時間：2024/8/1 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了二、 jQuery带本地时间的日历代码小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

二、jQuery帶本地時間日歷代碼
- 2.1 圖片預覽
- 2.2 html代碼
- 2.3 jquery-1.4.min.js代碼

二、jQuery帶本地時間日歷代碼

2.1 圖片預覽

2.2 html代碼

<!doctype html> <html><head><meta charset="utf-8"><title>jQuery帶本地時間日歷代碼</title><style type="text/css">body {background-color: #efefef;}#CalendarMain {width: 300px;height: 300px;border: 1px solid #ccc;margin: 0 auto;margin-top: 100px;}#title {width: 100%;height: 30px;background-color: #b9121b;}.selectBtn {font-weight: 900;font-size: 15px;color: #fff;cursor: pointer;text-decoration: none;padding: 7px 10px 6px 10px;}.selectBtn:hover {background-color: #1d953f;}.selectYear {float: left;margin-left: 50px;position: absolute;}.selectMonth {float: left;margin-left: 120px;position: absolute;}.month {float: left;position: absolute;}.nextMonth {float: right;}.currentDay {float: right;}#context {background-color: #fff;width: 100%;}.week {width: 100%;height: 30px;}.week>h3 {float: left;color: #808080;text-align: center;margin: 0;padding: 0;margin-top: 5px;font-size: 16px;}.dayItem {float: left;}.lastItem {color: #d1c7b7 !important;}.item {color: #333;float: left;text-align: center;cursor: pointer;margin: 0;font-family: "微軟雅黑";font-size: 13px;}.item:hover {color: #b9121b;}.currentItem>a {background-color: #b9121b;width: 25px;line-height: 25px;float: left;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;color: #fff;}#foots {width: 100%;height: 35px;background-color: #fff;border-top: 1px solid #ccc;margin-top: -1px;}#footNow {float: right;margin: 6px 15px 0 0;color: #009ad6;font-family: "微軟雅黑";}#Container {overflow: hidden;float: left;}#center {width: 100%;overflow: hidden;}#centerMain {width: 300%;margin-left: -100%;}#selectYearDiv {float: left;background-color: #fff;}#selectYearDiv>div {float: left;text-align: center;font-family: "微軟雅黑";font-size: 16px;border: 1px solid #ccc;margin-left: -1px;margin-top: -1px;cursor: pointer;color: #909090;}.currentYearSd,.currentMontSd {color: #ff4400 !important;}#selectMonthDiv {float: left;background-color: #fff;}#selectMonthDiv>div {color: #909090;float: left;text-align: center;font-family: "微軟雅黑";font-size: 16px;border: 1px solid #ccc;margin-left: -1px;margin-top: -1px;cursor: pointer;}#selectYearDiv>div:hover,#selectMonthDiv>div:hover {background-color: #efefef;}#centerCalendarMain {float: left;}</style></head><body><div id="Demo"><div id="CalendarMain"><div id="title"> <a class="selectBtn month" href="javascript:" onClick="CalendarHandler.CalculateLastMonthDays();"><</a> <a class="selectBtn selectYear" href="javascript:" onClick="CalendarHandler.CreateSelectYear(CalendarHandler.showYearStart);">2014年</a><a class="selectBtn selectMonth" onClick="CalendarHandler.CreateSelectMonth()">6月</a> <a class="selectBtn nextMonth"href="javascript:" onClick="CalendarHandler.CalculateNextMonthDays();">></a><a class="selectBtn currentDay" href="javascript:"onClick="CalendarHandler.CreateCurrentCalendar(0,0,0);">今天</a></div><div id="context"><div class="week"><h3> 一 </h3><h3> 二 </h3><h3> 三 </h3><h3> 四 </h3><h3> 五 </h3><h3> 六 </h3><h3> 日 </h3></div><div id="center"><div id="centerMain"><div id="selectYearDiv"></div><div id="centerCalendarMain"><div id="Container"></div></div><div id="selectMonthDiv"></div></div></div><div id="foots"><a id="footNow">19:14:34</a></div></div></div></body><script type="text/javascript" src="js/jquery-1.4.min.js"></script><script type="text/javascript">$(document).ready(function(e) {CalendarHandler.initialize();});var CalendarHandler = {currentYear: 0,currentMonth: 0,isRunning: false,showYearStart: 2009,tag: 0,initialize: function() {$calendarItem = this.CreateCalendar(0, 0, 0);$("#Container").append($calendarItem);$("#context").css("height", $("#CalendarMain").height() - 65 + "px");$("#center").css("height", $("#context").height() - 30 + "px");$("#selectYearDiv").css("height", $("#context").height() - 30 + "px").css("width", $("#context").width() + "px");$("#selectMonthDiv").css("height", $("#context").height() - 30 + "px").css("width", $("#context").width() + "px");$("#centerCalendarMain").css("height", $("#context").height() - 30 + "px").css("width", $("#context").width() +"px");$calendarItem.css("height", $("#context").height() - 30 + "px"); //.css("visibility","hidden");$("#Container").css("height", "0px").css("width", "0px").css("margin-left", $("#context").width() / 2 + "px").css("margin-top", ($("#context").height() - 30) / 2 + "px");$("#Container").animate({width: $("#context").width() + "px",height: ($("#context").height() - 30) * 2 + "px",marginLeft: "0px",marginTop: "0px"}, 300, function() {$calendarItem.css("visibility", "visible");});$(".dayItem").css("width", $("#context").width() + "px");var itemPaddintTop = $(".dayItem").height() / 6;$(".item").css({"width": $(".week").width() / 7 + "px","line-height": itemPaddintTop + "px","height": itemPaddintTop + "px"});$(".currentItem>a").css("margin-left", ($(".item").width() - 25) / 2 + "px").css("margin-top", ($(".item").height() -25) / 2 + "px");$(".week>h3").css("width", $(".week").width() / 7 + "px");this.RunningTime();},CreateSelectYear: function(showYearStart) {CalendarHandler.showYearStart = showYearStart;$(".currentDay").show();$("#selectYearDiv").children().remove();var yearindex = 0;for (var i = showYearStart; i < showYearStart + 12; i++) {yearindex++;if (i == showYearStart) {$last = $("<div>往前</div>");$("#selectYearDiv").append($last);$last.click(function() {CalendarHandler.CreateSelectYear(CalendarHandler.showYearStart - 10);});continue;}if (i == showYearStart + 11) {$next = $("<div>往后</div>");$("#selectYearDiv").append($next);$next.click(function() {CalendarHandler.CreateSelectYear(CalendarHandler.showYearStart + 10);});continue;}if (i == this.currentYear) {$yearItem = $("<div class=\"currentYearSd\" id=\"" + yearindex + "\">" + i + "</div>")} else {$yearItem = $("<div id=\"" + yearindex + "\">" + i + "</div>");}$("#selectYearDiv").append($yearItem);$yearItem.click(function() {$calendarItem = CalendarHandler.CreateCalendar(Number($(this).html()), 1, 1);$("#Container").append($calendarItem);CalendarHandler.CSS()CalendarHandler.isRunning = true;$($("#Container").find(".dayItem")[0]).animate({height: "0px"}, 300, function() {$(this).remove();CalendarHandler.isRunning = false;});$("#centerMain").animate({marginLeft: -$("#center").width() + "px"}, 500);});if (yearindex == 1 || yearindex == 5 || yearindex == 9) $("#selectYearDiv").find("#" + yearindex).css("border-left-color", "#fff");if (yearindex == 4 || yearindex == 8 || yearindex == 12) $("#selectYearDiv").find("#" + yearindex).css("border-right-color", "#fff");}$("#selectYearDiv>div").css("width", ($("#center").width() - 4) / 4 + "px").css("line-height", ($("#center").height() -4) / 3 + "px");$("#centerMain").animate({marginLeft: "0px"}, 300);},CreateSelectMonth: function() {$(".currentDay").show();$("#selectMonthDiv").children().remove();for (var i = 1; i < 13; i++) {if (i == this.currentMonth) $monthItem = $("<div class=\"currentMontSd\" id=\"" + i + "\">" + i + "月</div>");else $monthItem = $("<div id=\"" + i + "\">" + i + "月</div>");$("#selectMonthDiv").append($monthItem);$monthItem.click(function() {$calendarItem = CalendarHandler.CreateCalendar(CalendarHandler.currentYear, Number($(this).attr("id")), 1);$("#Container").append($calendarItem);CalendarHandler.CSS()CalendarHandler.isRunning = true;$($("#Container").find(".dayItem")[0]).animate({height: "0px"}, 300, function() {$(this).remove();CalendarHandler.isRunning = false;});$("#centerMain").animate({marginLeft: -$("#center").width() + "px"}, 500);});if (i == 1 || i == 5 || i == 9) $("#selectMonthDiv").find("#" + i).css("border-left-color", "#fff");if (i == 4 || i == 8 || i == 12) $("#selectMonthDiv").find("#" + i).css("border-right-color", "#fff");}$("#selectMonthDiv>div").css("width", ($("#center").width() - 4) / 4 + "px").css("line-height", ($("#center").height() -4) / 3 + "px");$("#centerMain").animate({marginLeft: -$("#center").width() * 2 + "px"}, 300);},IsRuiYear: function(aDate) {return (0 == aDate % 4 && (aDate % 100 != 0 || aDate % 400 == 0));},CalculateWeek: function(y, m, d) {var arr = "7123456".split("");with(document.all) {var vYear = parseInt(y, 10);var vMonth = parseInt(m, 10);var vDay = parseInt(d, 10);}var week = arr[new Date(y, m - 1, vDay).getDay()];return week;},CalculateMonthDays: function(m, y) {var mDay = 0;if (m == 0 || m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {mDay = 31;} else {if (m == 2) {//判斷是否為芮年var isRn = this.IsRuiYear(y);if (isRn == true) {mDay = 29;} else {mDay = 28;}} else {mDay = 30;}}return mDay;},CreateCalendar: function(y, m, d) {$dayItem = $("<div class=\"dayItem\"></div>");//獲取當前月份的天數var nowDate = new Date();if (y == nowDate.getFullYear() && m == nowDate.getMonth() + 1 || (y == 0 && m == 0))$(".currentDay").hide();var nowYear = y == 0 ? nowDate.getFullYear() : y;this.currentYear = nowYear;var nowMonth = m == 0 ? nowDate.getMonth() + 1 : m;this.currentMonth = nowMonth;var nowDay = d == 0 ? nowDate.getDate() : d;$(".selectYear").html(nowYear + "年");$(".selectMonth").html(nowMonth + "月");var nowDaysNub = this.CalculateMonthDays(nowMonth, nowYear);//獲取當月第一天是星期幾//var weekDate = new Date(nowYear+"-"+nowMonth+"-"+1);//alert(weekDate.getDay());var nowWeek = parseInt(this.CalculateWeek(nowYear, nowMonth, 1));//nowWeek=weekDate.getDay()==0?7:weekDate.getDay();//var nowWeek=weekDate.getDay();//獲取上個月的天數var lastMonthDaysNub = this.CalculateMonthDays((nowMonth - 1), nowYear);if (nowWeek != 0) {//生成上月剩下的日期for (var i = (lastMonthDaysNub - (nowWeek - 1)); i < lastMonthDaysNub; i++) {$dayItem.append("<div class=\"item lastItem\"><a>" + (i + 1) + "</a></div>");}}//生成當月的日期for (var i = 0; i < nowDaysNub; i++) {if (i == (nowDay - 1)) $dayItem.append("<div class=\"item currentItem\"><a>" + (i + 1) + "</a></div>");else $dayItem.append("<div class=\"item\"><a>" + (i + 1) + "</a></div>");}//獲取總共已經生成的天數var hasCreateDaysNub = nowWeek + nowDaysNub;//如果小于42，往下個月推算if (hasCreateDaysNub < 42) {for (var i = 0; i <= (42 - hasCreateDaysNub); i++) {$dayItem.append("<div class=\"item lastItem\"><a>" + (i + 1) + "</a></div>");}}return $dayItem;},CSS: function() {var itemPaddintTop = $(".dayItem").height() / 6;$(".item").css({"width": $(".week").width() / 7 + "px","line-height": itemPaddintTop + "px","height": itemPaddintTop + "px"});$(".currentItem>a").css("margin-left", ($(".item").width() - 25) / 2 + "px").css("margin-top", ($(".item").height() -25) / 2 + "px");},CalculateNextMonthDays: function() {if (this.isRunning == false) {$(".currentDay").show();var m = this.currentMonth == 12 ? 1 : this.currentMonth + 1;var y = this.currentMonth == 12 ? (this.currentYear + 1) : this.currentYear;var d = 0;var nowDate = new Date();if (y == nowDate.getFullYear() && m == nowDate.getMonth() + 1) d = nowDate.getDate();else d = 1;$calendarItem = this.CreateCalendar(y, m, d);$("#Container").append($calendarItem);this.CSS();this.isRunning = true;$($("#Container").find(".dayItem")[0]).animate({height: "0px"}, 300, function() {$(this).remove();CalendarHandler.isRunning = false;});}},CalculateLastMonthDays: function() {if (this.isRunning == false) {$(".currentDay").show();var nowDate = new Date();var m = this.currentMonth == 1 ? 12 : this.currentMonth - 1;var y = this.currentMonth == 1 ? (this.currentYear - 1) : this.currentYear;var d = 0;if (y == nowDate.getFullYear() && m == nowDate.getMonth() + 1) d = nowDate.getDate();else d = 1;$calendarItem = this.CreateCalendar(y, m, d);$("#Container").append($calendarItem);var itemPaddintTop = $(".dayItem").height() / 6;this.CSS();this.isRunning = true;$($("#Container").find(".dayItem")[0]).animate({height: "0px"}, 300, function() {$(this).remove();CalendarHandler.isRunning = false;});}},CreateCurrentCalendar: function() {if (this.isRunning == false) {$(".currentDay").hide();$calendarItem = this.CreateCalendar(0, 0, 0);$("#Container").append($calendarItem);this.isRunning = true;$($("#Container").find(".dayItem")[0]).animate({height: "0px"}, 300, function() {$(this).remove();CalendarHandler.isRunning = false;});this.CSS();$("#centerMain").animate({marginLeft: -$("#center").width() + "px"}, 500);}},RunningTime: function() {var mTiming = setInterval(function() {var nowDate = new Date();var h = nowDate.getHours() < 10 ? "0" + nowDate.getHours() : nowDate.getHours();var m = nowDate.getMinutes() < 10 ? "0" + nowDate.getMinutes() : nowDate.getMinutes();var s = nowDate.getSeconds() < 10 ? "0" + nowDate.getSeconds() : nowDate.getSeconds();var nowTime = h + ":" + m + ":" + s;$("#footNow").html("本地時間 " + nowTime);}, 1000);}}</script><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"></div> </html>

2.3 jquery-1.4.min.js代碼

鏈接：分享百度網盤的鏈接，點擊即可下載
提取碼：0258

總結

以上是生活随笔為你收集整理的二、 jQuery带本地时间的日历代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： c语言火车票退票系统流程图,[图解123
下一篇：计算机发送到桌面快捷方式,win10电脑