javascript实战——万年历查询

最新推荐文章于 2022-03-01 17:37:36 发布

原创最新推荐文章于 2022-03-01 17:37:36 发布 · 780 阅读

4 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

43 篇文章

订阅专栏

本文介绍如何使用JavaScript创建一个万年历查询应用，包括动态添加年月选择、封装遍历方法、判断平年与闰年及每月第一天是周几等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript实战——万年历查询

思路：

1：动态添加年，月；

2：封装遍历方法；

3：添加日：判断平年还是闰年；每个月的第一天是星期几；

html:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>万年历</title>
	<link rel="stylesheet" type="text/css" href="demo.css">
	<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="box">
	<div id="top">
		<select id="year">
			<option value="" class="info_year">请选择年份
			</option>
		</select>年
		<select id="month">
			<option value="" class="info_month">请选择月份
			</option>
		</select>月
		<input id='button' type="button" name="button" style="width: 60px;" value="查询">
	</div>
	<div id="con">
		<ul class="week">
			<li>一</li>
			<li>二</li>
			<li>三</li>
			<li>四</li>
			<li>五</li>
			<li>六</li>
			<li>日</li>
		</ul>
		<ul class="day">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</div>
</body>
</html>

css:

*{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#box{
	width: 450px;
	height: 380px;
	border:1px solid #3399ff;
	margin:100px auto 0;
	border-radius: 5px;
}
#top{
	width: 100%;
	height: 50px;
	border-bottom: 1px solid #3399ff;
	font-size: 15px;
}
#year{
	margin: 15px 10px;

}
#year,#month{
	text-align: center;
	margin-right: 15px;

}
#con{
	width: 420px;
	height: 300px;
	margin:0 auto 0;

}
#con ul.week{
	width: 420px;
	height: 45px;
}
#con ul.week li{
	width: 60px;
	height: 45px;
	text-align: center;
	float: left;

}
/*#con ul.week li.weekend{
	color: red;
}*/
#con ul.day li{
	width: 60px;
	height: 45px;
	border-top: 1px solid #ddd;
	float: left;line-height: 50px;
	text-align: center;
	font-size: 20px;
}

动态添加年月：

js:

window.onload = function(){
	var listYear = document.getElementById('year');  
	var listMonth = document.getElementById('month');
	forEach(function(i){
		var year = document.createElement('option');
		year.innerHTML = i;
		year.value = i;
		listYear.appendChild(year)
	},2051,1900)
	forEach(function(i){
		var month = document.createElement('option');
		month.innerHTML = i;
		month.value = i;
		listMonth.appendChild(month);
	},13,1)
}
// 封装遍历方法
function forEach(callback,length,firstNum){
	var i;
	i=firstNum?firstNum:0
	for(;i<length;i++){
		callback(i)
	}
}

图示：