【JavaScript实训】-- 制作年历

最新推荐文章于 2024-05-28 11:44:29 发布

⚆Pearl

最新推荐文章于 2024-05-28 11:44:29 发布

阅读量3.6k

点赞数 22

分类专栏： JavaScript # 前端实训题文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_58330979/article/details/124912132

版权

前端实训题同时被 2 个专栏收录

7 篇文章 3 订阅

订阅专栏

JavaScript

6 篇文章 2 订阅

订阅专栏

1、网页制作年历实现页面：

一、步骤说明：

1、年份修改：

var year = parseInt(prompt('输入年份：', '2022'));//这里的2022可以修改为你想要的年份

2、获取指定年份1月1日的星期数值

var w= new Date(y,0).getDay();

二、完整代码展示：

1、calendar.html代码（记得自己创建哦，名字不同的，里面代码记得修改）：

<!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('输入年份：', '2022'));
      document.write(calendar(year));
    </script>
  </head>
  <body></body>
</html>

2、calendar.js代码（）：

// 定义年历生成函数
function calendar(y) {
    
    // 获取指定年份1月1日的星期数值
    var w= new Date(y,0).getDay();

    var html = '<div class="box">';
    
     // 拼接每个月份的表格
    for (var m = 1; m <= 12; ++m) {
        html += '<table>';
        html += '<tr class="title"><th colspan="7">' + y + ' 年 ' + m + ' 月</th></tr>';
        html += '<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>';
    
        // 获取月份m共有多少天
        var max = new Date(y,m,0).getDate();
        
       html += '<tr>';                         // 开始<tr>标签
        for (var d = 1; d <= max; ++d) {
            if (w && d == 1) {                  // 如果该月的第1天不是星期日，则填充空白
                html += '<td colspan="' + w + '"> </td>';
            }
            html += '<td>' + d + '</td>';
            if (w == 6 && d != max) {           // 如果星期六不是该月的最后一天，则换行
                html += '</tr><tr>';
            } else if (d == max) {               // 该月的最后一天，闭合<tr>标签
                html += '</tr>';
            }
            w = (w + 1 > 6) ? 0 : w + 1;
        }
        html += '</table>';
    }
    html += '</div>';
    return html;
}

代码里面都解释得很清楚啦，就不一一说明了。