JQuery实现日历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>日历</title>
		<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
		<script type="text/javascript">
			function timehtml(yeargoal,monthgoal){
				//月末
				var time  = new Date(yeargoal,monthgoal,0);
				//获得这个月由多少天
				console.log(time.getDate());
				var date = time.getDate();
				var time2 = new Date(yeargoal,monthgoal-1,1);
				//获得这个月的一号是星期几
				console.log(time2.getDay());
				var day = time2.getDay();
				
				//月
				console.log(time.getMonth()+1);
				var mon = time.getMonth()+1;
				//年
				console.log(time.getFullYear());
				var year = time.getFullYear();
				//行标签头
				var hangT = "<tr style='heigth:50px;border: solid 1px black'>";
				//空的td块
				var lieK = "<td style='width:50px;border: solid 1px black'></td>";
			
				var timestr = hangT;
				//日历表头
				timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+"日"+"</td>";
				timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+"一"+"</td>";
				timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+"二"+"</td>";
				timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+"三"+"</td>";
				timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+"四"+"</td>";
				timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+"五"+"</td>";
				timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+"六"+"</td>";
				timestr = timestr+"</tr><tr style='heigth:50px;border: solid 1px black'>";
				for(var i = 0;i<day;i++){
					timestr = timestr+lieK;
				}
				for(var j = 1;j<=date;j++){
					timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+j+"</td>";
					if(day==6){
						timestr = timestr+"</tr><tr style='heigth:50px;border: solid 1px black'>";
						day = -1;
					}
					day++;
				}
				if(day>0){
					for(var i = day;i<=6;i++){
						timestr = timestr+lieK;
					}
				}
				timestr = timestr+"</tr>";
				return timestr;
			}
			
			$(document).ready(function(){
				$("#okay").click(function(){
					var yeargoal = $("#ayear").attr("value");
					var monthgoal = $("#bmonth").attr("value");
					var str = timehtml(yeargoal,monthgoal);
					$("table").html(str);
					if(day==0){
						$("tr:last").remove();
					}
				});
			});
		</script>
	</head>
	<body>
		<table style="width:350px; height: 400px;border: solid 1px black;">
			<!--
 				这里将插入字符串timestr的html形式
            -->
		</table>
		<select style="width: 80px;" id="ayear">
			<option value="2010">2010</option>
			<option value="2011">2011</option>
			<option value="2012">2012</option>
			<option value="2013">2013</option>
			<option value="2014">2014</option>
			<option value="2015">2015</option>
			<option value="2016">2016</option>
			<option value="2017">2017</option>
			<option value="2018">2018</option>
			<option value="2019">2019</option>
			<option value="2020">2020</option>
		</select>年 
		<select style="width: 80px;" id="bmonth">
			<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>月 
		<button type="button" value="确认跳转" id="okay">确认跳转</button>
	</body>
</html>
猜你喜欢
