我用js写了一个，除夕烟花秀和春节随机祝福语_js 过年特效

作者：小小林熬夜学编程 | 2024-02-16 04:58:06

踩

js 过年特效

项目截图

进入后的界面

图片.png

点击按钮

图片.png

点击之后的动画

烟花结束后的界面

代码实现

涉及的技术：HTML5多媒体，CSS定位，动画，js面向对象，Jquery动画、事件

首先来看HTML代码

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2022</title>
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/index.js"></script>

</head>

<body>
    <!--这个是点击按钮的盒子，算是烟花筒 -->
    <div class="he">
        <!--这个是点击按钮，点击以后就开始做一些处理 -->
        <button id="fire"></button>
    </div>
    <!--这个是烟花哦-->
    <div class="box">
    </div>
    <!--这个是烟花结束后，出现在上面的2022图片
    <div class="title"></div>
    <!--这个就是随机生成祝福语的大盒子啦-->
    <div class="greetings">
        <!--可以通过这个div来动态的呈现祝福语，默认第一个是虎虎生威-->
        <div class="yu"><span id="blessing">虎虎生威</span></div>
        <!--这个是点击按钮，点击后停下快闪的祝福语-->
        <button id="btn">查看我的祝福</button>
    </div>

    <audio src="./meiti/chuxi.mp3"></audio>
    <audio src="./meiti/yanhua.mp3"></audio>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

上面的html代码结构就是，烟花盒（.he)、点火按钮(.fire)、烟花(.box)、显示2022虎年logo(.title)、祝福语盒子(.greetings)、显示祝福的具体容器(.yu 和 .blessing)、暂停快速显示的按钮(.btn)、两个音频。一共10个重要元素。

接着我们再来看看CSS代码

/*清除默认的边距*/
* {
    margin: 0;
    padding: 0;
}

/*导入字体，用来设置在祝福语上*/
@font-face {
    font-family: 'djs';
    src: url(../font/datk6.ttf);
}

/*设置body超出隐藏，因为后面烟花会超出，导致页面被撑开*/
body {
    /* background: #EF3D04; */
    overflow: hidden;
    background: #F35708 url(../images/hebj.png)no-repeat center center/100% 100%;
}

/*烟花盒子我们让他居于底部居中对齐*/
.he {
    position: absolute;
    width: 160px;
    height: 120px;
    background: url(../images/hebj.png)no-repeat center center/100% 100%;
    border-radius: 5px 5px 0 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    transition: all 3s;
}


.he button {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid #C33830;
    box-shadow: 0 0 5px #D7A057, 0 0 2px #D7A057 inset;
    border-radius: 5px;
    width: 50px;
    height: 50px;
    background: transparent url(../images/huzhua.png)no-repeat center center/100% 100%;
    font-size: 12px;
    color: yellow;
    font-weight: 700;
}

/*烟花盒子，我们也要让他在底部居中对齐，后期我们通过动画，改变top值，实现由下而上的发射效果*/
.box {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    transition: all;
    top: calc(100% - 50px);
    left: 50%;
    transform: translateX(-50%);
}

/*这是烟花绽放生成的小点，就是哪些五颜六色的小点，后面通过js随机生成个数，位置，大小，因为是随机的所有这个只设置绝对定位，不给定具体的top和left值*/
.box span {
    position: absolute;
    display: inline-block;
    border-radius: 50%;
}

/*当box到达指定的top值后，我们就可以给box添加这个带动画的样式了，这个动画具体的效果我们写在后面*/
.fire {
    left: 50%;
    transform: translateX(-50%);
    animation: suofang 4.5s linear;
}

/*2022虎年logo的样式*/
.title {
    position: absolute;
    width: 300px;
    height: 150px;
    background: url(../images/hunian.png)no-repeat center center/100% 100%;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    transition: all 1s;
    display: none;
}

/*祝福语盒子的样式，这里指的注意的是自身的目标top值，必须加上.title的top值*/
.greetings {
    position: absolute;
    top: 180px;
    width: 260px;
    height: 400px;
    background: #FFE5C8;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 20px;
    overflow: hidden;
    opacity: 0;
}

/*这是显示句子的第二层盒子，其作用是让文本垂直排列，居中对齐*/
.yu {
    display: flex;
    justify-content: center;
    align-items: center;
    writing-mode: tb;
    width: 100%;
    height: 85%;
    border-radius: 10px;
    background: url(../images/zhufu.png)no-repeat center center/100% 100%;
}

/*这就是祝福与显示盒子的本体啦，这里主要设置字体样式*/
#blessing {
    font-size: 50px;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.74);
    letter-spacing: 6px;
    font-family: 'djs';
}

/*暂停按钮*/
#btn {
    width: 100%;
    height: 15%;
    margin-top: 50px;
    border-radius: 10px;
    border: 1px solid #D7A057;
    color: #D7A057;
    font-size: 14px;
    font-weight: 700;
    background: url(../images/btn.png)no-repeat center center/100% 100%;
}

