动态日历

最新推荐文章于 2023-06-25 17:25:00 发布

superwoman_yy

最新推荐文章于 2023-06-25 17:25:00 发布

阅读量434

点赞数

分类专栏：前端文章标签：动态日历

本文链接：https://blog.csdn.net/superwoman_yy/article/details/78252698

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动态日历</title>
	<script src="js/jquery-1.11.1.min.js"></script>
	<script>
		$(function(){
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth()+1;
				
				init(year,month);
				//初始化   年和月的下拉列表
				function init(y,m){
					var year = [1970,2020];
					for(var i=year[0];i<=year[1];i++){
						if(y==i){
							var option = $("<option value='"+i+"' selected='selected'>"+i+"</option>");
							$("#year").append(option);
						}else{
							var option = $("<option value='"+i+"'>"+i+"</option>");
							$("#year").append(option);
						}
					
					}
					for(var i=1;i<=12;i++){
						if(m==i){
							var option = $("<option value='"+i+"' slected='slected'>"+i+"</option>");
							$("#month").append(option);
						}else{
							var option = $("<option value='"+i+"'>"+i+"</option>");
							$("#month").append(option);
						}
						
				}
					getDate(y,m);
				}
				//通过年和月，拿到每个月最大天数
				function getMaxDay(year,month){
					if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
							return 31;
						}else if(month==4||month==6||month==9||month==11){
							return 30;
						}else{
							return isleap(year);
						}
				}
				
				//初始化日历
				function getDate(year,month){
				   	var maxDay = getMaxDay(year,month);
				   	var day = 1;
				   	var date = new Date(year,month-1,1);
				   	var week = date.getDay();
				   	while(true){
				   		var tr = $("<tr></tr>");
				   		for(var i=0;i<7;i++){
				   			var td ;
				   			if(day==1&&i==week){
				   				td=$("<td>1</td>");
				   				day++;
				   			}else if(day>1&&day<=maxDay){
				   				td=$("<td>"+day+"</td>");
				   				day++;
				   			}else{
				   				td=$("<td> </td>");
				   			}
				   			tr.append(td);
				   			
				   		}
				   		$("tbody").append(tr);
				   		if(day>maxDay)
				   			break;
				   	}
				}
				
				//判断是否是闰年
				function isleap(year){
					if(year%4==0&&year%100!=0||year%400==0){
						return 29;
					}else{
						return 28;
					}
				}
				
				//绑定两个下拉列表的改变事件
				$(".a").change(function(){
					$("tbody").empty();
					var year = $("#year").val();
					var month = $("#month").val();
					getDate(year,month);
				});
		})
	</script>
	<style>
		#tb{
			border-collapse:collapse;
		}
		th,td{
			border:1px solid black;
			padding: 5px 5px;
		}
		td:hover{
			background-color: #000000;
		}
	</style>
	</head>
	<body>
		年<select id="year" class="a"></select> 
		月<select id="month" class="a"></select>
		<table id="tb">
			<thead>
				<tr>
					<th>日</th>
					<th>一</th>
					<th>二</th>
					<th>三</th>
					<th>四</th>
					<th>五</th>
					<th>六</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
	</body>
</html>

superwoman_yy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
动态日历

动态日历 $(function(){ var date = new Date(); var year = date.getFullYear(); var month = date.getMonth()+1; init(year,month); //初始化年和月的下拉列表 function init(y,m){ v
复制链接

扫一扫