这几天世界杯不是挺火的嘛看着大家都在聊，手痒痒也想搞点作为一个半吊子前端，也不能真去踢球，就想着能不能用代码整点跟世界杯有关的东西。
第一步：确定主题和目标
一开始也没啥头绪，就想着要不搞个简单的倒计时？或者整个赛程表？后来一想，这些网上都有现成的，没啥意思。突然灵光一闪，世界杯主题曲不是挺好听的嘛《Hayya Hayya (Better Together)》，不如整个简单的页面，放上这首歌，再加点世界杯的元素？就这么定了！
第二步：准备素材
有了想法就开始找素材。先把《Hayya Hayya》这首歌的mp3文件下载下来，这个简单，网上搜一下就有。然后又找了几张世界杯的宣传海报，还有一些卡塔尔的特色图片，比如沙漠、骆驼啥的，想着到时候能用上。
第三步：开始写代码
我是用的VS Code，新建了个文件夹，里面建了*、*和*三个文件，基本的html骨架搭起来：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022世界杯主题</title>
<link rel="stylesheet" href="*">
</head>
<body>
<div class="container">
<h2>Hayya Hayya (Better Together)</h2>
<audio controls>
<source src="hayya_*3" type="audio/mpeg">
你的浏览器不支持 audio 标签。
</audio>
</div>
<script src="*"></script>
</body>
</html>
这里面就放了个标题，还有个audio标签用来放音乐。一开始没啥样式，丑得很。
第四步：美化页面
接下来就是写CSS了，把页面美化一下。 background加了个渐变色，文字颜色改了改，还把audio标签的样式也改了改，让它看起来好看点。代码就不全贴了，太长了，反正就是各种调颜色、调字体、调大小。
第五步：加点动态效果
光放个音乐在那儿也挺单调的，就想着加点动态效果。用JS写了个简单的函数，让背景图片随机切换。把之前找的世界杯海报和卡塔尔图片放进去，隔几秒钟换一张，感觉稍微活泼了一点。
const container = *('.container');
const images = ['*', '*', '*']; // 替换成你的图片路径
let currentIndex = 0;
function changeBackground() {
* = `url(${images[currentIndex]})`;
currentIndex = (currentIndex + 1) % *;
setInterval(changeBackground, 5000); // 每5秒切换一次
第六步：部署上线
一步就是把这个小页面部署上线了。我用的是GitHub Pages，简单方便。把代码push到GitHub仓库，然后设置一下GitHub Pages，几分钟就搞定了。
遇到的问题和坑
- 一开始audio标签放不出来，后来发现是mp3文件的路径写错了，改过来就好了。
- 背景图片切换的时候，图片大小不一致，导致页面跳动，后来用`background-size: cover;`解决了。
- CSS样式调了好久，各种颜色搭配，各种字体选择，简直逼死强迫症。
总结
虽然只是个很简单的页面，但是整个过程还是挺有意思的。把学到的前端知识用起来，做点自己感兴趣的东西，感觉还是挺充实的。下次有机会再搞点更复杂的，比如整个世界杯的比分预测啥的，想想就觉得刺激！
这个小项目就分享到这儿，大家如果感兴趣也可以自己动手试试，世界杯期间搞点跟足球有关的小玩意，也算是参与了一把。