溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹基于JavaScript如何實現(xiàn)除夕煙花秀與隨機祝福語，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！
涉及的技術(shù)：HTML5多媒體，CSS定位，動畫，js面向?qū)ο?，Jquery動畫、事件
<!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" rel="external nofollow" type="image/x-icon"> <link rel="stylesheet" href="./css/index.css" rel="external nofollow" > <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> <!--這個是煙花結(jié)束后，出現(xiàn)在上面的2022圖片 <div class="title"></div> <!--這個就是隨機生成祝福語的大盒子啦--> <div class="greetings"> <!--可以通過這個div來動態(tài)的呈現(xiàn)祝福語，默認(rèn)第一個是虎虎生威--> <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>
上面的html代碼結(jié)構(gòu)就是，煙花盒（.he)、點火按鈕(.fire)、煙花(.box)、顯示2022虎年logo(.title)、祝福語盒子(.greetings)、顯示祝福的具體容器(.yu 和 .blessing)、暫?？焖亠@示的按鈕(.btn)、兩個音頻。一共10個重要元素。
/*清除默認(rèn)的邊距*/
* {
margin: 0;
padding: 0;
}
/*導(dǎo)入字體，用來設(shè)置在祝福語上*/
@font-face {
font-family: 'djs';
src: url(../font/datk6.ttf);
}
/*設(shè)置body超出隱藏，因為后面煙花會超出，導(dǎo)致頁面被撐開*/
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值，實現(xiàn)由下而上的發(fā)射效果*/
.box {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
transition: all;
top: calc(100% - 50px);
left: 50%;
transform: translateX(-50%);
}
/*這是煙花綻放生成的小點，就是哪些五顏六色的小點，后面通過js隨機生成個數(shù)，位置，大小，因為是隨機的所有這個只設(shè)置絕對定位，不給定具體的top和left值*/
.box span {
position: absolute;
display: inline-block;
border-radius: 50%;
}
/*當(dāng)box到達(dá)指定的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;
}
/*祝福語盒子的樣式，這里指的注意的是自身的目標(biāo)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%;
}
/*這就是祝福與顯示盒子的本體啦，這里主要設(shè)置字體樣式*/
#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%;
}
/*動畫函數(shù)，我在寫這個動畫函數(shù)之前，就猜測，如果父元素縮放，
里面的子元素會不會隨著一起縮放，寫出來后，證明我的猜測是正確的*/
@keyframes suofang {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(20);
opacity: .5;
}
100% {
transform: scale(100);
opacity: 0;
display: none;
}
}以上的css代碼，可以看到，我使用了大量的定位。這是因為后面的動畫都需要基于定位的left和top來實現(xiàn)。
好啦結(jié)構(gòu)和樣式都有了，我們就來看看js（行為）吧
1、生成煙花球和焰火
$(function() {
//封裝一個生成隨機數(shù)的函數(shù)，方便后期隨機生成煙花焰火的個數(shù)，大小，位置
function rand(min, max) {
return Math.random() * (max - min) + min;
}
//創(chuàng)建一個構(gòu)造函數(shù)，構(gòu)造函數(shù)中調(diào)用隨機函數(shù)，生成500-1000之間隨機的隨機數(shù)，用于生成焰火的個數(shù)
function Birth() {
this.sum = parseInt(rand(500, 1000));
}
//在構(gòu)造函數(shù)的原型對象上添加隨機生成位置，大小的函數(shù)，里面調(diào)用之前定義的隨機函數(shù)
Birth.prototype.suiji = function() {
//隨機生成一個X軸坐標(biāo)
this.x = parseInt(rand(0, 50));
//隨機生成一個Y軸坐標(biāo)
this.y = parseInt(rand(0, 50));
//隨機生成一個寬度，因為生成的焰火式正圓，所以這里生成的焰火寬高式相等
this.w = parseInt(rand(1, 3));
//隨機生成一個rgb顏色（0-255之間哦）
this.color = parseInt(rand(0, 255));
//將生成的對象返回（拋出）
return this;
}
//將上面的構(gòu)造函數(shù)實例化為對象，這樣這個對象就可以訪問上面構(gòu)造函數(shù)生成的所有數(shù)據(jù)了
const qiu = new Birth();
//定義一個文檔碎片，優(yōu)化程序性能（減少頁面重繪與回流）
const jsbox = document.createDocumentFragment();
//使用循環(huán)生成焰火，這里焰火使用span標(biāo)簽來表示
for (var i = 0; i < qiu.sum; i++) {
//獲取本次循環(huán)生成的x軸坐標(biāo)
var x = qiu.suiji().x;
//獲取本次循環(huán)生成的y軸坐標(biāo)
var y = qiu.suiji().y;
//獲取本次循環(huán)生成的高和寬
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 });
}
//將文檔碎片追加到煙花盒子里，至此煙花部分結(jié)束
$('.box').append(jsbox);
})2、祝福語快速切換與暫停查看
//我們將需要展示的祝福語，寫在數(shù)組中，后期遍歷這個數(shù)組就可以了
const arr = ['虎虎生威', '財源滾滾', '虎年大運', '虎氣沖天', '虎越新春', '虎虎虎虎'];
//聲明一個全局變量，用來當(dāng)作下標(biāo)訪問數(shù)組
let ind = 0;
/*聲明一個全局變量，用來當(dāng)作節(jié)流閥，防止用戶反復(fù)點擊導(dǎo)致定時器疊加，
祝福語切換太快，還能防止用戶反復(fù)點擊導(dǎo)致BGM重復(fù)播放*/
let isok = false;
//定義一個全局變量用來存儲頁面中的定時器
let t;
//快速切換祝福語的函數(shù)
function setZf() {
//使用定時器，每0.01秒執(zhí)行一次定時器中的代碼
t = setInterval(function() {
/*判斷ind是不是等于數(shù)組長度-1，以免小標(biāo)超出數(shù)組實際長度出現(xiàn)undefinde，
如果是，就將ind歸零，不是就繼續(xù)自加*/
if (ind >= arr.length - 1) {
ind = 0;
} else {
ind++;
}
/*將從數(shù)組中讀取出來的祝福語，渲染到頁面中*/
$('#blessing')[0].innerHTML = arr[ind];
}, 10);
}
/*調(diào)用上面的函數(shù)，讓頁面一打開就開始執(zhí)行，因為其CSS樣式設(shè)置了隱藏，
所以這里即使頁面一打開，用戶也看不見*/
setZf();
/*當(dāng)暫停按鈕被點擊后，我們開始判斷，節(jié)流閥如果是真，就調(diào)用上面的函數(shù)，
實現(xiàn)開始切換祝福語的效果，并將節(jié)流閥關(guān)閉*/
$('#btn')[0].onclick = function() {
if (isok) {
setZf();
isok = false;
} else {
/*如果節(jié)流閥是關(guān)閉的（isok=false）,就清除定時器，到達(dá)暫停的效果，
然后將節(jié)流閥打開，方便下次開啟切換*/
clearInterval(t);
isok = true;
}
}3、點擊開火按鈕后所做的事情（一下代碼使用了Jquery）
//獲取元素并重新賦值
const box = $('.box');
const fire = $('#fire');
let count;
//當(dāng)點火按鈕被點擊時，立馬讓煙花發(fā)射BGM開始播放，并將按鈕設(shè)為禁止點擊，防止用戶反復(fù)點擊，造成BUG重疊
fire[0].onclick = function() {
$('audio')[1].play();
fire[0].disabled = true;
}
//當(dāng)開火按鈕被點擊，利用這個事件的一點點的延遲效果（剛好是煙花發(fā)射BGM播放結(jié)束）播放新年BGM
fire.click(function() {
$('audio')[0].play();
//給煙花盒子添加CSS樣式，達(dá)到煙花居中顯示
box.css({
left: '50%',
transform: 'translateX(-50%)',
})
/*給煙花盒子添加動畫，改變的是top值，當(dāng)top等于100px時動畫結(jié)束，因為box的top
初始值位于屏幕的底部，讓其top值改為100px，就形成了慢慢向上移動的視覺效果。*/
box.animate({
top: '100px',
/*動畫結(jié)束后，開始執(zhí)行的函數(shù)*/
}, function() {
/*當(dāng)煙花球到達(dá)指定位置后，給其添加帶有動畫（縮放）效果的CSS樣式，達(dá)到煙花綻放的視覺效果*/
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);
});
})以上是“基于JavaScript如何實現(xiàn)除夕煙花秀與隨機祝福語”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