（万年历三）利用js在html页面打印万年历

最新推荐文章于 2023-05-29 10:23:16 发布

编程小龙

最新推荐文章于 2023-05-29 10:23:16 发布

阅读量2k

点赞数

分类专栏： web前端基础巩固算法文章标签： web html+js js 万年历网页万年历

本文链接：https://blog.csdn.net/qq_42365534/article/details/108087451

版权

web前端同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

基础巩固

17 篇文章 0 订阅

订阅专栏

算法

9 篇文章 0 订阅

订阅专栏

简述

之前写过在java中纯算法控制台打印万年历：
（万年历一）JAVA在控制台输出万年历（1900年起）
利用java中的calender对象在控制台打印万年历：
（万年历二）JAVA在控制台输出万年历（Calendar版）
这次咱们与前面的原理一样，利用js中的Date对象计算日历，在用dom操作在页面中渲染出来。

效果

在输入框中按格式出入日期，提交后便可在页面中显示日历：
在这里插入图片描述

思路

思路与前一版使用java的calender对象类似，利用Js的Date对象获得指定日期月份的总天数，月份第一天为星期几，日期为该月第几天，然后遍历拼接即可。

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>万年历</title>
		<style>
			table tr:nth-child(odd) {
				background-color: #eee;
			}
			table tr:nth-child(even) {
				background-color: #F3C98F;
			}
			table tr:first-child {
				background-color: skyblue;
			}
			table tr:nth-child(2) {
				background-color: lightpink;
			}
			.active {
				background-color: darkred;
			}
		</style>
	</head>
	<body>
		<input type="date" id="calendar" placeholder="请按2020/8/18的格式输入日期">
		<button id="btn">提交</button>
		<table border="1px" cellspacing="0">
			<tbody id="table">
			</tbody>
		</table>
		<script>
			//设置点击事件，提交值
			var btn = document.getElementById('btn');
			btn.onclick = function(){
				let dateStr = document.getElementById('calendar').value;
				console.log(dateStr);
				getCalendar(dateStr);
			}
			
			//获得日历
			function getCalendar(dateStr){
				let arrD = dateStr.split('-'); 
				//月份是0-11
				let date = new Date(arrD[0],arrD[1]-1,arrD[2]);
				//获取该月第几天
				let day = date.getDate();
				//获得该月总天数,当设置最后一个参数为0时，getDate()就是获取本月总天数
				let days = new Date(arrD[0],arrD[1]-1,0).getDate();
				//获得该月第一天是星期几
				let week = new Date(arrD[0],arrD[1]-1,+1).getDay();
				if(week == 0) {//周日是0，这里把周一至周日改为1-7，方便后面遍历
					week = 7;
				}
				//拼接前部分表格头
				let htmlStr = `
					<tr>
						<th colspan="2">`+dateStr+`</th>
						<th colspan="3">万年历</th>
						<th colspan="2">周末</th>
					</tr>
					<tr>
						<th>星期一</th>
						<th>星期二</th>
						<th>星期三</th>
						<th>星期四</th>
						<th>星期五</th>
						<th>星期六</th>
						<th>星期天</th>
					</tr>
				`;
				//第一天为星期几，前面就要空几列
				let count = week-1;//用于计数，达到7需要另起一列
				htmlStr+='<tr>';
				for(let i=1;i<week;i++){
					htmlStr+='<td></td>';
				}
				//拼接日历
				for(let i=1;i<=days;i++){
					if(count == 7){
						count = 0;
						htmlStr+='</tr>';
						htmlStr+='<tr>';
					}
					if(i == day){
						htmlStr+='<td class="active">'+i+'</td>';
					}else{
						htmlStr+='<td>'+i+'</td>';
					}
					count++;
				}
				//补上余下的空列，表格更好看些
				if(count<7){
					for(;count<7;count++){
						htmlStr+='<td></td>';
					}
					htmlStr+='</tr>';
				}
				//修改表格内容
				let table = document.getElementById('table');
				table.innerHTML = htmlStr;
			}
			
		</script>
	</body>
</html>

编程小龙

关注

0
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
（万年历三）利用js在html页面打印万年历

简述之前写过在java中纯算法控制台打印万年历：（万年历一）JAVA在控制台输出万年历（1900年起）利用java中的calender对象在控制台打印万年历：（万年历二）JAVA在控制台输出万年历（Calendar版）这次咱们与前面的原理一样，利用js中的Date对象计算日历，在用dom操作在页面中渲染出来。效果在输入框中按格式出入日期，提交后便可在页面中显示日历：思路思路与前一版使用java的calender对象类似，利用Js的Date对象获得指定日期月份的总天数，月份第一天为星期几，
复制链接

扫一扫