html-re/public/script-main.js

$(document).ready(function() {
    // 默认显示第一个选项卡
    $(".tabcontent").hide();
    $("#Tab0").show();
    $(".tablinks").first().addClass("active");
    var openedTabs = new Set();
    // 点击选项卡按钮时切换内容
    $(".tablinks").click(function() {
        var tabName = $(this).data("tab");

        // 隐藏所有选项卡内容
        $(".tabcontent").hide();

        // 显示当前选项卡内容
        $("#" + tabName).show();

        // 移除所有按钮的活动状态
        $(".tablinks").removeClass("active");

        // 设置当前按钮为活动状态
        $(this).addClass("active");
        updateContentOpacity($("#mySlider").val());
    });

    // 添加新选项卡
    $("#addTab").click(function() {
        var newIndex = findNextAvailableIndex();
        var newTabId = "Tab" + newIndex;
        var newTabButton = `<button class="tablinks" data-tab="${newTabId}">第${newIndex}张照片<span class="closeButton" data-tab="${newTabId}">x</span></button>`;
        var newTabContent = `
            <div id="${newTabId}" class="tabcontent">
                <h3>第${newIndex}张照片</h3>
                <img style="max-width:100%;overflow:hidden;" src="./jpg/${newIndex}.jpg" alt="第${newIndex}张照片">
            </div>
        `;
        $(".tab").find(".addTab").before(newTabButton);
        $("body").append(newTabContent);
        $(".tabcontent").hide();
        $("#" + newTabId).show();
        $(".tablinks").removeClass("active");
        $(`.tablinks[data-tab="${newTabId}"]`).addClass("active");
        bindTabEvents();
        updateContentOpacity($("#mySlider").val());
        openedTabs.add(newIndex);
    });
    // 删除选项卡
    $(document).on("click", ".closeButton", function() {
        var tabName = $(this).data("tab");
        var activeTab = $(".tablinks.active").data("tab");

        // 记录当前活动的标签页
        var previousTabButton = $(".tablinks.active").prev(".tablinks");

        // 删除当前标签页
        $("#" + tabName).remove();
        $("button[data-tab='" + tabName + "']").remove();
        // 如果删除的是当前活动的标签页
        if (tabName === activeTab) {
            // 显示上一个标签页
            if (previousTabButton.length > 0) {
                var previousTab = previousTabButton.data("tab");
                $("#" + previousTab).show();
                previousTabButton.addClass("active");
            } else {
                // 如果没有上一个标签页，显示第一个标签页
                $(".tabcontent").hide();
                $(".tablinks").first().addClass("active");
                $("#" + $(".tablinks").first().data("tab")).show();
            }
        }
        updateContentOpacity($("#mySlider").val());
    });

    // 绑定选项卡按钮和删除按钮的事件
    function bindTabEvents() {
        $(".tablinks").off("click").click(function() {
            var tabName = $(this).data("tab");

            // 隐藏所有选项卡内容
            $(".tabcontent").hide();

            // 显示当前选项卡内容
            $("#" + tabName).show();

            // 移除所有按钮的活动状态
            $(".tablinks").removeClass("active");

            // 设置当前按钮为活动状态
            $(this).addClass("active");
            updateContentOpacity($("#mySlider").val());
        });

        $(".removeTab").off("click").click(function() {
            var tabName = $(this).data("tab");
            var activeTab = $(".tablinks.active").data("tab");

            // 记录当前活动的标签页
            var previousTabButton = $(".tablinks.active").prev(".tablinks");

            // 删除当前标签页
            $("#" + tabName).remove();
            $("button[data-tab='" + tabName + "']").remove();

            // 如果删除的是当前活动的标签页
            if (tabName === activeTab) {
                // 显示上一个标签页
                if (previousTabButton.length > 0) {
                    var previousTab = previousTabButton.data("tab");
                    $("#" + previousTab).show();
                    previousTabButton.addClass("active");
                } else {
                    // 如果没有上一个标签页，显示第一个标签页
                    $(".tabcontent").hide();
                    $(".tablinks").first().addClass("active");
                    $("#" + $(".tablinks").first().data("tab")).show();
                }
            }
            updateContentOpacity($("#mySlider").val());
        });
    }
    function findNextAvailableIndex() {
        var indices = $(".tablinks").map(function() {
            return parseInt($(this).data("tab").replace("Tab", ""));
        }).get();
        indices.sort((a, b) => a - b); // 确保索引是按顺序排列的
        // for (var i = 1; i <= indices.length + 1; i++) {
        //     if (!indices.includes(i)) {
        //         return i;
        //     }
        // }
        // return indices.length + 1;
        //最小索引值
        // var maxIndex = indices.length > 0 ? indices[indices.length - 1] : 0; // 找到最大索引值，如果没有索引则默认为0
        // return maxIndex + 1; // 返回最大索引值加1
        //最大索引值
        // 找到未打开过的最小索引
        var nextIndex = 1;
        while (indices.includes(nextIndex) || openedTabs.has(nextIndex)) {
            nextIndex++;
        }

        return nextIndex;
    }
    // 初始绑定事件
    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);
            // window.location.href = 'date.html?date=' + encodeURIComponent(dateString);
            var url = 'date.html?date=' + encodeURIComponent(dateString);
            window.open(url, '_blank');            
        });
    }

    // 设置按钮点击事件
    $('#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() {
    const slider = $('#mySlider');
    const sliderValue = $('#sliderValue');
    //const content = $('.tabcontent');
    // 初始化显示滑块的值
    sliderValue.text(slider.val());
    updateContentOpacity(slider.val());
    // 监听滑块值的变化
    slider.on('input', function() {
        const value = slider.val();
        sliderValue.text(value);
        updateContentOpacity(value);});
});
    function updateContentOpacity(value) {
        $('.tabcontent').css('--content-opacity', value / 100);
    }
});
$(document).ready(function() {
    $('#closeButton').click(function() {
        window.close();
    });
  });
$(document).ready(function() {
    var urlParams = new URLSearchParams(window.location.search);
    var dateString = urlParams.get('date');
    if (dateString) {
        $('#selectedDate').text(dateString);
    } else {
        console.warn('No date found in the URL.');
    }
});