为爱冲锋——纯爱战士自定义修改520表白网页
本篇基于Github上一个已有的项目(My520)做的教程,将原项目缝合了别的页面做出了一些改动和完善就是给那些不会代码又想整点花活的兄弟们,关键关键点在于: 不需要各种下载软件!不需要配置各种环境!不需要拥有代码基础!只要跟着步骤一步一步来,你就可以拥有一个自定义的表白网页,以下就是完整的效果展示:
一、网页演示
demo-效果演示
二、下载代码
项目代码的源地址:
https://github.com/xuyuanzhi051/My520
这是一个国外托管代码的网站,国内访问的话可能会有点慢,所以我把源码下载了,可以通过百度网盘下载:
百度网盘分享的文件:
链接:https://pan.baidu.com/s/1atof9xxzthWNDMYZDrfSMg 下载
提取码:zmre
项目解压后,文件夹中的文件如图:
三、修改代码
1.修改 show.html
右击show.html文件,以记事本的方式打开,以下(1)~(3)的修改都是针对show.html的修改。
(1)修改头像: 将头像图片放置images文件夹下,将下图中lover.jpg 修改成新头像的图片。
(2)修改 文本: “将{{被表白者}} I’m 许远志 Nice to Meet You” 修改成 自定义文本。
(3)修改时间: BirthDay = new Date(“1/20/2018 00:00:00”);中的月份修改为实际月份+1。
(3)修改跳转页面: 在文件夹中添加index_app.html 文件,这个网页是show.html 完成播放后跳转的页面,因此需要在index_app.html 修改相应的内容,将result.html修改为index_app.html如下图。并在文件夹中添加index_app.html文件和file文件夹。至于这些东西从哪里来的,我给忘了,反正缝合怪拼弄出来的。
2.修改 index_app.html
同理,右击index_app.html文件,以记事本的方式打开,以下(1)~(3)的修改都是针对index_app.html的修改。
(1)修改时间: 如图修改,自定义修改时间。
(2)修改文本: 把自己编辑的内容做个替换即可。
(3)更换背景乐: 把准备好的背景乐,复制到该文件夹中,并在下图中更换音频文件名称
四、使用
最后,右击index.html文件,以浏览器(任意浏览器Chrome、Edge、Firefox等)的方式打开,呈现出的版本就是文章开头视频中的一样。祝大家玩的开心!!!
五、完成版下载
以下是本篇教程的完整版百度云下载链接:
通过百度网盘分享的文件:
链接:https://pan.baidu.com/s/1axED00_DpTqMxNT4_xf0Mw 下载
提取码:8l1f