Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to realize New Year's Eve fireworks show and random blessing based on JavaScript. The article is very detailed and has certain reference value. Interested friends must finish reading it!

The interface after the project screenshot is entered

Click the button

Click on the animation

The interface after the end of fireworks

Code implementation

Technologies involved: HTML5 multimedia, CSS positioning, animation, js object-oriented, Jquery animation, events

HTML code 2022 Tiger Shengwei check my blessing

The above html code structure is, fireworks box (.he), ignition button (.fire), fireworks (.box), display 2022 year of the Tiger logo (.title), blessing box (.greetings), specific containers to show blessings (.yu and .blessing), buttons to pause quick display (.btn), two audio. A total of 10 important elements.

The CSS code / * clears the default margin * / * {margin: 0; padding: 0;} / * Import font, which is used to set the font on the blessing * / @ font-face {font-family: 'djs'; src: url (.. / font/datk6.ttf);} / * set the body beyond hiding, because the later fireworks will exceed, causing the page to be stretched out * / body {/ * background: # EF3D04; * / overflow: hidden Background: # F35708 url (.. / images/hebj.png) no-repeat center center/100% 100%;} / * We center him at the bottom to align * / .he {position: absolute; width: 160px; height: 120px; background: url (.. / images/hebj.png) no-repeat center center/100% 100%; border-radius: 5px 5px 00; 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: 00 5px # D7A057, 00 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;} / * We also need to center the fireworks box at the bottom. Later, we use animation to change the top value to achieve the bottom-up launch effect * / .box {position: absolute; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; transition: all; top: calc (100%-50px) Left: 50%; transform: translateX (- 50%)} / * these are the colorful dots generated by fireworks, and then the number, location, and size are randomly generated by js, because all of them are random, only absolute positioning is set, no specific top and Left values are given * / .box span {position: absolute; display: inline-block; border-radius: 50% } / * when box reaches the specified top value, we can add this driving style to box. The specific effect of this animation is written below * / .fire {left: 50%; transform: translateX (- 50%); animation: suofang 4.5s linear;} / * style of logo for the year of the Tiger in 2022 * / .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;} / * the style of the blessing box, which refers to its own target top value and must add the top value of .title * / .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;} / * this is the second layer box for displaying sentences, which is used to align the text vertically and center * / .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%;} / * this is the body of the blessing and display box. The font style is mainly set here * / # blessing {font-size: 50px; font-weight: 800 Color: rgba (0,0,0,0.74); letter-spacing: 6px; font-family: 'djs';} / * pause button * / # 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%;} / * Animation function. Before I wrote this animation function, I guessed whether the child elements in it would scale with it if the parent element was scaled. After writing it out, it proved that my guess was correct * / @ keyframes suofang {0% {transform: scale (1); opacity: 1 50% {transform: scale (20); opacity: .5;} 100% {transform: scale (100); opacity: 0; display: none;}}

As you can see from the above css code, I used a lot of positioning. This is because the following animations need to be implemented based on positioning left and top.

Now that we have the structure and style, let's take a look at js (behavior).

JavaScript code

1. Generate fireworks balls and fireworks

$(function () {/ / encapsulates a function that generates random numbers to facilitate the number, size and location of fireworks function rand (min, max) {return Math.random () * (max-min) + min } / / create a constructor in which random functions are called to generate random numbers between 500 and 1000. The number of fireworks generated by function Birth () {this.sum = parseInt (rand (500,1000)) } / / add a randomly generated position and size function to the prototype object of the constructor, which calls the previously defined random function Birth.prototype.suiji = function () {/ / randomly generates an X-axis coordinate this.x = parseInt (rand (0,50)); / / randomly generates a Y-axis coordinate this.y = parseInt (rand (0,50)) / / randomly generate a width, because the generated fireworks are positive circles, so the fireworks generated here are equal in width and height this.w = parseInt (rand (1,3)); / / randomly generate a rgb color (between 0,255) this.color = parseInt (rand (0,255)); / / return (throw) the generated object to return this } / / instantiate the above constructor as an object, so that the object can access all the data generated by the above constructor const qiu = new Birth (); / / define a document fragment to optimize program performance (reduce page redrawing and reflow) const jsbox = document.createDocumentFragment () / / use a cycle to generate fireworks, where fireworks use the span tag to represent 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('').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); }) 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++;} / * will render the blessings read from the array to the page * / $('# blessing') [0] [xss_clean] = arr [ind];}, 10) } / * call the above function to start execution as soon as the page is opened, because its CSS style is hidden, so even if the page is opened, the user cannot see * / setZf () / * when the pause button is clicked, we begin to judge that if the throttle is true, call the above function to achieve the effect of starting to switch the blessing, and close the throttle * / $('# btn') [0] .onclick = function () {if (isok) {setZf (); isok = false } else {/ * if the throttle is closed (isok=false), clear the timer to achieve the pause effect, and then open the throttle to facilitate the next switch * / clearInterval (t); isok= true;}}

3. What you do after clicking the fire button (the following code uses Jquery)

/ / get the element and reassign the value const box = $('.box'); const fire = $('# fire'); let count; / / when the ignition button is clicked, let the fireworks launch BGM start playing immediately, and set the button to disable clicks to prevent users from clicking repeatedly, resulting in BUG overlap fire [0] .onclick = function () {$('audio') [1] .play () Fire [0] .fireworks = true;} / / when the fire button is clicked, use a little delay of the event (just at the end of the fireworks BGM) to play New year's BGM fire.click (function () {$('audio') [0] .play ()) / / add CSS style to the fireworks box to achieve the fireworks center display box.css ({left:'50%', transform: 'translateX (- 50%)',}) / * add animation to the fireworks box and change the top value. When top equals 100px, the animation ends, because the top initial value of box is at the bottom of the screen. Change the top value to 100px to create a visual effect of slowly moving upward. * / box.animate ({top: '100pxmatch, / * function that starts execution after the animation ends. Function () {/ * when the fireworks ball reaches the specified position, add the CSS style with animation (zoom) effect to it to achieve the visual effect of fireworks display * / box.addClass (' fire'). / * use a timer to determine whether the fireworks are finished, and then let the fireworks ball be hidden to show the logo of the year of the Tiger in 2022. Let the blessing box show * / count = setInterval (() = > {if (Math.abs (box.offset (). Top) = = 100) {box.css ({'opacity':' 0'}) $('.he') .hide () $('.title') [0] .style.display = 'block'; $(' .greetings') [0] .style.opacity = '1century; $(' body'). Css ({}) clearInterval (count);}}, 100);}) }) these are all the contents of the article "how to realize New Year's Eve's fireworks display and random blessing based on JavaScript". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.