new file: bg.png

new file:   jpg/1.jpg
	new file:   jpg/10.jpg
	new file:   jpg/2.jpg
	new file:   jpg/3.jpg
	new file:   jpg/4.jpg
	new file:   jpg/5.jpg
	new file:   jpg/6.jpg
	new file:   jpg/7.jpg
	new file:   jpg/8.jpg
	new file:   jpg/9.jpg
	new file:   jquery-3.7.1.min.js
	new file:   script.js
	new file:   styles.css
	modified:   test.html
	new file:   vue.js

script.js

@@ -0,0 +1,243 @@
+$(document).ready(function() {
+    // 默认显示第一个选项卡
+    $(".tabcontent").hide();
+    $("#Tab1").show();
+    $(".tablinks").first().addClass("active");
+
+    // 点击选项卡按钮时切换内容
+    $(".tablinks").click(function() {
+        var tabName = $(this).data("tab");
+
+        // 隐藏所有选项卡内容
+        $(".tabcontent").hide();
+
+        // 显示当前选项卡内容
+        $("#" + tabName).show();
+
+        // 移除所有按钮的活动状态
+        $(".tablinks").removeClass("active");
+
+        // 设置当前按钮为活动状态
+        $(this).addClass("active");
+    });
+
+    // 添加新选项卡
+    $("#addTab").click(function() {
+        var newTabId = "Tab" + ($(".tablinks").length + 1);
+        var newTabButton = `<button class="tablinks" data-tab="${newTabId}">第${$(".tablinks").length}张照片</button>`;
+        var newTabContent = `
+            <div id="${newTabId}" class="tabcontent">
+                <button class="removeTab" data-tab="${newTabId}">x</button>
+                <h3>第${$(".tablinks").length}张照片</h3>
+                <img style="max-width:100%;overflow:hidden;" src="./jpg/${$(".tablinks").length}.jpg" alt="第${$(".tablinks").length}张照片">
+            </div>
+        `;
+
+        $(".tab").find(".addTab").before(newTabButton);
+        $("body").append(newTabContent);
+
+        // 绑定新添加的选项卡按钮和删除按钮的事件
+        bindTabEvents();
+    });
+
+    // 删除选项卡
+    $(document).on("click", ".removeTab", function() {
+        var tabName = $(this).data("tab");
+        $("#" + tabName).remove();
+        $("button[data-tab='" + tabName + "']").remove();
+
+        // 显示第一个选项卡内容
+        $(".tabcontent").hide();
+        $(".tablinks").first().addClass("active");
+        $("#" + $(".tablinks").first().data("tab")).show();
+    });
+
+    // 绑定选项卡按钮和删除按钮的事件
+    function bindTabEvents() {
+        $(".tablinks").off("click").click(function() {
+            var tabName = $(this).data("tab");
+
+            // 隐藏所有选项卡内容
+            $(".tabcontent").hide();
+
+            // 显示当前选项卡内容
+            $("#" + tabName).show();
+
+            // 移除所有按钮的活动状态
+            $(".tablinks").removeClass("active");
+
+            // 设置当前按钮为活动状态
+            $(this).addClass("active");
+        });
+
+        $(".removeTab").off("click").click(function() {
+            var tabName = $(this).data("tab");
+            $("#" + tabName).remove();
+            $("button[data-tab='" + tabName + "']").remove();
+
+            // 显示第一个选项卡内容
+            $(".tabcontent").hide();
+            $(".tablinks").first().addClass("active");
+            $("#" + $(".tablinks").first().data("tab")).show();
+        });
+    }
+
+    // 初始绑定事件
+    bindTabEvents();
+$(document).ready(function() {
+    var date = new Date();
+    var year = date.getFullYear();
+    var nowyear = date.getFullYear();
+    var month = date.getMonth() + 1;
+    var nowmonth = date.getMonth() + 1;
+    var dateday = date.getDate();
+    var todateHtml = year + '年' + month + '月';
+    $('#topDate').text(todateHtml);
+
+    function showcld() {
+        var monthDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; // 创建数组存放每个月有多少天 ,默认2月为28天
+        // 判断闰年
+        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
+            monthDay[1] = 29;
+        }
+        // 计算每个月的天数
+        var days = monthDay[month - 1];
+        // 判断每月第一天为周几
+        date.setYear(year); //某年
+        date.setMonth(month - 1); //某年的某月
+        date.setDate(1); // 某月的某天
+        var weekday = date.getDay(); // 判断某天是周几
+        // 补齐一号前的空格
+        var tbodyHtml = '<tr>';
+        for (var i = 0; i < weekday; i++) {
+            tbodyHtml += "<td></td>";
+        }
+        // 补齐每月的日期
+        var changLine = weekday;
+        var tagClass = '';
+        for (i = 1; i <= days; i++) { //每一个日期的填充
+            if (year == nowyear && month == nowmonth && i == dateday) {
+                tagClass = "curDate"; //当前日期对应格子
+            } else {
+                tagClass = "isDate";
+            }
+            tbodyHtml += "<td class='" + tagClass + "' data-date='" + year + '-' + month + '-' + i + "'>" + i + "</td>";
+            changLine = (changLine + 1) % 7;
+            if (changLine == 0 && i != days) { //是否换行填充的判断
+                tbodyHtml += "</tr><tr>";
+            }
+        }
+        $('#tbody').empty(); // 清空原有的内容
+        $('#tbody').append(tbodyHtml); //添加当前月份的日期内容
+
+        // 添加点击事件
+        $('#tbody td').click(function() {
+            var dateString = $(this).data('date');
+            document.title = dateString;
+        });
+    }
+
+    // 设置按钮点击事件
+    $('#left').click(function() {
+        month = month - 1;
+        if (month < 1) {
+            month = 12;
+            year--;
+        }
+        var todateHtml = year + '年' + month + '月';
+        $('#topDate').text(todateHtml);
+        showcld();
+    });
+
+    $('#right').click(function() {
+        month = month + 1;
+        if (month > 12) {
+            month = 1;
+            year++;
+        }
+        var todateHtml = year + '年' + month + '月';
+        $('#topDate').text(todateHtml);
+        showcld();
+    });
+
+    showcld(); //页面加载后执行函数
+});
+$(document).ready(function() {
+    var date = new Date();
+    var year = date.getFullYear();
+    var nowyear = date.getFullYear();
+    var month = date.getMonth() + 1;
+    var nowmonth = date.getMonth() + 1;
+    var dateday = date.getDate();
+    var todateHtml = year + '年' + month + '月';
+    $('#topDate').text(todateHtml);
+
+    function showcld() {
+        var monthDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; // 创建数组存放每个月有多少天 ,默认2月为28天
+        // 判断闰年
+        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
+            monthDay[1] = 29;
+        }
+        // 计算每个月的天数
+        var days = monthDay[month - 1];
+        // 判断每月第一天为周几
+        date.setYear(year); //某年
+        date.setMonth(month - 1); //某年的某月
+        date.setDate(1); // 某月的某天
+        var weekday = date.getDay(); // 判断某天是周几
+        // 补齐一号前的空格
+        var tbodyHtml = '<tr>';
+        for (var i = 0; i < weekday; i++) {
+            tbodyHtml += "<td></td>";
+        }
+        // 补齐每月的日期
+        var changLine = weekday;
+        var tagClass = '';
+        for (i = 1; i <= days; i++) { //每一个日期的填充
+            if (year == nowyear && month == nowmonth && i == dateday) {
+                tagClass = "curDate"; //当前日期对应格子
+            } else {
+                tagClass = "isDate";
+            }
+            tbodyHtml += "<td class='" + tagClass + "' data-date='" + year + '-' + month + '-' + i + "'>" + i + "</td>";
+            changLine = (changLine + 1) % 7;
+            if (changLine == 0 && i != days) { //是否换行填充的判断
+                tbodyHtml += "</tr><tr>";
+            }
+        }
+        $('#tbody').empty(); // 清空原有的内容
+        $('#tbody').append(tbodyHtml); //添加当前月份的日期内容
+
+        // 添加点击事件
+        $('#tbody td').click(function() {
+            var dateString = $(this).data('date');
+            $('#selectedDate').text(dateString);
+        });
+    }
+
+    // 设置按钮点击事件
+    $('#left').click(function() {
+        month = month - 1;
+        if (month < 1) {
+            month = 12;
+            year--;
+        }
+        var todateHtml = year + '年' + month + '月';
+        $('#topDate').text(todateHtml);
+        showcld();
+    });
+
+    $('#right').click(function() {
+        month = month + 1;
+        if (month > 12) {
+            month = 1;
+            year++;
+        }
+        var todateHtml = year + '年' + month + '月';
+        $('#topDate').text(todateHtml);
+        showcld();
+    });
+
+    showcld(); //页面加载后执行函数
+});
+});

