Javascript实现万年历（日历表）

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.main {
				width: 800px;
				margin: 0 auto;

			}

			.top {
				width: 800px;
				margin: 0 auto;
			}

			#nian {
				width: 100px;
				height: 30px;
				display: block;
			}

			#yue {
				width: 100px;
				height: 30px;
				display: block;
			}

			.float {

				display: block;
				width: 50px;
			}

			.center {

				margin: 0 auto;
				width: 800px;
			}

			#tab tr {
				height: 150px;

			}

			#tab tr td,
			th {
				width: 150px;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="top">
				<select id="nian" class="float" onchange="huan()">

				</select>
				<span class="float">年</span>
				<select id="yue" class="float" onchange="huan()">

				</select>
				<span class="float">月</span>
			</div>


		</div>
		<div class="center">
			<table id="tab" border="" cellspacing="" cellpadding="">
				<tr>
					<th>周日</th>
					<th>周一</th>
					<th>周二</th>
					<th>周三</th>
					<th>周四</th>
					<th>周五</th>
					<th>周六</th>
				</tr>
			</table>
		</div>
		<script type="text/javascript">
			
			var tab = document.getElementById("tab");
			window.onload = function() {
				var nian = document.getElementById("nian");
				var yue = document.getElementById("yue");
				for (var i = 2019; i >= 1970; i--) {
					var sel = document.createElement("option");
					sel.value = i;
					sel.innerText = i;
					nian.appendChild(sel);
				}
				for (var i = 1; i <= 12; i++) {
					var sel = document.createElement("option");
					sel.value = i;
					sel.innerText = i;
					yue.appendChild(sel);
				}
				huan();
			}

			 function huan() {
				var week = 0;//周几
				var day = 1;//从第一天开始
				var days = 30;//这个月一共有几天
				// try{
				// 	var ziji=document.getElementsByTagName("td")[0];
				// 	ziji.parentElement.parentElement.removeChild(ziji.parentElement);
									
				// }catch(e){
				// 	//TODO handle the exception
				// }
					try{
						//添加一个add1的类，方便删除
						var dataa=document.getElementsByClassName("add1");
						for(var i=0;i<dataa.length;){
							dataa[0].remove();
						}
					}catch(e){
						//TODO handle the exception
						
					}
			
				var nian = document.getElementById("nian").value;
				var yue = document.getElementById("yue").value;
				var date = new Date(nian + "-" + yue + "-1");
				//计算这个月有多少天
				var data = new Date(nian,yue,0);
				 days=data.getDate();
				 // alert(days)

				var newtr = document.createElement("tr");
				newtr.classList.add("add1");
				for (var i = 0; i < date.getDay(); i++) {
					if (week == 7) {
						week = 0;
					}
					var newtd = document.createElement("td");
					
					newtr.appendChild(newtd);
					week++;

				}
				if (week <= 6) {
					for (; week <= 6; week++, day++) {
						var newtd = document.createElement("td");
						newtd.innerText = day;
						newtd.value = day;
						newtr.appendChild(newtd);


					}
				}
				tab.appendChild(newtr);
				week = 0;
				newtr = document.createElement("tr");
					newtr.classList.add("add1");
				for (; day <= days; day++, week++) {
					if (week == 7) {
						week = 0;
						tab.appendChild(newtr);
						newtr = document.createElement("tr");
							newtr.classList.add("add1");
					}
					var newtd = document.createElement("td");
					newtd.innerText = day;
					newtd.value = day;
					newtr.appendChild(newtd);
				}
				tab.appendChild(newtr);
			}
		</script>
	</body>
</html>

相关阅读:
DAO模式多表联查
使用ADO.NET访问数据库
连接查询和分组查询
模糊查询和聚合函数
poj 1220 NUMBER BASE CONVERSION
poj 1964 City Game
Odd number problem
POJ 2983 M × N Puzzle
L O V E
【Mybatis】【3】处理大于号小于号及其他特殊字符

原文地址：https://www.cnblogs.com/a1439775520/p/12946972.html