0


制作一个万年历

完成效果(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('
' + (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('
'); //按月进行换行 月标签的前标签 } </script>
标签: html 前端 javascript

本文转载自: https://blog.csdn.net/sword_unmiss/article/details/123062847
版权归原作者 sword_unmiss 所有, 如有侵权,请联系我们删除。

“制作一个万年历”的评论:

还没有评论