API tools faq
paste
Advertisement
a1144738218

恋爱记录.html

a1144738218
Jun 27th, 2025 (edited)
113
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 27.33 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>我们的恋爱记录</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.             font-family: 'Microsoft YaHei', sans-serif;
  13.         }
  14.        
  15.         body {
  16.             background-color: #fff5f5;
  17.             color: #333;
  18.             line-height: 1.6;
  19.         }
  20.        
  21.         .container {
  22.             max-width: 1000px;
  23.             margin: 0 auto;
  24.             padding: 20px;
  25.         }
  26.        
  27.         header {
  28.             text-align: center;
  29.             padding: 30px 0;
  30.             background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  31.             color: white;
  32.             border-radius: 10px;
  33.             margin-bottom: 30px;
  34.             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  35.         }
  36.        
  37.         h1 {
  38.             font-size: 2.5rem;
  39.             margin-bottom: 10px;
  40.         }
  41.        
  42.         .subtitle {
  43.             font-size: 1.2rem;
  44.             opacity: 0.9;
  45.         }
  46.        
  47.         .section {
  48.             background-color: white;
  49.             border-radius: 10px;
  50.             padding: 25px;
  51.             margin-bottom: 30px;
  52.             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  53.         }
  54.        
  55.         h2 {
  56.             color: #ff6b81;
  57.             margin-bottom: 20px;
  58.             padding-bottom: 10px;
  59.             border-bottom: 2px solid #ffecef;
  60.         }
  61.        
  62.         .timer {
  63.             font-size: 1.8rem;
  64.             text-align: center;
  65.             margin: 20px 0;
  66.             color: #ff6b81;
  67.             font-weight: bold;
  68.         }
  69.        
  70.         .timer span {
  71.             display: inline-block;
  72.             margin: 0 5px;
  73.             padding: 5px 10px;
  74.             background-color: #ffecef;
  75.             border-radius: 5px;
  76.         }
  77.        
  78.         .gallery {
  79.             display: grid;
  80.             grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  81.             gap: 15px;
  82.             margin-top: 20px;
  83.         }
  84.        
  85.         .photo {
  86.             position: relative;
  87.             overflow: hidden;
  88.             border-radius: 8px;
  89.             height: 200px;
  90.             box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  91.             transition: transform 0.3s;
  92.         }
  93.        
  94.         .photo:hover {
  95.             transform: translateY(-5px);
  96.         }
  97.        
  98.         .photo img {
  99.             width: 100%;
  100.             height: 100%;
  101.             object-fit: cover;
  102.             transition: transform 0.5s;
  103.         }
  104.        
  105.         .photo:hover img {
  106.             transform: scale(1.05);
  107.         }
  108.        
  109.         .photo .caption {
  110.             position: absolute;
  111.             bottom: 0;
  112.             left: 0;
  113.             right: 0;
  114.             background: rgba(0, 0, 0, 0.6);
  115.             color: white;
  116.             padding: 8px;
  117.             font-size: 0.9rem;
  118.             transform: translateY(100%);
  119.             transition: transform 0.3s;
  120.         }
  121.        
  122.         .photo:hover .caption {
  123.             transform: translateY(0);
  124.         }
  125.        
  126.         .upload-area {
  127.             border: 2px dashed #ffb8c6;
  128.             border-radius: 8px;
  129.             padding: 20px;
  130.             text-align: center;
  131.             margin-top: 20px;
  132.             cursor: pointer;
  133.             transition: background 0.3s;
  134.         }
  135.        
  136.         .upload-area:hover {
  137.             background-color: #fff0f3;
  138.         }
  139.        
  140.         .upload-area i {
  141.             font-size: 2rem;
  142.             color: #ff6b81;
  143.             margin-bottom: 10px;
  144.             display: block;
  145.         }
  146.        
  147.         #file-input {
  148.             display: none;
  149.         }
  150.        
  151.         .story {
  152.             margin-top: 20px;
  153.         }
  154.        
  155.         .milestone {
  156.             display: flex;
  157.             margin-bottom: 30px;
  158.             position: relative;
  159.             padding-left: 30px;
  160.         }
  161.        
  162.         .milestone:last-child {
  163.             margin-bottom: 0;
  164.         }
  165.        
  166.         .milestone::before {
  167.             content: '';
  168.             position: absolute;
  169.             left: 0;
  170.             top: 0;
  171.             width: 15px;
  172.             height: 15px;
  173.             background-color: #ff6b81;
  174.             border-radius: 50%;
  175.         }
  176.        
  177.         .milestone::after {
  178.             content: '';
  179.             position: absolute;
  180.             left: 7px;
  181.             top: 15px;
  182.             width: 1px;
  183.             height: calc(100% + 30px);
  184.             background-color: #ffb8c6;
  185.         }
  186.        
  187.         .milestone:last-child::after {
  188.             display: none;
  189.         }
  190.        
  191.         .milestone-date {
  192.             font-weight: bold;
  193.             color: #ff6b81;
  194.             margin-bottom: 5px;
  195.         }
  196.        
  197.         .milestone-content {
  198.             flex: 1;
  199.         }
  200.        
  201.         .milestone-title {
  202.             font-size: 1.2rem;
  203.             margin-bottom: 10px;
  204.             color: #333;
  205.         }
  206.        
  207.         .milestone-description {
  208.             color: #666;
  209.         }
  210.        
  211.         .memory-box {
  212.             background-color: #fff9fa;
  213.             border-left: 4px solid #ff6b81;
  214.             padding: 15px;
  215.             margin: 20px 0;
  216.             border-radius: 0 5px 5px 0;
  217.         }
  218.        
  219.         .memory-title {
  220.             font-weight: bold;
  221.             margin-bottom: 10px;
  222.             color: #ff6b81;
  223.         }
  224.        
  225.         .btn {
  226.             display: inline-block;
  227.             background-color: #ff6b81;
  228.             color: white;
  229.             padding: 10px 20px;
  230.             border-radius: 30px;
  231.             text-decoration: none;
  232.             margin-top: 10px;
  233.             border: none;
  234.             cursor: pointer;
  235.             transition: background 0.3s, transform 0.2s;
  236.         }
  237.        
  238.         .btn:hover {
  239.             background-color: #ff4757;
  240.             transform: translateY(-2px);
  241.         }
  242.        
  243.         .btn-ghost {
  244.             background-color: transparent;
  245.             border: 1px solid #ff6b81;
  246.             color: #ff6b81;
  247.         }
  248.        
  249.         .btn-ghost:hover {
  250.             background-color: #fff0f3;
  251.         }
  252.        
  253.         footer {
  254.             text-align: center;
  255.             padding: 20px;
  256.             color: #888;
  257.             font-size: 0.9rem;
  258.         }
  259.        
  260.         @media (max-width: 768px) {
  261.             .gallery {
  262.                 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  263.             }
  264.            
  265.             h1 {
  266.                 font-size: 2rem;
  267.             }
  268.            
  269.             .timer {
  270.                 font-size: 1.4rem;
  271.             }
  272.         }
  273.     </style>
  274. </head>
  275. <body>
  276.     <div class="container">
  277.         <header>
  278.             <h1>我们的恋爱记录</h1>
  279.             <p class="subtitle">记录每一个甜蜜瞬间</p>
  280.         </header>
  281.        
  282.         <section class="section" id="timer-section">
  283.             <h2>在一起的时间</h2>
  284.             <div class="timer" id="love-timer">
  285.                 <span id="years">0</span>年
  286.                 <span id="months">0</span>月
  287.                 <span id="days">0</span>天
  288.                 <span id="hours">0</span>小时
  289.                 <span id="minutes">0</span>分钟
  290.                 <span id="seconds">0</span>秒
  291.             </div>
  292.             <div class="memory-box">
  293.                 <div class="memory-title">纪念日</div>
  294.                 <p>我们的故事开始于 <strong id="start-date">2024-07-08</strong></p>
  295.                 <button class="btn btn-ghost" id="edit-date-btn">修改日期</button>
  296.                 <div id="date-edit-form" style="display: none; margin-top: 15px;">
  297.                     <input type="date" id="new-date-input" style="padding: 8px; border: 1px solid #ffb8c6; border-radius: 5px;">
  298.                     <button class="btn" id="save-date-btn" style="margin-left: 10px;">保存</button>
  299.                 </div>
  300.             </div>
  301.         </section>
  302.        
  303.         <section class="section" id="gallery-section">
  304.             <h2>甜蜜相册</h2>
  305.             <p>记录我们在一起的每一个美好瞬间</p>
  306.            
  307.             <div class="gallery" id="photo-gallery">
  308.                 <!-- 示例照片 -->
  309.                 <div class="photo">
  310.                     <img src="https://images.unsplash.com/photo-1518199266791-5375a83190b7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="我们的照片">
  311.                     <div class="caption">第一次约会</div>
  312.                 </div>
  313.                 <div class="photo">
  314.                     <img src="https://images.unsplash.com/photo-1494774157365-9e04c6720e47?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="我们的照片">
  315.                     <div class="caption">海边旅行</div>
  316.                 </div>
  317.                 <div class="photo">
  318.                     <img src="https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="我们的照片">
  319.                     <div class="caption">生日惊喜</div>
  320.                 </div>
  321.             </div>
  322.            
  323.             <div class="upload-area" id="upload-area">
  324.                 <i>📷</i>
  325.                 <p>点击或拖拽照片到这里上传</p>
  326.                 <input type="file" id="file-input" accept="image/*" multiple>
  327.             </div>
  328.         </section>
  329.        
  330.         <section class="section" id="story-section">
  331.             <h2>我们的故事</h2>
  332.             <p>记录我们爱情旅程中的每一个重要时刻</p>
  333.            
  334.             <div class="story">
  335.                 <div class="milestone">
  336.                     <div class="milestone-content">
  337.                         <div class="milestone-date">2024年6月23日</div>
  338.                         <h3 class="milestone-title">初次在TT相遇</h3>
  339.                         <p class="milestone-description">我们聊了很久，发现彼此有很多共同爱好。</p>
  340.                     </div>
  341.                 </div>
  342.                
  343.                 <div class="milestone">
  344.                     <div class="milestone-content">
  345.                         <div class="milestone-date">2024年7月08日</div>
  346.                         <h3 class="milestone-title">第1次约会见面</h3>
  347.                         <p class="milestone-description">我去陵水找的你，我们去了那家小面馆，我和你吃着面聊着天，一起逛街 一起散步 买好多好吃的</p>
  348.                     </div>
  349.                 </div>
  350.                
  351.                 <div class="milestone">
  352.                     <div class="milestone-content">
  353.                         <div class="milestone-date">2024年8月20日</div>
  354.                         <h3 class="milestone-title">正式在一起</h3>
  355.                         <p class="milestone-description">在海边的日落时分，你牵起我的手，问我愿不愿意做你的男/女朋友。那一刻，海浪声都掩盖不了我的心跳。</p>
  356.                     </div>
  357.                 </div>
  358.                
  359.                 <div class="milestone">
  360.                     <div class="milestone-content">
  361.                         <div class="milestone-date">2024年12月24日</div>
  362.                         <h3 class="milestone-title">第一个圣诞节</h3>
  363.                         <p class="milestone-description">你送我的围巾我到现在还戴着，虽然织得有点歪歪扭扭，但那是你熬夜一周的成果，是我收到过最温暖的礼物。</p>
  364.                     </div>
  365.                 </div>
  366.             </div>
  367.            
  368.             <div class="memory-box">
  369.                 <div class="memory-title">添加新故事</div>
  370.                 <form id="new-memory-form">
  371.                     <div style="margin-bottom: 10px;">
  372.                         <label for="memory-date" style="display: block; margin-bottom: 5px; color: #666;">日期</label>
  373.                         <input type="date" id="memory-date" style="padding: 8px; border: 1px solid #ffb8c6; border-radius: 5px; width: 100%;">
  374.                     </div>
  375.                     <div style="margin-bottom: 10px;">
  376.                         <label for="memory-title" style="display: block; margin-bottom: 5px; color: #666;">标题</label>
  377.                         <input type="text" id="memory-title" placeholder="例如：第一次旅行" style="padding: 8px; border: 1px solid #ffb8c6; border-radius: 5px; width: 100%;">
  378.                     </div>
  379.                     <div style="margin-bottom: 10px;">
  380.                         <label for="memory-description" style="display: block; margin-bottom: 5px; color: #666;">描述</label>
  381.                         <textarea id="memory-description" rows="4" placeholder="写下你们的甜蜜回忆..." style="padding: 8px; border: 1px solid #ffb8c6; border-radius: 5px; width: 100%; resize: vertical;"></textarea>
  382.                     </div>
  383.                     <button type="submit" class="btn">添加故事</button>
  384.                 </form>
  385.             </div>
  386.         </section>
  387.        
  388.         <section class="section" id="wishes-section">
  389.             <h2>爱的留言</h2>
  390.             <p>写下你想对TA说的话</p>
  391.            
  392.             <div class="memory-box">
  393.                 <textarea id="love-note" rows="4" placeholder="亲爱的，我想对你说..." style="padding: 10px; border: 1px solid #ffb8c6; border-radius: 5px; width: 100%; margin-bottom: 10px; resize: vertical;"></textarea>
  394.                 <button class="btn" id="save-note-btn">保存留言</button>
  395.             </div>
  396.            
  397.             <div id="saved-notes">
  398.                 <!-- 留言将在这里显示 -->
  399.             </div>
  400.         </section>
  401.        
  402.         <footer>
  403.             <p>❤️ 用心记录我们的爱情 ❤️</p>
  404.             <p>最后更新: <span id="last-update"></span></p>
  405.         </footer>
  406.     </div>
  407.  
  408.     <script>
  409.         // 计时器功能
  410.         function updateTimer() {
  411.             const startDateStr = localStorage.getItem('loveStartDate') || document.getElementById('start-date').textContent;
  412.             const startDate = new Date(startDateStr);
  413.             const now = new Date();
  414.            
  415.             let diff = now - startDate;
  416.            
  417.             const years = Math.floor(diff / (1000 * 60 * 60 * 24 * 365));
  418.             diff -= years * (1000 * 60 * 60 * 24 * 365);
  419.            
  420.             const months = Math.floor(diff / (1000 * 60 * 60 * 24 * 30));
  421.             diff -= months * (1000 * 60 * 60 * 24 * 30);
  422.            
  423.             const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  424.             diff -= days * (1000 * 60 * 60 * 24);
  425.            
  426.             const hours = Math.floor(diff / (1000 * 60 * 60));
  427.             diff -= hours * (1000 * 60 * 60);
  428.            
  429.             const minutes = Math.floor(diff / (1000 * 60));
  430.             diff -= minutes * (1000 * 60);
  431.            
  432.             const seconds = Math.floor(diff / 1000);
  433.            
  434.             document.getElementById('years').textContent = years;
  435.             document.getElementById('months').textContent = months;
  436.             document.getElementById('days').textContent = days;
  437.             document.getElementById('hours').textContent = hours;
  438.             document.getElementById('minutes').textContent = minutes;
  439.             document.getElementById('seconds').textContent = seconds;
  440.            
  441.             document.getElementById('start-date').textContent = startDate.toISOString().split('T')[0];
  442.         }
  443.        
  444.         // 修改日期功能
  445.         document.getElementById('edit-date-btn').addEventListener('click', function() {
  446.             const form = document.getElementById('date-edit-form');
  447.             form.style.display = form.style.display === 'none' ? 'block' : 'none';
  448.         });
  449.        
  450.         document.getElementById('save-date-btn').addEventListener('click', function() {
  451.             const newDate = document.getElementById('new-date-input').value;
  452.             if (newDate) {
  453.                 localStorage.setItem('loveStartDate', newDate);
  454.                 document.getElementById('date-edit-form').style.display = 'none';
  455.                 updateTimer();
  456.             }
  457.         });
  458.        
  459.         // 初始化日期输入框
  460.         window.addEventListener('DOMContentLoaded', function() {
  461.             const savedDate = localStorage.getItem('loveStartDate');
  462.             if (savedDate) {
  463.                 document.getElementById('start-date').textContent = savedDate;
  464.                 document.getElementById('new-date-input').value = savedDate;
  465.             } else {
  466.                 const today = new Date().toISOString().split('T')[0];
  467.                 document.getElementById('new-date-input').value = today;
  468.             }
  469.            
  470.             // 更新最后修改时间
  471.             const lastUpdate = new Date();
  472.             document.getElementById('last-update').textContent = lastUpdate.toLocaleString();
  473.            
  474.             // 加载保存的照片
  475.             loadSavedPhotos();
  476.            
  477.             // 加载保存的故事
  478.             loadSavedMemories();
  479.            
  480.             // 加载保存的留言
  481.             loadSavedNotes();
  482.         });
  483.        
  484.         // 照片上传功能
  485.         const uploadArea = document.getElementById('upload-area');
  486.         const fileInput = document.getElementById('file-input');
  487.        
  488.         uploadArea.addEventListener('click', function() {
  489.             fileInput.click();
  490.         });
  491.        
  492.         uploadArea.addEventListener('dragover', function(e) {
  493.             e.preventDefault();
  494.             uploadArea.style.backgroundColor = '#fff0f3';
  495.         });
  496.        
  497.         uploadArea.addEventListener('dragleave', function() {
  498.             uploadArea.style.backgroundColor = '';
  499.         });
  500.        
  501.         uploadArea.addEventListener('drop', function(e) {
  502.             e.preventDefault();
  503.             uploadArea.style.backgroundColor = '';
  504.            
  505.             if (e.dataTransfer.files.length > 0) {
  506.                 handleFiles(e.dataTransfer.files);
  507.             }
  508.         });
  509.        
  510.         fileInput.addEventListener('change', function() {
  511.             if (fileInput.files.length > 0) {
  512.                 handleFiles(fileInput.files);
  513.             }
  514.         });
  515.        
  516.         function handleFiles(files) {
  517.             const gallery = document.getElementById('photo-gallery');
  518.            
  519.             for (let i = 0; i < files.length; i++) {
  520.                const file = files[i];
  521.                if (file.type.startsWith('image/')) {
  522.                    const reader = new FileReader();
  523.                    
  524.                    reader.onload = function(e) {
  525.                        const photoDiv = document.createElement('div');
  526.                        photoDiv.className = 'photo';
  527.                        
  528.                        const img = document.createElement('img');
  529.                        img.src = e.target.result;
  530.                        img.alt = '我们的照片';
  531.                        
  532.                        const caption = document.createElement('div');
  533.                        caption.className = 'caption';
  534.                        caption.textContent = '新照片';
  535.                        
  536.                        photoDiv.appendChild(img);
  537.                        photoDiv.appendChild(caption);
  538.                        gallery.appendChild(photoDiv);
  539.                        
  540.                        // 保存到本地存储
  541.                        savePhotoToLocal(e.target.result, '新照片');
  542.                    };
  543.                    
  544.                    reader.readAsDataURL(file);
  545.                }
  546.            }
  547.        }
  548.        
  549.        function savePhotoToLocal(imageData, caption) {
  550.            let savedPhotos = JSON.parse(localStorage.getItem('lovePhotos')) || [];
  551.            savedPhotos.push({ imageData, caption });
  552.            localStorage.setItem('lovePhotos', JSON.stringify(savedPhotos));
  553.        }
  554.        
  555.        function loadSavedPhotos() {
  556.            const savedPhotos = JSON.parse(localStorage.getItem('lovePhotos')) || [];
  557.            const gallery = document.getElementById('photo-gallery');
  558.            
  559.            // 保留示例照片
  560.            if (savedPhotos.length === 0) return;
  561.            
  562.            // 清空示例照片
  563.            gallery.innerHTML = '';
  564.            
  565.            savedPhotos.forEach(photo => {
  566.                 const photoDiv = document.createElement('div');
  567.                 photoDiv.className = 'photo';
  568.                
  569.                 const img = document.createElement('img');
  570.                 img.src = photo.imageData;
  571.                 img.alt = '我们的照片';
  572.                
  573.                 const caption = document.createElement('div');
  574.                 caption.className = 'caption';
  575.                 caption.textContent = photo.caption;
  576.                
  577.                 photoDiv.appendChild(img);
  578.                 photoDiv.appendChild(caption);
  579.                 gallery.appendChild(photoDiv);
  580.             });
  581.         }
  582.        
  583.         // 故事功能
  584.         document.getElementById('new-memory-form').addEventListener('submit', function(e) {
  585.             e.preventDefault();
  586.            
  587.             const date = document.getElementById('memory-date').value;
  588.             const title = document.getElementById('memory-title').value;
  589.             const description = document.getElementById('memory-description').value;
  590.            
  591.             if (date && title && description) {
  592.                addNewMemory(date, title, description);
  593.                
  594.                 // 清空表单
  595.                 document.getElementById('memory-date').value = '';
  596.                 document.getElementById('memory-title').value = '';
  597.                 document.getElementById('memory-description').value = '';
  598.             }
  599.         });
  600.        
  601.         function addNewMemory(date, title, description) {
  602.             const storyDiv = document.querySelector('.story');
  603.            
  604.             const milestone = document.createElement('div');
  605.             milestone.className = 'milestone';
  606.            
  607.             const content = document.createElement('div');
  608.             content.className = 'milestone-content';
  609.            
  610.             const dateElement = document.createElement('div');
  611.             dateElement.className = 'milestone-date';
  612.             dateElement.textContent = formatDate(date);
  613.            
  614.             const titleElement = document.createElement('h3');
  615.             titleElement.className = 'milestone-title';
  616.             titleElement.textContent = title;
  617.            
  618.             const descElement = document.createElement('p');
  619.             descElement.className = 'milestone-description';
  620.             descElement.textContent = description;
  621.            
  622.             content.appendChild(dateElement);
  623.             content.appendChild(titleElement);
  624.             content.appendChild(descElement);
  625.             milestone.appendChild(content);
  626.            
  627.             // 插入到第一个位置
  628.             storyDiv.insertBefore(milestone, storyDiv.firstChild);
  629.            
  630.             // 保存到本地存储
  631.             saveMemoryToLocal(date, title, description);
  632.         }
  633.        
  634.         function formatDate(dateStr) {
  635.             const date = new Date(dateStr);
  636.             return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
  637.         }
  638.        
  639.         function saveMemoryToLocal(date, title, description) {
  640.             let savedMemories = JSON.parse(localStorage.getItem('loveMemories')) || [];
  641.             savedMemories.unshift({ date, title, description });
  642.             localStorage.setItem('loveMemories', JSON.stringify(savedMemories));
  643.         }
  644.        
  645.         function loadSavedMemories() {
  646.             const savedMemories = JSON.parse(localStorage.getItem('loveMemories')) || [];
  647.             const storyDiv = document.querySelector('.story');
  648.            
  649.             // 保留示例故事
  650.             if (savedMemories.length === 0) return;
  651.            
  652.             // 清空示例故事
  653.             storyDiv.innerHTML = '';
  654.            
  655.             savedMemories.forEach(memory => {
  656.                 const milestone = document.createElement('div');
  657.                 milestone.className = 'milestone';
  658.                
  659.                 const content = document.createElement('div');
  660.                 content.className = 'milestone-content';
  661.                
  662.                 const dateElement = document.createElement('div');
  663.                 dateElement.className = 'milestone-date';
  664.                 dateElement.textContent = formatDate(memory.date);
  665.                
  666.                 const titleElement = document.createElement('h3');
  667.                 titleElement.className = 'milestone-title';
  668.                 titleElement.textContent = memory.title;
  669.                
  670.                 const descElement = document.createElement('p');
  671.                 descElement.className = 'milestone-description';
  672.                 descElement.textContent = memory.description;
  673.                
  674.                 content.appendChild(dateElement);
  675.                 content.appendChild(titleElement);
  676.                 content.appendChild(descElement);
  677.                 milestone.appendChild(content);
  678.                
  679.                 storyDiv.appendChild(milestone);
  680.             });
  681.         }
  682.        
  683.         // 留言功能
  684.         document.getElementById('save-note-btn').addEventListener('click', function() {
  685.             const note = document.getElementById('love-note').value;
  686.             if (note.trim()) {
  687.                 saveNote(note);
  688.                 document.getElementById('love-note').value = '';
  689.             }
  690.         });
  691.        
  692.         function saveNote(note) {
  693.             let savedNotes = JSON.parse(localStorage.getItem('loveNotes')) || [];
  694.             savedNotes.unshift({
  695.                 text: note,
  696.                 date: new Date().toLocaleString()
  697.             });
  698.             localStorage.setItem('loveNotes', JSON.stringify(savedNotes));
  699.            
  700.             displayNotes();
  701.         }
  702.        
  703.         function displayNotes() {
  704.             const savedNotes = JSON.parse(localStorage.getItem('loveNotes')) || [];
  705.             const notesContainer = document.getElementById('saved-notes');
  706.            
  707.             notesContainer.innerHTML = '';
  708.            
  709.             savedNotes.forEach(note => {
  710.                 const noteDiv = document.createElement('div');
  711.                 noteDiv.className = 'memory-box';
  712.                 noteDiv.style.marginTop = '15px';
  713.                
  714.                 const noteText = document.createElement('p');
  715.                 noteText.textContent = note.text;
  716.                 noteText.style.marginBottom = '5px';
  717.                
  718.                 const noteDate = document.createElement('div');
  719.                 noteDate.textContent = note.date;
  720.                 noteDate.style.fontSize = '0.8rem';
  721.                 noteDate.style.color = '#888';
  722.                 noteDate.style.textAlign = 'right';
  723.                
  724.                 noteDiv.appendChild(noteText);
  725.                 noteDiv.appendChild(noteDate);
  726.                 notesContainer.appendChild(noteDiv);
  727.             });
  728.         }
  729.        
  730.         function loadSavedNotes() {
  731.             displayNotes();
  732.         }
  733.        
  734.         // 启动计时器
  735.         setInterval(updateTimer, 1000);
  736.         updateTimer();
  737.     </script>
  738. </body>
  739. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!