$(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 = ``; var newTabContent = `

第${newIndex}张照片

第${newIndex}张照片
`; $(".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 = ''; for (var i = 0; i < weekday; i++) { tbodyHtml += ""; } // 补齐每月的日期 var changLine = weekday; var tagClass = ''; for (i = 1; i <= days; i++) { //每一个日期的填充 if (year == nowyear && month == nowmonth && i == dateday) { tagClass = "curDate"; //当前日期对应格子 } else { tagClass = "isDate"; } tbodyHtml += "" + i + ""; changLine = (changLine + 1) % 7; if (changLine == 0 && i != days) { //是否换行填充的判断 tbodyHtml += ""; } } $('#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 = ''; for (var i = 0; i < weekday; i++) { tbodyHtml += ""; } // 补齐每月的日期 var changLine = weekday; var tagClass = ''; for (i = 1; i <= days; i++) { //每一个日期的填充 if (year == nowyear && month == nowmonth && i == dateday) { tagClass = "curDate"; //当前日期对应格子 } else { tagClass = "isDate"; } tbodyHtml += "" + i + ""; changLine = (changLine + 1) % 7; if (changLine == 0 && i != days) { //是否换行填充的判断 tbodyHtml += ""; } } $('#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.'); } });