520表白神器

大家好，我是曉凡

520來(lái)了，給大家做了一個(gè)浪漫的網(wǎng)頁(yè)表白工具，幫助你向心愛的人表達(dá)愛意。

需要源碼的小伙伴直接跳轉(zhuǎn)到文章末尾獲取。

功能介紹

• 浪漫啟動(dòng)頁(yè)：顯示相識(shí)天數(shù)和小時(shí)數(shù)，營(yíng)造浪漫氛圍

• 動(dòng)態(tài)情書系統(tǒng)：打字機(jī)效果展示情書內(nèi)容，支持自定義內(nèi)容

• 趣味互動(dòng)游戲：

  • 愛心捕捉：點(diǎn)擊飄動(dòng)的愛心獲取分?jǐn)?shù)
  • 記憶拼圖：上傳照片創(chuàng)建拼圖游戲

• 時(shí)光相冊(cè)墻：上傳和展示珍貴照片，支持本地存儲(chǔ)

• 終極表白儀式：生成愛情證書，煙花特效，禮物二維碼展示

項(xiàng)目配置

基本配置

編輯 js/config.js 文件，可以自定義以下內(nèi)容：

const CONFIG = {
    // 初始相識(shí)日期（格式：年-月-日）
    firstMeetDate: '2023-05-20',
    
    // 收件人姓名
    recipientName: '未來(lái)的您',
    
    // 情書內(nèi)容 - 可自定義多條消息
    loveLetters: [
        '從遇見你的那一刻起，我的世界就開始變得不一樣。',
        // 可添加更多內(nèi)容...
    ],
    
    // 愛情證書信息
    certificate: {
        lover1: '我的名字',
        lover2: '對(duì)方名字'
    },
    
    // 禮物二維碼鏈接 - 可以是任何圖片URL
    giftQRCodeUrl: '你的二維碼圖片URL',
    
    // 服務(wù)器端口
    serverPort: 3008
};

自定義音樂(lè)

在 assets/music/ 目錄下放置MP3音樂(lè)文件，并在 config.js 中更新音樂(lè)列表：

musicList: [
    {
        title: '歌曲名稱',
        artist: '歌手名',
        src: 'assets/music/你的音樂(lè)文件.mp3'
    }
]

自定義圖片

• 愛心圖片：替換 assets/images/heart.png
• 證書背景：替換 assets/images/certificate-bg.jpg
• 玫瑰圖片：替換 assets/images/rose.png

部署方法

本地部署

1. 環(huán)境準(zhǔn)備：

   • 安裝 Node.js（建議v14.0.0或更高版本）

2. 啟動(dòng)服務(wù)器：

   方法一：使用Node.js直接啟動(dòng)

   node server.js
   

   方法二：使用NPM啟動(dòng)

   npm start
   

   方法三：Windows用戶可雙擊運(yùn)行 start.bat 文件

3. 訪問(wèn)網(wǎng)站：

   • 打開瀏覽器訪問(wèn)：http://localhost:3008

線上部署

1. 使用云服務(wù)器：

   • 將整個(gè)項(xiàng)目上傳到云服務(wù)器

   • 安裝Node.js環(huán)境

   • 使用PM2等工具保持服務(wù)運(yùn)行：

     npm install -g pm2
     pm2 start server.js --name "love520"
     

2. 使用Vercel/Netlify等靜態(tài)網(wǎng)站托管：

   • 注冊(cè)Vercel或Netlify賬號(hào)
   • 連接你的GitHub倉(cāng)庫(kù)或直接上傳項(xiàng)目
   • 按照平臺(tái)指引完成部署

3. 使用GitHub Pages：

   • 創(chuàng)建GitHub倉(cāng)庫(kù)并上傳項(xiàng)目
   • 在倉(cāng)庫(kù)設(shè)置中啟用GitHub Pages
   • 注意：需要修改服務(wù)器邏輯，改為純靜態(tài)網(wǎng)站

注意事項(xiàng)

• 照片和數(shù)據(jù)保存在瀏覽器本地存儲(chǔ)中，清除瀏覽器數(shù)據(jù)會(huì)導(dǎo)致數(shù)據(jù)丟失
• 音樂(lè)自動(dòng)播放可能受到瀏覽器策略限制，需要用戶交互后才能播放
• 為獲得最佳體驗(yàn)，建議使用Chrome、Edge或Firefox最新版本瀏覽器

源碼地址：https://pan.quark.cn/s/5a0dfc6ef4e4
提取碼：23Hc

我是曉凡，再小的帆也能遠(yuǎn)航~

希望本篇文章能幫助到您~

我們下期再見 ヾ(?ω?`)o (●'?'●)