/*动画函数，我在写这个动画函数之前，就猜测，如果父元素缩放，
里面的子元素会不会随着一起缩放，写出来后，证明我的猜测是正确的*/
@keyframes suofang {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(20);
        opacity: .5;
    }
    100% {
        transform: scale(100);
        opacity: 0;
        display: none;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160

以上的css代码，可以看到，我使用了大量的定位。这是因为后面的动画都需要基于定位的left和top来实现。

好啦结构和样式都有了，我们就来看看js（行为）吧

javaScript代码

1、生成烟花球和焰火

$(function() {
//封装一个生成随机数的函数，方便后期随机生成烟花焰火的个数，大小，位置
    function rand(min, max) {
        return Math.random() * (max - min) + min;
    }
    //创建一个构造函数，构造函数中调用随机函数，生成500-1000之间随机的随机数，用于生成焰火的个数
    function Birth() {
        this.sum = parseInt(rand(500, 1000));
    }
    //在构造函数的原型对象上添加随机生成位置，大小的函数，里面调用之前定义的随机函数
    Birth.prototype.suiji = function() {
        //随机生成一个X轴坐标
        this.x = parseInt(rand(0, 50));
        //随机生成一个Y轴坐标
        this.y = parseInt(rand(0, 50));
        //随机生成一个宽度，因为生成的焰火式正圆，所以这里生成的焰火宽高式相等
        this.w = parseInt(rand(1, 3));
        //随机生成一个rgb颜色（0-255之间哦）
        this.color = parseInt(rand(0, 255));
        //将生成的对象返回（抛出）
        return this;
    }
    
    //将上面的构造函数实例化为对象，这样这个对象就可以访问上面构造函数生成的所有数据了
    const qiu = new Birth();
    //定义一个文档碎片，优化程序性能（减少页面重绘与回流）
    const jsbox = document.createDocumentFragment();
    //使用循环生成焰火，这里焰火使用span标签来表示
    for (var i = 0; i < qiu.sum; i++) {
        //获取本次循环生成的x轴坐标
        var x = qiu.suiji().x;
        //获取本次循环生成的y轴坐标
        var y = qiu.suiji().y;
        //获取本次循环生成的高和宽
        var w = qiu.suiji().w;
        //生成span元素，并将其追加到文档碎片中
        $(jsbox).append('<span></span>').children().eq(i).css({ 'background': `rgb(${qiu.suiji().color},${qiu.suiji().color},${qiu.suiji().color})`, 'width': w, 'height': w, 'left': x, 'top': y });
    }
    //将文档碎片追加到烟花盒子里，至此烟花部分结束
    $('.box').append(jsbox);
    
    
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

2、祝福语快速切换与暂停查看

    //我们将需要展示的祝福语，写在数组中，后期遍历这个数组就可以了
    const arr = ['虎虎生威', '财源滚滚', '虎年大运', '虎气冲天', '虎越新春', '虎虎虎虎'];
    
    //声明一个全局变量，用来当作下标访问数组
    let ind = 0;
    /*声明一个全局变量，用来当作节流阀，防止用户反复点击导致定时器叠加，
    祝福语切换太快，还能防止用户反复点击导致BGM重复播放*/
    let isok = false;
    
    //定义一个全局变量用来存储页面中的定时器
    let t;
    
    //快速切换祝福语的函数
    function setZf() {
    //使用定时器，每0.01秒执行一次定时器中的代码
    t = setInterval(function() {
        /*判断ind是不是等于数组长度-1，以免小标超出数组实际长度出现undefinde，
        如果是，就将ind归零，不是就继续自加*/
            if (ind >= arr.length - 1) {
                ind = 0;
            } else {
                ind++;
            }
            /*将从数组中读取出来的祝福语，渲染到页面中*/
            $('#blessing')[0].innerHTML = arr[ind];
        }, 10);
    }
    /*调用上面的函数，让页面一打开就开始执行，因为其CSS样式设置了隐藏，
    所以这里即使页面一打开，用户也看不见*/
    setZf();
    
    /*当暂停按钮被点击后，我们开始判断，节流阀如果是真，就调用上面的函数，
    实现开始切换祝福语的效果，并将节流阀关闭*/
     $('#btn')[0].onclick = function() {
        if (isok) {
            setZf();
            isok = false;
        } else {
        /*如果节流阀是关闭的（isok=false）,就清除定时器，到达暂停的效果，
        然后将节流阀打开，方便下次开启切换*/
            clearInterval(t);
            isok = true;
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

3、点击开火按钮后所做的事情（一下代码使用了Jquery）

//获取元素并重新赋值
    const box = $('.box');
     const fire = $('#fire');
     
    let count;
    //当点火按钮被点击时，立马让烟花发射BGM开始播放，并将按钮设为禁止点击，防止用户反复点击，造成BUG重叠
    fire[0].onclick = function() {
        $('audio')[1].play();
        fire[0].disabled = true;
    }
    
    //当开火按钮被点击，利用这个事件的一点点的延迟效果（刚好是烟花发射BGM播放结束）播放新年BGM
    fire.click(function() {
        $('audio')[0].play();
        //给烟花盒子添加CSS样式，达到烟花居中显示
        box.css({
            left: '50%',
            transform: 'translateX(-50%)',
        })
        /*给烟花盒子添加动画，改变的是top值，当top等于100px时动画结束，因为box的top
        初始值位于屏幕的底部，让其top值改为100px，就形成了慢慢向上移动的视觉效果。*/
        box.animate({
            top: '100px',
            /*动画结束后，开始执行的函数*/
        }, function() {
        /*当烟花球到达指定位置后，给其添加带有动画（缩放）效果的CSS样式，达到烟花绽放的视觉效果*/
            box.addClass('fire');
            /*使用定时器判断，烟花是否绽放完成，绽放完成就让烟花球隐藏，让2022虎年logo显示，让祝福语盒子显示*/
            count = setInterval(() => {
                if (Math.abs(box.offset().top) == 100) {
                    box.css({ 'opacity': '0' })
                    $('.he').hide();
                    $('.title')[0].style.display = 'block';
                    $('.greetings')[0].style.opacity = '1';
                    $('body').css({
                    })
                    clearInterval(count);
                }
            }, 100);
        });
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

以上就是这个项目的所有代码，再次预祝大家新年快乐，虎年大吉，财源滚滚。
项目体验链接：http://www.starqin920.cn/chuxi/index.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/90904