一、前言
春节就快要到了，在这里先祝愿大家，2022年，如虎添翼万事圆！吉祥如意平安年，开心快乐幸福年，喜气冲天幸运年，财源滚滚发财年，万事大吉顺心年，美满团圆喜庆年，愿君新年事事顺利，岁岁平安，年年如意！
二、效果展示
1.春节计时
- 春节计时的位置在中间偏上先设置一个大体的框架，代码获取到现在的时间显示，与过年设定好的时间进行比对，求解出具体还剩下的时分秒。
2.虎年摆件
- 两个虎年动态摆件，左边是一只大吉大利的老虎，右边是一只心想事成的老虎，祝大家在新的一年里面，无论遇到任何事情都会大吉大利、心想事成。
3.背景音乐
- 背景音乐是李谷一老师的难忘今宵（过年气氛就来了），点击右上角按钮即可以播放音乐
4.全局效果
- 总体布局还是中间上方是一个灯笼，下面是距离春节的倒计时，最下面是两个小老虎，点击老虎中间的按钮就可以观看烟花。
5.烟花祝福
- 点击底部的提前观看烟花就会跳转新的页面，生成烟花祝福
- 等到春节的那一刻，也会跳转到这一个页面
三、代码讲解
html
<htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><metahttp-equiv="X-UA-Compatible' content='ie=edge,chrome=1"><linkrel="stylesheet"href="./css/index.css?ver=1.0"><linkrel="icon"href="./img/fz.png"><title>：知心宝贝祝你2022好运连连🎁</title></head><body><!-- 初始页 --><divclass="index"><divclass="lantern"></div><divclass="time"> 距离春节： <spanclass="hour">--</span> ://小时 <spanclass="min">--</span> ://分钟 <spanclass="second">--</span>//秒数 </div><divclass="text"></div><divclass="fence"><divclass="p1"></div><divclass="p2">提前看烟花</div>//点击按钮提前观看烟花 <divclass="p3"></div></div></div><!-- 烟花场景 --><divclass="fire">//进入烟花的场景 <canvas></canvas></div><!-- 烟花音效 --><divclass="fireSound">//设置不同的烟花音效 <audiosrc="http://www.imooc.com/newyear/static/fire_sound.mp3"autoplaymutedloop></audio><audiosrc="http://www.imooc.com/newyear/static/fire_sound.mp3"autoplaymutedloop></audio><audiosrc="http://www.imooc.com/newyear/static/fire_sound.mp3"autoplaymutedloop></audio></div><!-- 背景音乐 --><divclass="music run"><audiosrc="music/李谷一 - 难忘今宵.mp3"loop></audio>//李谷一老师的歌曲 </div><scriptsrc="./js/index.js?ver=1.0"></script></body></html>
JS倒计时
lettimer1=setInterval(() => { letnowTime=newDate(),//获取目前的时间future=newDate("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=hmin.innerText=msecond.innerText=sif (s=="00"&&h=="00"&&m=="00") {//如果当前的时间和春节相等，触发烟花特效page1.style.display="none"page2.style.display="block"clearInterval(timer1) // 初始烟花界面initFire() } }, 1000)
JS烟花
functioninitFire() { // 爆炸声音for (leti=0; i<fireAudio.length; i++) { fireAudio[i].currentTime=i } // 获取宽高letwidth=window.innerWidth, height=window.innerHeight// 设置宽高canvas.width=widthcanvas.height=height// 运动小球letballs= [], 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 (leti=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) bottomno-repeat;//设置图片在整个页面中的位置 background-size: 100%; transform-origin: centerbottom;//底部 animation: 2sease-in-out-1sinfiniteturn; } .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: centerbottom;//底部 animation: 2sease-in-outinfiniteturn; }
四、Github Pages
Github Pages为每一个账户提供了专属域名，可以把自己提交到仓库的项目生成一个可执行站点，后面有机会我再详细介绍使用教程。
上面的春节代码只是简单列举了一些，大家如果想体验直接点击用Github Pages生成的链接：春节，或者自己依靠Github Pages上传这个项目文件，搞一个专属于自己的网页。
点击链接之后，就会跳转到上面效果图的界面，国内访问可能会有一点卡顿，等待一会就可以。
五、附录
这个代码是参考Github的牛年新春页面写的：牛年贺春
我给改成了虎年新春：虎年新春，大家想要源码直接上Github上面下载不同两个年份的贺春页面体验一下就可以了。
趁着钟声还未响，趁着鞭炮还未鸣，趁着春节还未至，趁着虎年刚开始，趁着人还未喝醉。先把我美好的祝愿送到你的手机，在这里祝愿大家虎年吉祥如意，合家欢乐。
