中秋祝福留言代码怎么写？

中秋佳节，明月寄相思，祝福传心意。在这个团圆的时刻，一条用代码编写的祝福留言，不仅能传递传统温情，还能通过技术细节让心意更独特、更有仪式感。本文将从基础到进阶，教你用HTML、CSS和JavaScript打造一份“会说话”的中秋祝福留言板，让代码与节日碰撞出温暖火花。

一、基础篇：从0到1搭建中秋祝福留言板

1. HTML结构：搭建祝福的“骨架”

首先，我们需要用HTML构建祝福留言板的基本框架，包含标题、祝福输入区、留言展示区和发送按钮。语义化标签能让结构更清晰，也便于后续样式和交互的添加。 ```html ```

2. CSS样式：渲染中秋的“氛围感”

中秋的氛围离不开暖色调、传统元素和柔和的排版。我们用CSS为留言板添加中秋主题样式，让页面更有节日温度。 ```css/* style.css */* { margin: 0; padding: 0; box-sizing: border-box;}body { font-family: "Microsoft YaHei", sans-serif; background: linear-gradient(135deg, ffeaa7 0%, fab1a0 100%); min-height: 100vh; padding: 20px;}.container { max-width: 800px; margin: 0 auto; background: rgba(255, 255, 255, 0.9); border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden;}.header { text-align: center; padding: 30px 20px; background: linear-gradient(135deg, fdcb6e 0%, e17055 100%); color: white;}.header h1 { font-size: 2.5rem; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);}.header p { font-size: 1.1rem; opacity: 0.9;}.main { padding: 30px;}.input-area { margin-bottom: 30px;}wishInput { width: 100%; height: 120px; padding: 15px; border: 2px solid fdcb6e; border-radius: 10px; font-size: 1rem; resize: none; outline: none; transition: border-color 0.3s;}wishInput:focus { border-color: e17055;}.send-btn { display: block; margin: 15px auto 0; padding: 12px 30px; background: linear-gradient(135deg, fdcb6e 0%, e17055 100%); color: white; border: none; border-radius: 25px; font-size: 1rem; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s;}.send-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(230, 126, 34, 0.4);}.wish-list { display: grid; gap: 15px;}.wish-item { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); border-left: 4px solid fdcb6e; animation: slideIn 0.5s ease;}@keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); }}.wish-item .wish-text { font-size: 1.1rem; color: 2d3436; margin-bottom: 8px;}.wish-item .wish-time { font-size: 0.9rem; color: 636e72; text-align: right;}```

3. JavaScript交互：让祝福“活”起来

最后，用JavaScript实现发送祝福、实时显示留言、本地存储等功能，让留言板具备交互能力，还能保存用户的美好回忆。 ```javascript// script.jsdocument.addEventListener('DOMContentLoaded', () => { const wishInput = document.getElementById('wishInput'); const sendBtn = document.getElementById('sendBtn'); const wishList = document.getElementById('wishList'); // 从本地存储加载已有留言 loadWishes(); // 发送祝福按钮点击事件 sendBtn.addEventListener('click', sendWish); // 回车键发送祝福（Ctrl+Enter） wishInput.addEventListener('keydown', (e) => { if (e.key === 'Enter' && e.ctrlKey) { sendWish(); } }); function sendWish() { const wishText = wishInput.value.trim(); if (!wishText) { showMessage('请输入祝福内容哦~'); return; } // 创建祝福对象 const wish = { text: wishText, time: new Date().toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }) }; // 添加到本地存储 saveWish(wish); // 添加到页面显示 addWishToList(wish); // 清空输入框 wishInput.value = ''; showMessage('祝福发送成功！'); } // 添加留言到页面列表 function addWishToList(wish) { const wishItem = document.createElement('div'); wishItem.className = 'wish-item'; wishItem.innerHTML = ` `; wishList.insertBefore(wishItem, wishList.firstChild); } // 保存留言到本地存储 function saveWish(wish) { let wishes = JSON.parse(localStorage.getItem('midWishes') || '[]'); wishes.unshift(wish); // 新留言添加到开头 localStorage.setItem('midWishes', JSON.stringify(wishes)); } // 从本地存储加载留言 function loadWishes() { const wishes = JSON.parse(localStorage.getItem('midWishes') || '[]'); wishes.forEach(wish => addWishToList(wish)); } // 显示提示信息（替代alert） function showMessage(message) { const messageDiv = document