网页跳动设计，添加背景音乐与挂载某hub建立自己的域名（面向新手，保姆教学附源码）

iwfacn2025-01-03 19:16:3451免费资源免费教程

首先，想起做个跨年设计网页的原因，是因为刷某音符软件，看到别人的推广视频。

（某音符视频）就想着这东西也不复杂，闲着来做着玩玩也好。
就简单的敲了一点代码。
我想，如果有看这份帖子的站友，也是想着跨年，制作自己的网站网页，做出一点设计去给自己的朋友一点惊喜吧。
（尽管说，这篇贴的上线时间未必能在让你们赶得上你们2024的元旦了，但也可以在大年之夜前去尝试制作。）
（就算过了这两点，也可以先收藏，等到什么节日，更改本贴给出的模板即可）
在我看完某音符的视频之后，先是按照着视频的做法，直接输入视频上一模一样的代码，发到某信通讯软件里面。
打开后也确实能用，但是很快就暴漏出了它的缺点！！！
1.内容文字固定化，不支持自定义
2.有些网址打开后，也缺少bgm，让人难免觉得单一
3.存在一定收费现象，支持收费后，自定义编辑文字，bgm可选择定好的预设，但仍然不能自定义自己的音乐）
[img]

[/img]
如图所示
这也是本篇贴要做的内容，为站友提供具体步骤，拿走就可以使用。话说完了就开始。
首先，先是简单的去找到这些网页的HTML文件,也是都能找到的。（这些html文件我会直接放到附件和网盘当中，自行取用即可）

接下来直接说，怎么改，怎么用。无脑照抄，即可编辑。
编辑文字：
下载文件后，去\js下打开index.js文件，找如图的位置（ps：两个位置都要改掉）
[img]

[/img]
在countdown 3数字“3”可以换成，你想倒计时时间
[img]

[/img]
紧跟后面 |(你的文本) | 在这个|之间的是你自己的文字要注意的是，每个 | 都是一次跳转页面后的显示，可根据自己需要在进行分割。

添加自定义背景音乐
在iindex.html 里<body>标签下，添加 <audio id="background-music" src="js\assets\music\bgm_202501.mp3" loop></audio>标识（这段在源码里面已经放好了，直接替换音乐即可）
注意加粗部分，将你想要的音乐，转化成MP3的形式，放在js\assets\music目录之下，并将index.html加粗部分换成你想要音乐的文件名即可。
最后，ctrl+s保存即可！
[img]