520表白神器
<p><strong>大家好，我是晓凡</strong></p><p>520来了，给大家做了一个浪漫的网页表白工具，帮助你向心爱的人表达爱意。</p>
<p><img src="https://img2024.cnblogs.com/blog/2381533/202505/2381533-20250520075702089-1842802571.png" alt="image-20250519215821562" loading="lazy"></p>
<p>需要源码的小伙伴直接跳转到文章末尾获取。</p>
<h3 id="功能介绍">功能介绍</h3>
<ul>
<li>
<p><strong>浪漫启动页</strong>：显示相识天数和小时数，营造浪漫氛围</p>
</li>
<li>
<p><strong>动态情书系统</strong>：打字机效果展示情书内容，支持自定义内容</p>
</li>
<li>
<p><strong>趣味互动游戏</strong>：</p>
<ul>
<li>爱心捕捉：点击飘动的爱心获取分数</li>
<li>记忆拼图：上传照片创建拼图游戏</li>
</ul>
</li>
<li>
<p><strong>时光相册墙</strong>：上传和展示珍贵照片，支持本地存储</p>
</li>
<li>
<p><strong>终极表白仪式</strong>：生成爱情证书，烟花特效，礼物二维码展示</p>
</li>
</ul>
<h3 id="项目配置">项目配置</h3>
<h4 id="基本配置">基本配置</h4>
<p>编辑 <code>js/config.js</code> 文件，可以自定义以下内容：</p>
<pre><code class="language-javascript">const CONFIG = {
// 初始相识日期（格式：年-月-日）
firstMeetDate: '2023-05-20',
// 收件人姓名
recipientName: '未来的您',
// 情书内容 - 可自定义多条消息
loveLetters: [
'从遇见你的那一刻起，我的世界就开始变得不一样。',
// 可添加更多内容...
],
// 爱情证书信息
certificate: {
lover1: '我的名字',
lover2: '对方名字'
},
// 礼物二维码链接 - 可以是任何图片URL
giftQRCodeUrl: '你的二维码图片URL',
// 服务器端口
serverPort: 3008
};
</code></pre>
<h4 id="自定义音乐">自定义音乐</h4>
<p>在 <code>assets/music/</code> 目录下放置MP3音乐文件，并在 <code>config.js</code> 中更新音乐列表：</p>
<pre><code class="language-javascript">musicList: [
{
title: '歌曲名称',
artist: '歌手名',
src: 'assets/music/你的音乐文件.mp3'
}
]
</code></pre>
<h4 id="自定义图片">自定义图片</h4>
<ul>
<li>爱心图片：替换 <code>assets/images/heart.png</code></li>
<li>证书背景：替换 <code>assets/images/certificate-bg.jpg</code></li>
<li>玫瑰图片：替换 <code>assets/images/rose.png</code></li>
</ul>
<h3 id="部署方法">部署方法</h3>
<h4 id="本地部署">本地部署</h4>
<ol>
<li>
<p><strong>环境准备</strong>：</p>
<ul>
<li>安装 Node.js（建议v14.0.0或更高版本）</li>
</ul>
</li>
<li>
<p><strong>启动服务器</strong>：</p>
<p><strong>方法一</strong>：使用Node.js直接启动</p>
<pre><code class="language-bash">node server.js
</code></pre>
<p><strong>方法二</strong>：使用NPM启动</p>
<pre><code class="language-bash">npm start
</code></pre>
<p><strong>方法三</strong>：Windows用户可双击运行 <code>start.bat</code> 文件</p>
</li>
<li>
<p><strong>访问网站</strong>：</p>
<ul>
<li>打开浏览器访问：http://localhost:3008</li>
</ul>
</li>
</ol>
<h4 id="线上部署">线上部署</h4>
<ol>
<li>
<p><strong>使用云服务器</strong>：</p>
<ul>
<li>
<p>将整个项目上传到云服务器</p>
</li>
<li>
<p>安装Node.js环境</p>
</li>
<li>
<p>使用PM2等工具保持服务运行：</p>
<pre><code class="language-bash">npm install -g pm2
pm2 start server.js --name "love520"
</code></pre>
</li>
</ul>
</li>
<li>
<p><strong>使用Vercel/Netlify等静态网站托管</strong>：</p>
<ul>
<li>注册Vercel或Netlify账号</li>
<li>连接你的GitHub仓库或直接上传项目</li>
<li>按照平台指引完成部署</li>
</ul>
</li>
<li>
<p><strong>使用GitHub Pages</strong>：</p>
<ul>
<li>创建GitHub仓库并上传项目</li>
<li>在仓库设置中启用GitHub Pages</li>
<li>注意：需要修改服务器逻辑，改为纯静态网站</li>
</ul>
</li>
</ol>
<h3 id="注意事项">注意事项</h3>
<ul>
<li>照片和数据保存在浏览器本地存储中，清除浏览器数据会导致数据丢失</li>
<li>音乐自动播放可能受到浏览器策略限制，需要用户交互后才能播放</li>
<li>为获得最佳体验，建议使用Chrome、Edge或Firefox最新版本浏览器</li>
</ul>
<p>源码地址：https://pan.quark.cn/s/5a0dfc6ef4e4<br>
提取码：23Hc</p>
<p>我是晓凡，再小的帆也能远航~</p>
<p>希望本篇文章能帮助到您~</p>
<p>我们下期再见 ヾ(•ω•`)o(●'◡'●)</p>
</div>
<div id="MySignature" role="contentinfo">
<p>本文来自博客园，作者：程序员晓凡，转载请注明原文链接：https://www.cnblogs.com/xiezhr/p/18886037</p><br><br>
来源：https://www.cnblogs.com/xiezhr/p/18886037
頁:
[1]