完成效果(2022年)
CSS部分
<style> .years_header { width: 350px; height: 30px; margin: 0 auto; line-height: 30px; font-size: 35px; text-align: center; margin-bottom: -20px; } .month_header { width: 298px; height: 30px; text-align: center; line-height: 30px; font-size: 16px; font-weight: 700; } .months { width: 297px; height: 210px; float: left; box-sizing: border-box; text-align: left; border: 1px red dashed; margin-left: 65px; margin-top: 15px; border-radius: 15px; } .days { width: 42px; height: 25px; float: left; box-sizing: border-box; text-align: center; line-height: 20px; background-color: aqua; border: 1px black solid; border-radius: 5px; } </style>
JS部分
<script> var year = prompt("请输入一个年份") document.write("
" + year + "年" + "
")
for (let month = 0; month < 12; month++) {
var days = new Date(year, month + 1, 0).getDate() //获取每一个月有多少天
if (month % 4 == 0) {
document.write("") } document.write('
'); //按月进行换行 月标签的前标签
document.write('
'); //按月进行换行 月标签的前标签
}
</script>
' + (year + "年" + (month + 1) + "月" + "
") + "
");
for (let week = 0; week < 7; week++) {
switch (week) {
case 0:
document.write('") + "
' + "日" + "
");
break;
case 1:
document.write('' + "一" + "
");
break;
case 2:
document.write('' + "二" + "
");
break;
case 3:
document.write('' + "三" + "
");
break;
case 4:
document.write('' + "四" + "
");
break;
case 5:
document.write('' + "五" + "
");
break;
case 6:
document.write('' + "六" + "
");
break;
}
}
var week = new Date(year, month, 1).getDay()
for (let space = 0; space < week; space++) {
document.write('' + "
"); //定义每个月的第一天是周几,是周几就在前边写多少个空div
}
for (let i = 0; i < days; i++) {
document.write('' + (i + 1) + "
"); //循环输出每一天
}
document.write('
本文转载自: https://blog.csdn.net/sword_unmiss/article/details/123062847
版权归原作者 sword_unmiss 所有, 如有侵权,请联系我们删除。
版权归原作者 sword_unmiss 所有, 如有侵权,请联系我们删除。