PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛
一、前言
春节就快要到了，在这里先祝愿大家，2022年，如虎添翼万事圆！吉祥如意平安年，开心快乐幸福年，喜气冲天幸运年，财源滚滚发财年，万事大吉顺心年，美满团圆喜庆年，愿君新年事事顺利，岁岁平安，年年如意！
二、效果展示
1.春节计时
- 春节计时的位置在中间偏上先设置一个大体的框架，代码获取到现在的时间显示，与过年设定好的时间进行比对，求解出具体还剩下的时分秒。
2.虎年摆件
- 两个虎年动态摆件，左边是一只大吉大利的老虎，右边是一只心想事成的老虎，祝大家在新的一年里面，无论遇到任何事情都会大吉大利、心想事成。
3.背景音乐
- 背景音乐是李谷一老师的难忘今宵（过年气氛就来了），点击右上角按钮即可以播放音乐
4.全局效果
- 总体布局还是中间上方是一个灯笼，下面是距离春节的倒计时，最下面是两个小老虎，点击老虎中间的按钮就可以观看烟花。
5.烟花祝福
- 点击底部的提前观看烟花就会跳转新的页面，生成烟花祝福
- 等到春节的那一刻，也会跳转到这一个页面
三、代码讲解
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible' content='ie=edge,chrome=1">
<link rel="stylesheet" href="./css/index.css?ver=1.0">
<link rel="icon" href="./img/fz.png">
<title>：知心宝贝祝你2022好运连连🎁</title>
</head>
<body>
<!-- 初始页 -->
<div class="index">
<div class="lantern"></div>
<div class="time">
距离春节：
<span class="hour">--</span> ://小时
<span class="min">--</span> ://分钟
<span class="second">--</span>//秒数
</div>
<div class="text"></div>
<div class="fence">
<div class="p1"></div>
<div class="p2">提前看烟花</div>//点击按钮提前观看烟花
<div class="p3"></div>
</div>
</div>
<!-- 烟花场景 -->
<div class="fire">//进入烟花的场景
<canvas></canvas>
</div>
<!-- 烟花音效 -->
<div class="fireSound">//设置不同的烟花音效
<audio src="http://www.imooc.com/newyear/static/fire_sound.mp3" autoplay muted loop></audio>
<audio src="http://www.imooc.com/newyear/static/fire_sound.mp3" autoplay muted loop></audio>
<audio src="http://www.imooc.com/newyear/static/fire_sound.mp3" autoplay muted loop></audio>
</div>
<!-- 背景音乐 -->
<div class="music run">
<audio src="music/李谷一 - 难忘今宵.mp3" loop></audio>//李谷一老师的歌曲
</div>
<script src="./js/index.js?ver=1.0"></script>
</body>
</html>
JS倒计时
let timer1 = setInterval(() => {
let nowTime = new Date(),//获取目前的时间
future = new Date("2022/02/01 00:00"),//设置好过春节的时间
// 时间差
times = future - nowTime,
// 时 分 秒
h = Math.floor(times / (3600 * 1000)),//计算相差的小时数
m = (Math.floor(times % (3600 * 1000) / (60 * 1000)) + '').padStart(2, 0),//计算分钟数
s = (Math.floor(times % (60 * 1000) / 1000) + "").padStart(2, 0);//计算秒数
hour.innerText = h
min.innerText = m
second.innerText = s
if (s == "00" && h == "00" && m == "00") {//如果当前的时间和春节相等，触发烟花特效
page1.style.display = "none"
page2.style.display = "block"
clearInterval(timer1)
// 初始烟花界面
initFire()
}
}, 1000)
JS烟花
function initFire() {
// 爆炸声音
for (let i = 0; i < fireAudio.length; i++) {
fireAudio[i].currentTime = i
}
// 获取宽高
let width = window.innerWidth,
height = window.innerHeight
// 设置宽高
canvas.width = width
canvas.height = height
// 运动小球
let balls = [],
timer2 = null,
count = 0,
ballAll = 5,
// 祝福词个数
textAll = 5,
// 祝福词坐标
textPos = [
{ x: width / 4, y: height / 4 + 30 },
{ x: width / 4 * 3, y: height / 4 - 30 },
{ x: width / 2, y: height / 2 },
{ x: width / 4, y: height / 4 * 3 },
{ x: width / 4 * 3, y: height / 4 * 3 + 50 },
],
// 爆炸数组
fires = [],
// 图片粒子点数组
points1 = getImgInfo(imgArr[0], 4),
points2 = [],
textFires = []
for (let i = 1; i < imgArr.length; i++) {
points2.push(getImgInfo(imgArr[i], 2))
}
Css样式
.index .fence .p1 {//对于左边小老虎的特效
position: absolute;
left: 0px;//左侧位置
bottom: 0;
z-index: 5;
width: 280px;
height: 300px;
background: url(../img/kouzuo.png) bottom no-repeat;//设置图片在整个页面中的位置
background-size: 100%;
transform-origin: center bottom;//底部
animation: 2s ease-in-out -1s infinite turn;
}
.index .fence .p3 {//对于右边小老虎的特效
position: absolute;
right: -60px;//右侧位置
bottom: -70px;
z-index: 10;
width: 280px;
height: 300px;
background: url(../img/kouyou.png) no-repeat;//设置图片在整个页面中的位置
background-size: 100%;
transform-origin: center bottom;//底部
animation: 2s ease-in-out infinite turn;
}
四、Github Pages
Github Pages为每一个账户提供了专属域名，可以把自己提交到仓库的项目生成一个可执行站点，后面有机会我再详细介绍使用教程。
上面的春节代码只是简单列举了一些，大家如果想体验直接点击用Github Pages生成的链接：春节，或者自己依靠Github Pages上传这个项目文件，搞一个专属于自己的网页。
点击链接之后，就会跳转到上面效果图的界面，国内访问可能会有一点卡顿，等待一会就可以。
五、附录
这个代码是参考Github的牛年新春页面写的：牛年贺春
我给改成了虎年新春：虎年新春，大家想要源码直接上Github上面下载不同两个年份的贺春页面体验一下就可以了。
趁着钟声还未响，趁着鞭炮还未鸣，趁着春节还未至，趁着虎年刚开始，趁着人还未喝醉。先把我美好的祝愿送到你的手机，在这里祝愿大家虎年吉祥如意，合家欢乐。
