为爱冲锋——纯爱战士自定义修改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

六、如果后期有部署教程的需求!请在评论区告诉我!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值