335 lines
12 KiB
JavaScript
335 lines
12 KiB
JavaScript
|
$(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.');
|
|||
|
|
}
|
|||
|
|
});
|