JavaScript编写日历（简单易懂，代码可以直接运行）

最新推荐文章于 2024-05-17 14:54:19 发布

henu-于笨笨

最新推荐文章于 2024-05-17 14:54:19 发布

阅读量4.3k

点赞数 10

分类专栏： vue系列文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_45527999/article/details/120486624

版权

vue系列专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用JavaScript和HTML创建一个简单的交互式日历。用户可以通过输入年份来展示指定年的日历，日历以表格形式显示，包括月份标题和日期，并根据实际星期数正确对齐。代码中，`calendar.js`文件定义了`calendar`函数，用于生成HTML日历，然后在HTML文件中调用并插入到页面中。

摘要由CSDN通过智能技术生成

JavaScript编写日历（简单易懂，代码可以直接运行）

运行效果图如下：
在这里插入图片描述
点个👍吧，代码如下：
首先是日历代码是HTML文件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>制作年历</title>
		<style type="text/css">
			body{text-align: center;}
			.box{margin: 0 auto;width: 880px;}
			.title{background: #ccc;}
			table{height: 200px;width: 200px;font-size: 12px;text-align: center;float: left;margin: 10px;font-size: arial;}
			
		</style>
		<script src="calendar.js"></script>
	</head>
	<body>
		<div id="app">
			
		</div>
		<script>
			var year = parseInt(prompt('输入年份','2017'))
			// document.write(calendar(year))
			document.getElementById('app').innerHTML = calendar(year)
		</script>
	</body>
</html>

接下来是calendar.js文件：

function calendar(y){
	//获取指定年份1月1日的星期数值
	var w = new Date(y,0).getDay();
	var html = '<div class = "box">'
	//拼接每个月份的表格
	for (var m = 1;m <=12;m++){
		html += '<table>';
		html += '<tr class = title><th colspan="7">' + y + '年' + m + '月</th></tr>';
		html += '<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>'
		//获取月份m共有多少天
		var max = new Date(y,m,0).getDate()
		//开始<tr>标签
		html += '<tr>';
		for (var d = 1;d <= max;d++)
		{
			//如果该月的第一天不是星期日，则填充空白
			if(w && d == 1)
			{
				html += '<td colspan = " '+ w +' "> </td>';
			}
			html += '<td>' + d + '</td>';
			//如果星期六不是该月的最后一天，则换行
			if (w == 6 && d != max){
				html += '</tr><tr>';
			}else if(d == max)  //该月的最后一天，闭合<tr>
			{
				html += '</tr>';
			}
			w = (w + 1 > 6) ? 0 : w+1;
		}
		html += '</table>'
		
	}
	html += '</div>';
	return html;
}

函数的最后不要忘了返回一个HTML给调用函数，点个👍吧

henu-于笨笨

关注

10
点赞
踩
32

收藏

觉得还不错? 一键收藏
打赏
3
评论
JavaScript编写日历（简单易懂，代码可以直接运行）

JavaScript编写日历（简单易懂，代码可以直接运行）运行效果图如下：点个????吧，代码如下：首先是日历代码是HTML文件：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>制作年历</title> <style type="text/css"> body{text-align: center;} .box{mar
复制链接

扫一扫