生活随笔
收集整理的這篇文章主要介紹了
jquery 简单日历
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今天試著用jquery 寫了一個日歷，等有時間研究一下別人寫的思路，上代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* { margin:0; padding:0;}
.red { color:red;}
.date { cursor:pointer;}
.today { background:#F90; font-weight:bold;cursor:pointer;}
#calendar { width:260px; margin:50px auto; }
#date{ text-align:center; border:1px #ccc solid; border-bottom:0;}
#date a { display:inline-block; width:18px; height:20px; background-position:center -20px; vertical-align:middle; cursor:pointer;}
#date #selectDate{ width:120px;display:inline-block;}
#preYear { background:url(http://d.hiphotos.baidu.com/album/s%3D900%3Bq%3D90/sign=ad9b3be5fdfaaf5180e38dbfbc6fe5d3/728da9773912b31bd3d15eea8618367adbb4e1b0.jpg);}
#preMonth { background:url(http://f.hiphotos.baidu.com/album/s%3D900%3Bq%3D90/sign=f73776510cf431adb8d24f397b0ddd92/43a7d933c895d143e8cb77e073f082025baf07b7.jpg);}
#nextMonth { background:url(http://g.hiphotos.baidu.com/album/s%3D900%3Bq%3D90/sign=f0feb6cb5343fbf2c12caa238045bbbd/80cb39dbb6fd5266e6b4afd7ab18972bd5073651.jpg);}
#nextYear { background:url(http://d.hiphotos.baidu.com/album/s%3D900%3Bq%3D90/sign=09074fa3352ac65c63056a73cbc9c32c/ac6eddc451da81cb0a5b100e5266d016082431b7.jpg);}
#calTable { width:100%; border-collapse:collapse;}
#calTable th,#calTable td{ width:30px; height:20px; border:1px #ccc solid; text-align:center;}
#calTable tbody{ font-family:Georgia, "Times New Roman", Times, serif;}
.c_yellow { background-color:#FFFF33}
</style><script src="../myweb/js/jquery-1.8.0.js"></script>
<script>
jQuery(function($){function showTm(beginyear,endyear,selyear,selectMonth,timetb,mousecls){this.beginyear=beginyear, //開始年份this.endyear=endyear, //結束年份this.selyear=selyear, //選擇年份select的idthis.selectMonth=selectMonth, //選擇月份select的idthis.timetb=timetb, // 日期表格 this.mousecls=mousecls //鼠標滑過的樣式切換類名}showTm.prototype.changeTm = function(){var _self=this;//填充年份var minyear=Math.min(_self.endyear,_self.beginyear);if(minyear<1970){alert("您輸入的開始年份需要大于1970年！");return false;}var len=Math.abs(_self.endyear - _self.beginyear);for(var i=0;i<(len+1);i++){$("#"+_self.selyear)[0].options[i]=new Option(minyear+i); } //初始化今天日期，高亮顯示今天日期nowtoday()function nowtoday(){var now=new Date();var nowyear=now.getFullYear();var nowmonth=now.getMonth();var nowday=now.getDay();$("#"+_self.selyear).val(nowyear);$("#"+_self.selectMonth).val(nowmonth); } //填充時間tablechangeTmnow();$("#"+_self.selyear).change(changeTmnow);$("#"+_self.selectMonth).change(changeTmnow);function changeTmnow(){ var daycont; //每月的天數var yearval=parseInt( $("#"+_self.selyear).val() );var monval=parseInt( $("#"+_self.selectMonth).val() ); //確定每個月的天數if($.inArray(monval,[1,3,5,7,8,10,12])>-1){ //判斷之前需要轉換數據類型daycont = 31; }else if(monval!=2){daycont = 30;}else{daycont=(yearval%400==0)?29:28; //判斷是否是閏年};//清空之前的日期$("#"+_self.timetb+" tbody td").empty(); //填充新的日期var firsday=new Date(yearval,monval-1,1)var firstdate=firsday.getDay(); //確定每月的第一天 填充那個格子for(var i=0;i<daycont;i++){$("#"+_self.timetb+" tbody td").eq(firstdate+i).text(i+1)} //高亮顯示今天outup();function outup(){$("#"+_self.timetb+" tbody td").css({"color":"#333"})var now=new Date();var nowyear=now.getFullYear();var nowmonth=now.getMonth();var nowdate=now.getDate();if(yearval==nowyear && nowmonth==(monval-1)){$("#"+_self.timetb+" tbody td").eq(nowdate-1+firstdate).css({"color":"red"})}}//添加鼠標滑過效果$("#"+_self.timetb+" tbody td").hover(function(){$(this).toggleClass(_self.mousecls)})} //end changeTmnow()} //end changeTm()//函數的調用var showTm1=new showTm(1975,2550,"selectYear","selectMonth","calTable","c_yellow");showTm1.changeTm();})</script>
</head><body>
<div id="calendar"><div id="date"><a id="preMonth" title="上一年"></a><a id="preYear" title="上一月"></a><span id="selectDate"><select id="selectYear"> </select><select id="selectMonth"><option value="1">1月</option><option value="2">2月</option><option value="3">3月</option><option value="4">4月</option><option value="5">5月</option><option value="6">6月</option><option value="7">7月</option><option value="8">8月</option><option value="9">9月</option><option value="10">10月</option><option value="11">11月</option><option value="12">12月</option></select></span><a id="nextYear" title="下一月"></a><a id="nextMonth" title="下一年"></a></div><table id="calTable"><thead><tr><th class="red">日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th class="red">六</th></tr></thead><tbody><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table>
</div></body>
</html>
下面是各種date() 相關方法，方便查閱：
Date 對象用于處理日期和時間。
創建 Date 對象的語法：
var myDate=new Date()
Date 對象會自動把當前日期和時間保存為其初始值。
參數形式有以下５種：??
?? new Date("month dd,yyyy hh:mm:ss");
?? new?Date("month dd,yyyy");
?? new?Date(yyyy,mth,dd,hh,mm,ss);
?? new Date(yyyy,mth,dd);
?? new Date(ms);
注意最后一種形式，參數表示的是需要創建的時間和GMT時間1970年1月1日之間相差的毫秒數。各種函數的含義如下：
month:用英文表示月份名稱，從January到December
mth:用整數表示月份，從（１月）到１１（１２月）
dd:表示一個月中的第幾天，從1到31
yyyy:四位數表示的年份
hh:小時數，從0（午夜）到23（晚11點）
mm:分鐘數，從0到59的整數
ss:秒數，從0到59的整數
ms:毫秒數，為大于等于0的整數
如：
new Date("January 12,2006 22:19:35");
new Date("January 12,2006");
new Date(2006,0,12,22,19,35);
new Date(2006,0,12);
new Date(1137075575000);
Date() 返回當日的日期和時間。?
getDate() 從 Date 對象返回一個月中的某一天 (1 ~ 31)。?
getDay() 從 Date 對象返回一周中的某一天 (0 ~ 6)。?
getMonth() 從 Date 對象返回月份 (0 ~ 11)。?
getFullYear() 從 Date 對象以四位數字返回年份。
getYear() 請使用 getFullYear() 方法代替。
getHours() 返回 Date 對象的小時 (0 ~ 23)。?
getMinutes() 返回 Date 對象的分鐘 (0 ~ 59)。?
getSeconds() 返回 Date 對象的秒數 (0 ~ 59)。?
getMilliseconds() 返回 Date 對象的毫秒(0 ~ 999)。?
getTime() 返回 1970 年 1 月 1 日至今的毫秒數。?
getTimezoneOffset() 返回本地時間與格林威治標準時間 (GMT) 的分鐘差。?
getUTCDate() 根據世界時從 Date 對象返回月中的一天 (1 ~ 31)。?
getUTCDay() 根據世界時從 Date 對象返回周中的一天 (0 ~ 6)。?
getUTCMonth() 根據世界時從 Date 對象返回月份 (0 ~ 11)。?
getUTCFullYear() 根據世界時從 Date 對象返回四位數的年份。?
getUTCHours() 根據世界時返回 Date 對象的小時 (0 ~ 23)。?
getUTCMinutes() 根據世界時返回 Date 對象的分鐘 (0 ~ 59)。
getUTCSeconds() 根據世界時返回 Date 對象的秒鐘 (0 ~ 59)。?
getUTCMilliseconds() 根據世界時返回 Date 對象的毫秒(0 ~ 999)。?
parse() 返回1970年1月1日午夜到指定日期（字符串）的毫秒數。
setDate() 設置 Date 對象中月的某一天 (1 ~ 31)。
setMonth() 設置 Date 對象中月份 (0 ~ 11)。?
setFullYear() 設置 Date 對象中的年份（四位數字）。?
setYear() 請使用 setFullYear() 方法代替。?
setHours() 設置 Date 對象中的小時 (0 ~ 23)。?
setMinutes() 設置 Date 對象中的分鐘 (0 ~ 59)。?
setSeconds() 設置 Date 對象中的秒鐘 (0 ~ 59)。?
setMilliseconds() 設置 Date 對象中的毫秒 (0 ~ 999)。?
setTime() 以毫秒設置 Date 對象。?
setUTCDate() 根據世界時設置 Date 對象中月份的一天 (1 ~ 31)。?
setUTCMonth() 根據世界時設置 Date 對象中的月份 (0 ~ 11)。?
setUTCFullYear() 根據世界時設置 Date 對象中的年份（四位數字）。?
setUTCHours() 根據世界時設置 Date 對象中的小時 (0 ~ 23)。?
setUTCMinutes() 根據世界時設置 Date 對象中的分鐘 (0 ~ 59)。?
setUTCSeconds() 根據世界時設置 Date 對象中的秒鐘 (0 ~ 59)。?
setUTCMilliseconds() 根據世界時設置 Date 對象中的毫秒 (0 ~ 999)。?
toSource() 返回該對象的源代碼。?
toString() 把 Date 對象轉換為字符串。?
toTimeString() 把 Date 對象的時間部分轉換為字符串。?
toDateString() 把 Date 對象的日期部分轉換為字符串。
toGMTString() 請使用 toUTCString() 方法代替。 1 3
toUTCString() 根據世界時，把 Date 對象轉換為字符串。??
toLocaleString() 根據本地時間格式，把 Date 對象轉換為字符串。?
toLocaleTimeString() 根據本地時間格式，把 Date 對象的時間部分轉換為字符串。?
toLocaleDateString() 根據本地時間格式，把 Date 對象的日期部分轉換為字符串。?
UTC() 根據世界時返回 1997 年 1 月 1 日 到指定日期的毫秒數。
valueOf() 返回 Date 對象的原始值。?
var objDate=new Date([arguments list]);
轉載于:https://www.cnblogs.com/hdchangchang/archive/2013/01/09/3965376.html
總結
以上是生活随笔為你收集整理的jquery 简单日历的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
