二、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><!--[if IE 7]><style type="text/css">.menuItem{ margin-left:-130px; } </style><![endif]--><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带本地时间的日历代码相关推荐

jQuery 将本地时间转换成 UTC 时间，计算时差，将UTC时间转换成本地时间
//使用方式 let date = 'YYYY-MM-DD'; //你的时间格式(你的时间)//调用 FormatUtcDate(new Date( date + ' 00:00:00 ')) For ...
15款jQuery带缩略图的图片轮播切换特效代码
JQuery宽屏电影大图幻灯片轮播切换代码 jquery带文字缩略图的图片轮播切换代码 jQuery OwlCarousel图片滚动插件世界杯图片轮播滚动代码 jQuery仿中国建设银行带缩略图控制滚 ...
SQL Server 的本地时间和UTC时间
一,本地时间和UTC时间本地时间世界的每个地区都有自己的本地时间,整个地球分为二十四时区,每个时区都有自己的本地时间. UTC时间在国际无线电通信中,为统一而普遍使用一个标准时间,称为通用协调时 ...
本地时间（北京时间）和“GMT+8”时区时间的区别？
获取本地时间: Java代码 String time1 = new SimpleDateFormat("hh:mm:ss").format(new Date()); 获取时区& ...
html桌面日历功能,jQuery简单带记事功能的日历插件
e-calendar是一款jQuery简单带记事功能的日历插件.通过该jQuery日历插件你可以记录或设置某天某个时刻发生的事情,具有工作备忘录的功能.通过简单的参数设置你就可以定制该日历插件的外观. ...
html时间轴横向自动播放,利用jQuery实现日期时间轴自动播放代码
特效描述:利用jQuery实现日期时间轴自动播放代码.利用jQuery实现日期时间轴自动播放代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码渲染未完成延迟动画渲染完成继续动 ...
图片轮播php代码下载,jQuery带进度条滚动图片轮播代码
jQuery带进度条滚动图片轮播代码 jQuery带进度条滚动图片轮播代码是一款带左右箭头按钮控制图片滚动轮播,标题和进度条显示效果. $(document).ready(function(e) { ...
php 自动选择时间的代码,使用JavaScript或PHP自动检测用户当前的本地时间
我经常需要显示基于或受到用户实际本地时间影响的信息,这些时间在不同的时区有所不同.是否有可靠的方式获取用户当前时间和/或时区? 关键的问题: >服务器端代码是基于网站主机或用户的ISP > ...
MATLAB遗传算法求解带过程时间窗和同时取送货的车辆调度问题（VRPSPDTW）代码实例
MATLAB遗传算法求解带过程时间窗和同时取送货的车辆调度问题(VRPSPDTW)代码实例实例问题描述:现有一配送中心向14个客户点配送牛奶,并取回奶桶.配总中心和客户点坐标及每个客户点的服务时间如 ...
ios开发中计算代码运算时间_iOS日历、日期、时间的计算
时间和日历的计算在iOS开发中经常看到,经常看到大家在百度,开源中国等搜索这些答案.今天写个简单的时间和日历有关的计算. 获取一个月的总天数 1.获取当月的天数 - (NSInteger)getNum ...

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

文章目录

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

2.1 图片预览

2.2 html代码

2.3 jquery-1.4.min.js代码

二、 jQuery带本地时间的日历代码相关推荐

最新文章

热门文章