styles.css

@@ -0,0 +1,119 @@
+/* 选项卡按钮样式 */
+.tabcontent {
+    text-align: center; /* 使“日期”居中显示 */
+}
+.tab {
+    overflow: hidden;
+    border: 1px solid #ff69b4; /* 粉色边框 */
+    background-color: #ffc0cb; /* 粉色背景 */
+}
+
+.tab button {
+    background-color: inherit;
+    float: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 14px 16px;
+    transition: 0.3s;
+    color: #000; /* 黑色文字 */
+}
+
+.tab button:hover {
+    background-color: #ff69b4; /* 粉色背景 */
+}
+
+.tab button.active {
+    background-color: #ff1493; /* 深粉色背景 */
+    color: #fff; /* 白色文字 */
+}
+
+/* 添加选项卡按钮样式 */
+.addTab {
+    background-color: #ff69b4; /* 粉色背景 */
+    color: #fff; /* 白色文字 */
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 14px 16px;
+    transition: 0.3s;
+}
+
+.addTab:hover {
+    background-color: #ff1493; /* 深粉色背景 */
+}
+
+/* 选项卡内容样式 */
+.tabcontent {
+    display: none;
+    padding: 6px 12px;
+    border: 1px solid #ff69b4; /* 粉色边框 */
+    border-top: none;
+    background-color: #fff; /* 白色背景 */
+}
+
+/* 删除按钮样式 */
+.removeTab {
+    background-color: #ff69b4; /* 粉色背景 */
+    color: #fff; /* 白色文字 */
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 5px 10px;
+    transition: 0.3s;
+    font-size: 12px; /* 调整字体大小 */
+}
+
+.removeTab:hover {
+    background-color: #ff1493; /* 深粉色背景 */
+}
+
+img{height: auto; width: auto\9; width:28%;}
+
+.cldBody {
+    background: #f7f7f7;
+    width: 420px;
+    margin: 10px auto;
+}
+.cldBody .top {
+    height: 60px;
+    line-height: 60px;
+    text-align: center;
+    position: relative;
+}
+#topDate {
+    font-size: 24px;
+}
+#week td {
+    font-size: 15px;
+}
+td {
+    width: 60px;
+    height: 60px;
+    line-height: 60px;
+    text-align: center;
+    font-size: 20px;
+}
+#tbody td:hover {
+    background: #ededed;
+    cursor: pointer;
+}
+.curDate {
+    color: red;
+    font-weight: bold;
+}
+#left, #right {
+    width: 60px;
+    height: 60px;
+    position: absolute;
+    cursor: pointer;
+}
+#left {
+    left: 0;
+}
+#right {
+    right: 0;
+}
+#left:hover, #right:hover {
+    background-color: rgba(30, 30, 30, 0.2);
+}

