需求：实现日历生成器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>同志交友</title> <style> input { width: 50px; padding: 10px; font-size: 16px; border: 1px solid #ccc; } select { width:100px; padding:10px; } button { padding: 10px 20px; border: 1px solid #ccc; background: #f5f5f5; cursor: pointer; } #res { margin-top:20px; } #res table { width: 700px; table-layout: fixed; border-collapse: collapse; } #res td,#res th { padding: 10px; border: 1px solid #999; text-align: center; } .red { color: red; } .green { color: green; } </style> </head> <body> <h1>日历生成器</h1> <hr> 请输入本月多少天: <input type="number" id="days" max="31" min="28" step="1" value="31"> 请输入本月一号星期几: <select id="weekday"> <option value="0">星期日</option> <option value="1">星期一</option> <option value="2">星期二</option> <option value="3">星期三</option> <option value="4">星期四</option> <option value="5">星期五</option> <option value="6">星期六</option> </select> <button onclick="makeCalendar()">生成日历</button> <div id="res"></div> <script> //声明函数 function makeCalendar() { //获取 每月天数 var days = Number(document.getElementById('days').value); //获取一号是星期几 var weekday = Number(document.getElementById('weekday').value); //计算日历有多少行 var rows = Math.ceil((days + weekday) / 7); //定义变量 var html = '<table>'; html += ` <tr> <th class="red">星期日</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th class="green">星期六</th> </tr> `; var dayNumber = ''; //循环 生成表格 for (var i = 0; i < rows; i ++) { html += '<tr>'; for (j = 1; j <= 7; j ++) { if (j === 1) { html += '<td class="red">'; } else if (j === 7) { html += '<td class="green">'; } else { html += '<td>'; } dayNumber = j + i*7 - weekday; //计算每个单元格的数值 //判断是否超出范围 if (dayNumber <= 0 || dayNumber > days) { dayNumber = ''; } html += dayNumber+'</td>'; } html += '</tr>'; } html += '</table>' //添加表格内容到页面 document.getElementById('res').innerHTML = html; } </script> </body> </html>