html简单的日历界面

petrel_0
已于 2024-07-15 10:19:44 修改
阅读量907
点赞数 14
分类专栏： Html 文章标签： javascript html jquery
于 2024-07-15 10:19:13 首次发布
本文链接：https://blog.youkuaiyun.com/petrel_921/article/details/140430937
版权
Html 专栏收录该内容
1 篇文章
订阅专栏
html简单的日历界面

代码
- 运行结果
代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.wk {
				width: 100%;
				height: 60px;
				margin-left: auto;
				margin-right: auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.main {
				width: 100%;
				margin: 0 auto;
				/* background-color: #F4F7FE; */
			}

			.top {
				width: 100%;
				margin: 0 auto;
				display: flex;
				align-items: center;
			}

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

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

			.float {

				display: block;
				width: 50px;
				/* float: left; */
			}

			.center {
				margin: 0 100px;

			}
			table {
				width: 100%;
			    border-collapse: collapse; 
			    border-color: #dfe6ec;
			}
			#tab tr {
				height: 75px;
				text-align: center;
				background-color: #fff;
			}

			#tab tr td,
			th {
				width: 150px;
			}
			input{
				width: 50px;
				height: 22px;
				margin: 0 10px;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="top">
				<span class="float">月份：</span>
				<select id="nian" class="float" onchange="huan()">
				</select>
				<span class="float">&nbsp&nbsp年</span>
				<select id="yue" class="float" onchange="huan()">
				</select>
				<span>&nbsp&nbsp月</span>
				<!-- <span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp统一工作时长</span>
				<input type="text" :value="">
				<span>小时</span>
				<button style="margin-left: 10px;">保存</button> -->
			</div>
		</div>
		<div class="wk">
			<!-- <button οnclick="lastMonth()">上个月</button>
			<div id="month"></div>
			<button οnclick="nextMonth()">下个月</button> -->
		</div>
		<hr />
		
		<div class="center">
			<table id="tab" border="1">
				<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");
			var today=new Date();
			var year=today.getFullYear();
			var month=today.getMonth()+1;
			window.onload = function() {
				var nian = document.getElementById("nian");
				var yue = document.getElementById("yue");
				for (var i = 2099; i >= 1990; 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);
				}
				console.log(nian.value, yue.value);
				document.getElementById("nian").value = year;
				document.getElementById("yue").value = month
				huan();
			}

			function huan() {
				var week = 0; //周几
				var day = 0; //从第一天开始
				var days = 30; //这个月一共有几天
				var list = []

				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();
				

				var newtr = document.createElement("tr");
				newtr.classList.add("add1");
				var WorkDate = '2024-06-01'
				var WorkSystem = '上班'
				for (let i = date.getDay() - 1; i >= 0; i--) {
					list.push('');
				}
				for (let i = 1; i <= days; i++) {
					list.push(i);
				}
				console.log(list , '1233');
				for (; day < list.length; day++, week++) {
					
					if (week == 7) {
						week = 0;
						tab.appendChild(newtr);
						newtr = document.createElement("tr");
						newtr.classList.add("add1");
					}
					var newtd = document.createElement("td");
					if(list[day]!==''){
						var ny = padNumber(nian)+'-'+padNumber(yue)+'-'+padNumber(list[day])
						if(WorkDate == ny){
							newtd.innerText = padNumber(yue)+'-'+padNumber(list[day])+'\n'+WorkSystem;
						} else {
							newtd.innerText = padNumber(yue)+'-'+padNumber(list[day]);
						}
						if(newtd.innerText.indexOf('上班')!==-1){
							newtd.style.color = "red"
						}
					} else {
						newtd.innerText = ''
					}
					newtd.value = list[day];
					newtr.appendChild(newtd);
				}
				tab.appendChild(newtr);
				showMonth()
			}
			//显示当前的年月
			function showMonth() {
				var year_month = nian.value + "年" + yue.value + "月";
				document.getElementById("month").innerHTML = year_month;
			}

			function lastMonth() {
				if (yue.value > 1) yue.value = Number(yue.value) - 1;
				else {
					yue.value = 12;
					nian.value = nian.value - 1;
				}
				huan();
			}

			function nextMonth() {
				if (yue.value < 12) yue.value = Number(yue.value) + 1;
				else {
					yue.value = 1;
					nian.value = nian.value + 1;
				}
				huan();
			}
			function padNumber(num) {
			  return num < 10 ? '0' + num : num.toString();
			}
		</script>
	</body>
</html>
运行结果

在这里插入图片描述