test.html

@@ -1,2 +1,44 @@
-<h1>这是一个标题</h1>
+<!DOCTYPE html>
-
+<html>
+<head>
+    <script src="./jquery-3.7.1.min.js"></script>
+    <script src="./vue.js"></script>
+    <meta charset="UTF-8" />
+    <title>IrisVega's HTML Test</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body background="./bg.png" style="background-size:100% 100%; background-attachment: fixed;">
+    <div class="tab">
+        <button class="tablinks" data-tab="Tab1">日历</button>
+        <button id="addTab" class="addTab">+</button>
+    </div>
+    <div id="Tab1" class="tabcontent">
+        <h3 id="selectedDate">点击日期后，当前位置显示所点日期</h3>
+        <div class="cldBody">
+            <table>
+                <thead>
+                    <tr>
+                        <td colspan="7">
+                            <div class="top">
+                                <span id="left"><</span>
+                                <span id="topDate"></span>
+                                <span id="right">></span>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr id="week">
+                        <td>日</td>
+                        <td>一</td>
+                        <td>二</td>
+                        <td>三</td>
+                        <td>四</td>
+                        <td>五</td>
+                        <td>六</td>
+                    </tr>
+                </thead>
+                <tbody id="tbody"></tbody>
+            </table>
+        </div>
+    <script src="script.js"></script>    
+</body>
+</html>