Hudi / 留言界面js

function initPages() { const cards = document.querySelectorAll('.animate-card'); const wrapper = document.querySelector('.animation-wrapper'); const finalCard = document.querySelector('.final-card') const newest_comment=loadData("newest_comment",10) // 定义所有可能的飞入动画 const flyAnimations = [ 'flyFromTopLeft', 'flyFromTopRight', 'flyFromBottomLeft', 'flyFromBottomRight', 'flyFromLeft', 'flyFromRight', 'flyFromTop', 'flyFromBottom' ] if (newest_comment === null || newest_comment.length <=0){ fillFakeCard(flyAnimations,wrapper,finalCard) return } // 初始化动画卡片 for (let i = 0; i < newest_comment.length; i++) { const item = newest_comment[i] const card_container =document.createElement("div") const card_ = getRandomCard() card_container.classList.add("message-container",'animate-card',card_) card_container.innerHTML = ` <div class="fake-content"> <div class="fake-image"><img src="${item.avatar}" alt=""></div> <div class="fake-text"> <div class="fake-title">${item.nick}</div> <div class="fake-lines"> <div class="fake-line">${removeHTMLTags(item.content)}</div> <div class="fake-line">${formatDateTime(new Date(item.date))}</div> </div> </div> </div> ` // wrapper.append(card_container) const baseColor = getRandomPastelColor(); const contrastColor = getContrastColor(baseColor); card_container.style.backgroundColor = baseColor.toString(); const fakeContent = card_container.querySelector('.fake-content'); if (fakeContent) { fakeContent.style.backgroundColor = contrastColor; // 为内部元素设置基础颜色（形成反向对比） const elements = fakeContent.querySelectorAll('.fake-image, .fake-title, .fake-line'); elements.forEach(element => { element.style.backgroundColor = baseColor.toString(); }); } const randomAnimation = flyAnimations[Math.floor(Math.random() * flyAnimations.length)]; const delay = i * 0.2; card_container.style.animationDelay = `${delay}s`; card_container.style.animationName = randomAnimation; card_container.addEventListener('animationend', function() { this.style.animation = 'none'; const position = getRandomPosition(this,wrapper); const rotation = (Math.random() - 0.5) * 40; const scale = 0.8 + Math.random() * 0.4; this.style.position = 'absolute'; this.style.left = position.x + 'px'; this.style.top = position.y + 'px'; this.style.transform = `rotate(${rotation}deg) scale(${scale})`; this.style.transition = 'all 0.3s ease'; this.style.opacity = '1'; this.style.visibility = 'visible'; // 添加鼠标悬停效果 this.addEventListener('mouseover', function() { this.style.transform = `rotate(${rotation}deg) scale(${scale * 1.15})`; // 增加放大倍数 this.style.boxShadow = '0 10px 25px rgba(0,0,0,0.15)'; // 增加阴影 this.style.zIndex = '81'; this.style.cursor = 'pointer'; this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'; // 添加平滑过渡 // 隐藏final-card finalCard.style.visibility = 'hidden'; }); // 添加鼠标移出效果 this.addEventListener('mouseout', function() { this.style.transform = `rotate(${rotation}deg) scale(${scale})`; this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.06)'; this.style.zIndex = '80'; // 恢复原来的层级 this.style.cursor = 'default'; this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'; // 显示final-card finalCard.style.visibility = 'visible'; }); }); wrapper.append(card_container) } } function getRandomCard() { const cards = ["card-1","card-2","card-3","card-4","card-5","card-6","card-7","card-8","card-9","card-10"]; return cards[Math.floor(Math.random() * cards.length)]; } function getRandomPastelColor() { return { hue: Math.floor(Math.random() * 360), saturation: 40 + Math.random() * 20, lightness: 92 + Math.random() * 6, toString() { return `hsl(${this.hue}, ${this.saturation}%, ${this.lightness}%)`; } }; } function formatDateTime(date) { var y = date.getFullYear(); var m = date.getMonth() + 1; m = m < 10 ? ('0' + m) : m; var d = date.getDate(); d = d < 10 ? ('0' + d) : d; var h = date.getHours(); h = h < 10 ? ('0' + h) : h; var minute = date.getMinutes(); minute = minute < 10 ? ('0' + minute) : minute; var second = date.getSeconds(); second = second < 10 ? ('0' + second) : second; return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second; } function fillFakeCard(flyAnimations,wrapper,finalCard) { const number = 10 for (let i = 0; i < number; i++) { const card_container =document.createElement("div") const card_ = getRandomCard() card_container.classList.add("message-container",'animate-card',card_) card_container.innerHTML = ` <div class="fake-content"> <div class="fake-image"></div> <div class="fake-text"> <div class="fake-title"></div> <div class="fake-lines"> <div class="fake-line"></div> <div class="fake-line"></div> </div> </div> </div> ` const baseColor = getRandomPastelColor(); const contrastColor = getContrastColor(baseColor); // 设置卡片背景色 card_container.style.backgroundColor = baseColor.toString(); // 为内容区域设置对比色 const fakeContent = card_container.querySelector('.fake-content'); if (fakeContent) { fakeContent.style.backgroundColor = contrastColor; // 为内部元素设置基础颜色（形成反向对比） const elements = fakeContent.querySelectorAll('.fake-image, .fake-title, .fake-line'); elements.forEach(element => { element.style.backgroundColor = baseColor.toString(); }); } // 随机选择一个飞入动画 const randomAnimation = flyAnimations[Math.floor(Math.random() * flyAnimations.length)]; const delay = i * 0.2; card_container.style.animationDelay = `${delay}s`; card_container.style.animationName = randomAnimation; card_container.addEventListener('animationend', function() { this.style.animation = 'none'; const position = getRandomPosition(this,wrapper); const rotation = (Math.random() - 0.5) * 40; const scale = 0.8 + Math.random() * 0.4; this.style.position = 'absolute'; this.style.left = position.x + 'px'; this.style.top = position.y + 'px'; this.style.transform = `rotate(${rotation}deg) scale(${scale})`; this.style.transition = 'all 0.3s ease'; this.style.opacity = '1'; this.style.visibility = 'visible'; // 添加鼠标悬停效果 this.addEventListener('mouseover', function() { this.style.transform = `rotate(${rotation}deg) scale(${scale * 1.15})`; // 增加放大倍数 this.style.boxShadow = '0 10px 25px rgba(0,0,0,0.15)'; // 增加阴影 this.style.zIndex = '2002'; this.style.cursor = 'pointer'; this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'; // 添加平滑过渡 // 隐藏final-card finalCard.style.visibility = 'hidden'; }); // 添加鼠标移出效果 this.addEventListener('mouseout', function() { this.style.transform = `rotate(${rotation}deg) scale(${scale})`; this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.06)'; this.style.zIndex = '1001'; // 恢复原来的层级 this.style.cursor = 'default'; this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'; // 显示final-card finalCard.style.visibility = 'visible'; }); }); wrapper.append(card_container) } } function removeHTMLTags(str) { return str.replace(/<[^>]*>/g, ' '); } function getRandomPosition(element,wrapper) { const wrapperRect = wrapper.getBoundingClientRect(); const elementRect = element.getBoundingClientRect(); const maxX = wrapperRect.width - elementRect.width; const maxY = wrapperRect.height - elementRect.height; const randomX = Math.random() * maxX; const randomY = Math.random() * maxY; return { x: randomX, y: randomY }; } function getContrastColor(baseColor) { const contrastHue = (baseColor.hue + 180) % 360; const contrastSaturation = Math.min(baseColor.saturation + 10, 60); const contrastLightness = Math.max(baseColor.lightness - 8, 85); return `hsl(${contrastHue}, ${contrastSaturation}%, ${contrastLightness}%)`; } // 取数据 function loadData(name, time) { let d = JSON.parse(localStorage.getItem(name)); // 过期或有错误返回 0 否则返回数据 if (d) { let t = Date.now() - d.time if (-1 < t && t < (time * 60000)) return d.data; } return null; }; function init(){ const path = window.location.pathname; if (path === '/messages/') { initPages() }else { return } } init()