基於JavaScript實現除夕煙花秀與隨機祝福語
阿新 • • 發佈:2022-01-26
目錄
- 專案截圖
- 進入後的介面
- 點選按鈕
- 點選之後的動畫
- 煙花結束後的介面
- 程式碼實現
- HTML程式碼
- 程式碼
- 程式碼
專案截圖
進入後的介面
點選按鈕
點選之後的動畫
煙花結束後的介面
程式碼實現
涉及的技術:HTML5多媒體,CSS定位,動畫,面向物件,動畫、事件
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" 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> <!--這個是煙花結束後,出現在上面的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>
上面的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; } /*祝福語盒子的樣式,hpZHi這裡指的注意的是自身的目標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.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; } }
以上的css程式碼,可以看到,我使用了大量的定位。這是因為後面的動畫都需要基於定位的left和top來實現。
好啦結構和樣式都有了,我們就來看看js(行為)吧
Script程式碼
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 BhpZHiirth();
//定義一個文件碎片,優化程式效能(http://www.cppcns.com減少頁面重繪與迴流)
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元素,並將www.cppcns.com其追加到文件碎片中
$(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);
})
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; } }
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); }); })
以上就是這個專案的所有程式碼,再次預祝大家新年快樂,虎年大吉,財源滾滾。
專案體驗連結:http://www.starqin920.cn/chuxi/index.html
以上就是基於JavaScript實現除夕煙花秀與隨機祝福語的詳細內容,更多關於JavaScript煙花 隨機祝福語的資料請關注我們其它相關文章!