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;
}