使用 JavaScript 动态生成全年日历

结果或目标

我们的目标是编写一段JavaScript脚本，接收用户输入的年份参数（如2019），并在浏览器中实时渲染出该年份全部12个月的日历表格。日历需包含正确的月份名称、星期表头以及按周排列的日期数字。

准备条件

运行环境：任何现代支持ECMAScript标准的Web浏览器。
开发文件：需要两个核心文件：index.html用于承载结构与样式，calendar.js用于存放核心业务逻辑。

真实操作顺序

第1步：设置 HTML 结构与基础样式

首先在 <head> 中引入CSS定义外观，并通过 <script> 标签挂载外部JS脚本。同时添加一个弹窗交互来捕获年份输入。

<!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('输入年份：','2019'));
   // 将生成的HTML插入页面
   document.write(calendar(year));
  </script>
 </head>
 <body></body>
</html>

第2步：编写 calendar.js 获取时间数据

在 calendar.js 中创建主函数。利用 `new Date(y, m, d)` 构造函数计算关键节点：

• 确定星期偏移量：`new Date(y, 0).getDay()` 获取当年1月1日是星期几（周日为0）。
• 计算当月天数：`new Date(y, m, 0).getDate()` 通过获取下个月第0天，巧妙算出当前月最大天数。

初始化 HTML 容器开始符：

function calendar(y){
 var w = new Date(y,0).getDay(); // 初始星期偏移
 var html = '<div class="box">';
 // ...循环生成每个月的内容...

第3步：循环遍历生成月份表格

使用 for 循环从1月到12月迭代，内部嵌套循环填充日期单元格：

// 月份循环
for(m=1;m<=12;m++){
  html += '<table>';
  html += '<tr class="title"><th colspan="7">' + y + '年' +m+' 月</th></tr>';
  html += '<tr><td>日</td>...<td>六</td></tr>' // 星期表头
  
  var max = new Date(y,m,0).getDate(); // 获当月总天数
  
  // 填充具体日期
  for (d=1;d<=max;d++){
   if(w && d== 1) { 
    // 如果非首行，且不是周一(0)，则补空格
    html += '<td colspan ="' + w + '"> </td>';
   }
   html += '<td>' +d+ '</td>';
   
   // 判断是否换行：周六(d!=最后一天时)需换下一行

   // 或者如果是月底，直接闭合
   if(w == 6 && d != max){
    html += '</tr><tr>'; 
   }else if(d==max){
    html += '</tr>';
   }
   
   // 更新下一个日期对应的星期索引
   w = (w+1>6) ? 0 : w+1;
  }
  html += '</table>'; // 闭合月份表格
}
 html += '</div>';
 return html;
}

完成判断
双击打开HTML文件，在弹出的提示框中输入有效年份并确认。页面上应显示包含12个表格的全景日历，格式与预期一致。


简要总结
以上就是JavaScript实现年历效果的详细内容，更多关于JavaScript时间处理与DOM操作的资料请关注本站其它相关文章！