原生JS小日历

最新推荐文章于 2022-10-10 19:31:31 发布

一个开心的小盆友

最新推荐文章于 2022-10-10 19:31:31 发布

阅读量174

点赞数

文章标签： JavaScript 日历原生s

本文链接：https://blog.csdn.net/haneyz/article/details/101441667

版权

日历

日历：可以实现简单的日期查询。

结果样式

图片: 原生js日历

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>日历</title>
		<style>
			#header {
				width: 250px;
				height: 30px;
				border: 1px solid aqua;
				font-size: 2px;
			}
			#bodyer{
				width: 250px;
				height: 150px;
				border: 1px solid aqua;
				font-size: 2px;
			}
			.hyear{
				width: 100px;
				float: left;
			}
			.hmonth{
				width: 100px;
				float: left;
			}
			.hfind{
				width:50px;
				float: left;
			}
			td{
				width: 30px;
				height: 20px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="header">
			<div class="hyear">
				<select id="year">
					<option value="">选择年份</option>
				</select>年
			</div>
			<div class="hmonth">
				<select id="month">
					<option value="">选择月份</option>
				</select>月
			</div>
			<div class="hfind">
				<button id="inquriy" onclick="query()">查询</button>
			</div>
		</div>
		<div id="bodyer">
			<div class="bweek">
				<table>
					<tr class="week">
						<td >日</td>
						<td >一</td>
						<td >二</td>
						<td >三</td>
						<td >四</td>
						<td >五</td>
						<td >六</td>
					</tr>
					<tr class="day">
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
					</tr>
					<tr class="day">
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
					</tr>
					<tr class="day">
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
					</tr>
					<tr class="day">
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
					</tr>
					<tr class="day">
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
					</tr>
					<tr class="day">
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
						<td ></td>
					</tr>
				</table>
			</div>
		</div>
		<script>
			/*
				1.JS循环生产元素节点 option元素
				2,触发按钮
				3.当月第一天是星期几
				4.每一个月有多少天
			*/
			//执行函数
			var yearList=document.getElementById("year");
			var monthList=document.getElementById("month");
			var dayList=document.querySelectorAll(".day td");
			forEach(function(i){
				//产生一个节点
				var year=document.createElement("option");
				//插入到页面相应的节点,通过value属性来获取值以便显示.
				year.innerHTML=i;
				year.value=i;
				yearList.appendChild(year);
			},2051,1900);
			forEach(function(i){
				var month=document.createElement("option");
				month.innerHTML=i;
				month.value=i;
				monthList.appendChild(month);
			},13,1);
			
			
			//2触发按钮 月份年份必须要有
			var m_day=[31,28,31,30,31,30,31,31,30,31,30,31];
			//判断闰年
			function isLeap(year){
				return year%100!=0&&year%4==0||year%400==0;
			}
			function query(){
				if(!yearList.value||!monthList.value){
					var now_day=new Date();
					yearList.value=now_day.getFullYear();
					monthList.value=now_day.getMonth()+1;
				}
				var thisTime=new Date(yearList.value,monthList.value-1,1);//按照相应格式产生日期
				var firstDay=thisTime.getDay();//获取第一天是星期几
				if(isLeap(yearList.value)){
					m_day[1]=29;
				}
				else{
					m_day[1]=28;
				}
				forEach(function(i){
					dayList[i+firstDay-1].innerHTML=i;
				},m_day[monthList.value-1]+1,1);
			}
			// 定义函数
			function forEach(callback,length,firstNum){
				var i;
				i=firstNum||0;
				for(;i<length;i++){
					callback(i);
					//回调函数
				}
			}
		</script>
	</body>
</html>