<!doctype html> <html> <head> <meta charset="utf-8"> <title>ww</title> <style> table { float: left; padding: 15px 15px 15px 15px; display: block; } th { background: darkred; color: whitesmoke; } td { color: burlywood; } a { text-decoration: none; color: black; } a:active { background: yellow; color: brown; } </style> <script> var year = parseInt(prompt("输入年份:", "2021")); document.write(calendar(year)); function calendar(y) { var html = ''; for (var m = 1; m <= 12; ++m) { html += '<table>'; html += '<tr><th colspan="7">' + y + '年' + m + '月</th></tr>'; html += '<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>'; // 获取每个月份共有多少天 var max = new Date(y, m, 0).getDate(); // 从该月份第一天遍历到最后一天 for (var d = 1; d <= max; ++d) { // 获取指定日期的星期值 var w = new Date(y, m - 1, d).getDay(); if (d == 1) { // 一个月第一天就是一行 html += '<tr>'; } // 逢周日是分行开始 if (d != 1 && w == 0) { html += '<tr>' } // 第一天不是周日时,插入空白 if (d == 1 && w != 0) { html += '<td colspan="' + w + '"></td>' } html += '<td onclick="showDate(' + year + ',' + m + ',' + d + ',' + w + ')">' + d + '</td>'; // 逢周六分行结束 if (w == 6) { html += '</tr>' } } html += '</table>'; } return html; } function showDate(y, m, d, w) { w = w == 0 ? '日' : w; console.log(y + "年" + m + "月" + d + "日" + "周" + w) } </script> </head> <body> </body> </html>