1、网页制作年历实现页面:
一、步骤说明:
1、年份修改:
var year = parseInt(prompt('输入年份:', '2022'));//这里的2022可以修改为你想要的年份
2、获取指定年份1月1日的星期数值
var w= new Date(y,0).getDay();
二、完整代码展示:
1、calendar.html代码(记得自己创建哦,名字不同的,里面代码记得修改):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>制作年历</title>
<style>
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-family:arial;}
</style>
<script src="calendar.js"></script>
<script>
var year = parseInt(prompt('输入年份:', '2022'));
document.write(calendar(year));
</script>
</head>
<body></body>
</html>
2、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();
html += '<tr>'; // 开始<tr>标签
for (var d = 1; d <= max; ++d) {
if (w && d == 1) { // 如果该月的第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;
}
代码里面都解释得很清楚啦,就不一一说明了。
更多推荐
【JavaScript实训】-- 制作年历
发布评论