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的id
	  this.selectMonth=selectMonth, //选择月份select的id
	  this.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);		 
	 }				
	//填充时间table
	changeTmnow();
	$("#"+_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]);

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 对象用于处理日期和时间。
创建 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);

来源：https://www.cnblogs.com/hdchangchang/archive/2013/01/09/3965376.html

标签

margin

cursor

jquery