Skip to content
The second anniversary commemorative for girlfriend!
JavaScript HTML CSS
Branch: master
Clone or download
Latest commit 7bc040c Aug 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea 两周年纪念 Jul 6, 2018
build fix index audio play bug and complete function Oct 31, 2018
public 两周年纪念 Jul 6, 2018
src docs: 完善Readme Aug 16, 2019
.gitignore update Jul 6, 2018
README.md Update README.md Aug 16, 2019
package-lock.json 两周年纪念 Jul 6, 2018
package.json 两周年纪念 Jul 6, 2018

README.md

两周年纪念日网页

这个小小的网页是两周年纪念日的时候做的,送给女朋友,也是第一次做这种东西。最终女朋友看到了也被感动到了,有女朋友的程序猿们可以借鉴一下啦。

http://rychouuuu.coding.me/two_year/

技术栈:

  • create-react-app //react脚手架
  • React
  • ES6

文章使用打印机输出的效果,还给背景音乐加了时间控制,可以在指定时间开始播放。

想要达到撩人的效果,最重要的还是文字啦。

背景告白气球特效扒自网络,非自己编写。如有侵权请联系:974393900@qq.com

使用教程

下面步骤涉及到Gitnpm的使用,如果你还不会用,请百度自学。

将本仓库克隆到本地

git clone https://github.com/Rychou/two_years

同步依赖

npm install

启动项目

npm start

进行个性化编辑

这一步就可以对自己想要的纪念日期、背景音乐、文字等进行个性化编辑。

纪念日

打开项目根目录下的src/Main.js文件,找到如下代码。

componentDidMount() {
    this.print();
    setInterval(() => {
        this.time(2016, 4, 23) // 1.填写你们的纪念日
    }, 1000
    )
    var audio = document.getElementById("audio");
    setTimeout(() => audio.play(), 8500) // 背景音乐在页面加载后,延迟播放的时长,单位:毫秒。
}

背景音乐

项目默认的背景乐是周董的《告白气球》,你也可以换成对方最喜欢的音乐。建议从网上找到音乐文件下载到src/audio/目录下,并且推荐mp3格式的文件,兼容性好。

将文件下载好后,打开src/Main.js,在文件开头,找到如下代码。

import React, { Component } from 'react'
import $ from 'jquery'
import url from './audio/gbqq.mp3' // 引入背景音乐文件。填写文件路径。建议文件名用英文。

网页标题和信封标题

修改网页标题,打开public/index.html,找到以下代码:

<title>两周年纪念!</title> <!-- 将这里的文字替换成你想要的标题即可-->

修改信封标题,打开src/App.js,找到如下代码:

<div className="text">你收到一封信,点击查收!</div> <!-- 将这里的文字替换成你想要的标题即可 -->

核心:文章内容

最重要的部分其实是你的文字部分,其他的都不重要,重要是文字要走心。

打开src/Main.js,找到如下代码,将你要写的话,写到对应位置。

<div className="date">{date()}</div>
    <div id="autotype">
        <h1 style={{ fontWeight: 900 }}>哈喽!wuli趴布猪!</h1> <!-- 文章开头文字 -->
        <p >在煽情开始之前,先放首歌当背景音乐吧!Music!</p> <!-- 文章内容 -->
        <p>今天是我们两周年的纪念日,从2016年4月23日到现在,我们一起经历了许许多多的事情,
        有欢笑也有争吵,也曾因为一些事情闹过分手,但是我们都走过来了。</p>
        <!-- 此处省略800字 -->
    </div>

打包编译

执行命令

npm run build

执行完后,会在build目录生成打包后的网页,你可以直接把这个打包后的网页当场给你女朋友看。但这就不能远程访问了。

若要远程访问,有两个办法:

  1. 部署到远程服务器,不推荐,因为如果要用自己域名的话,需要备案。
  2. 部署到Github Pages 或 Coding Pages,推荐,因为域名可不备案,没那么复杂,成本也更低。

部署到Github Pages

网上有很多文章讲这个东西,我这里不做过多详细的介绍,简单讲一下流程。

  1. 在Github上创建一个空的仓库,以 userName.github.io 作为仓库名。其中 userName 是你的用户名。

  2. 将仓库克隆到本地

  3. 将刚刚打包编译后的网页(build目录下所有文件),复制粘贴到仓库根目录。

  4. 用git push 到远程仓库。

  5. 在仓库的设置页面,启动Github Pages服务。大概1分钟左右打开 https://userName.github.io 即可。

更骚的操作

你可以买自己的域名,比如常见的英文域名等。最骚的是,你可以买一个中文域名 XXX.我爱你。注意这是可行的。

只不过中文域名的配置稍微复杂一些,具体怎么操作我也不太记得了,但也不难,大家自行百度即可。

写到最后

这个网页是我在大二时期写的,现在已经准备大四了,也找到了自己心仪的前端岗位实习。

异地狗是正的很难受,当时我跟她相隔1300公里,在纪念日当天却不能相见,真是很难受。当时也不知道要送啥才好,于是想到自己也是程序员,那就用程序员的方式表达浪漫吧~

于是就写了这个网页,当时的代码现在看起来写的是很烂,也没有花太多心思去考虑代码,功能实现了就行了。如果大佬们见到了这么烂的代码别吐槽哈,我自己已经吐槽了自己了哈哈哈。

最后想祝愿各位不管是兄弟还是姐妹们,能够和另外一半长长久久,幸福美满!

如果大家在实现的时候遇到了什么问题,也欢迎邮件: 974393900@qq.com 或直接加 QQ也行。

捐赠:

You can’t perform that action at this time.