當前位置：首頁 > news >正文

丹東做網站的吉林seo管理平臺

news 2025/7/2 23:03:22

丹東做網站的,吉林seo管理平臺,廣州手機網站建設多少錢,網站備案與所在地目錄前言一、煙花秀效果功能分解 1、功能分解 2、界面分解二、HTML功能實現 1、html界面設計 2、背景音樂和燃放觸發(fā) 3、燃放控制 4、對聯展示 5、腳本引用即文本展示三、腳本調用及實現 1、煙花燃放 2、燃放響應 3、煙花canvas創(chuàng)建 4、燃放聲音控制 5、實際…

前言

一、煙花秀效果功能分解

1、功能分解

2、界面分解?

?二、HTML功能實現

1、html界面設計

2、背景音樂和燃放觸發(fā)

3、燃放控制

4、對聯展示

5、腳本引用即文本展示

三、腳本調用及實現

1、煙花燃放

2、燃放響應

3、煙花canvas創(chuàng)建?

4、燃放聲音控制

?5、實際效果

?總結

前言

????????今天是2024年2月15日，農歷正月初六。正月初六，又稱為“馬日”，是中國傳統(tǒng)節(jié)日春節(jié)期間的一個重要習俗日。這一天，人們有送窮、啟市、外出游玩、吃驢打滾等習俗。大年初六，你們那都有什么傳統(tǒng)習俗呢？我們來看看全國都有什么習俗吧。

?送窮。正月初六是送窮神的日子，人們會進行大掃除，清理家中的垃圾和廢物，以示送走貧窮和厄運。在送窮的過程中，人們還會貼上紅色的對聯和福字，寓意著迎接好運和富貴。
?啟市。初六也是生意人“啟市”的好日子，做生意的生意人有著初六開市的習俗，初六這一天會放鞭炮開張，有些講究的商戶還會在門上貼上，開市大吉，萬事亨通的對聯，寓意著今年的生意能夠紅紅火火，大吉大利，財源滾滾來。
?外出游玩。正月初六有外出游玩的習俗，而且特別喜歡去人多熱鬧的地方。大家外出會走一個圓圈的形狀，意味著新的一年生活圓滿和幸福。
? 吃驢打滾。正月初六吃驢打滾也是為了取一個好彩頭，在民間有著吃驢打滾，財源滾滾來的美好寓意。
?擺吉祥果。家家戶戶都會擺上寓意吉祥的水果，以祈求自己新的一年，順順利利，大吉大利。

????????上面都是一些傳統(tǒng)節(jié)日中的重要習俗，各位小伙伴可以在評論區(qū)給我們分享一些你們當地有趣的初六或者過年習俗吧。大年初六，相信很多IT的小伙伴已經踏上了返程的道路，真誠祝愿大家在龍年順順利利，所愿皆所成。作為一名IT從業(yè)者，也想用技術來與大家一起度過這個愉快，寓意順利的初六。

????????本文將重點講解使用HTML5實現一款動態(tài)的煙花秀，不僅有美麗絢爛的煙花，同時在煙花燃放時，還有預約的音樂，加上熱情動態(tài)的文字燃放效果，最后將給出實戰(zhàn)代碼源碼，感興趣的朋友可以參考實現。

一、煙花秀效果功能分解

????????煙花秀的效果包含五彩繽紛的煙花展示，主要采用canvas技術，在燃放的過程中，需要模擬煙花爆炸的聲音，同時還有背景音樂，系統(tǒng)界面可以展示溫馨的提示，在展示頁面兩側需要展示春聯。下面從功能和界面兩個方面對煙花秀進行分解。

1、功能分解

2、界面分解?

????????煙花秀的界面結構圖如下所示，整體采用對聯加煙花效果背景音樂為主。

?二、HTML功能實現

????????本節(jié)將對煙花秀效果的實現進行詳細的說明。主要包含主要展示頁面的可視化展示創(chuàng)建，相關腳本功能的編寫。本文采用的示例代碼是在開源的框架上修改，同時修改了一些展示的錯誤以及修復了文字動態(tài)煙花播放效果，音效控制等功能。文末會分享其開源地址，下圖是這個下載下來的示例項目的js源碼，可以看到，其是采用jquery等傳統(tǒng)es5開發(fā)模式進行開發(fā)的。

1、html界面設計

????????首先，需要創(chuàng)建一個html頁面，定義最基礎的網頁開發(fā)框架。html的基礎知識比較簡單，這里不再進行贅述。關鍵源代碼如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>2024龍年快樂</title><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="theme-color" content="#000000"><link rel="shortcut icon" type="image/png"href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png"><link rel="icon" type="image/png"href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png"><link rel="apple-touch-icon-precomposed"href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png"><meta name="msapplication-TileColor" content="#000000"><meta name="msapplication-TileImage"content="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png"><link href="static/css/css.css" rel="stylesheet"><link rel="stylesheet" href="static/css/reset.min.css"><link rel="stylesheet" href="static/css/style.css"><script src="static/js/jquery.min.js" type="text/javascript"></script></head><body></body></html>

2、背景音樂和燃放觸發(fā)

????????煙花秀中除了煙花燃放本身的爆炸聲音，同時為了烘托和渲染節(jié)日的氛圍，也增加背景音樂的播功能，更加沉浸式的欣賞煙花秀效果，燃放觸發(fā)是在界面上點擊后即實現煙花的燃放。定義背景音樂和燃放觸發(fā)的關鍵代碼如下：

<script src="static/js/jump.js"></script><img id="music_ico" onclick="" alt="" style=" display: inline; float: right;  "><audio id="audioDom" src="https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/7170534431801838367.mp3"preload="auto" loop="loop"></audio><div id="yhBtn"style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff ; font-size:15px    "><p>💥點爆</p><img style="width:64px;margin-bottom:24px "src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/aee169ba675b45da9c46178a7dff7141~tplv-tt-shrink:640:0.image?traceid=2023031217004633E93ACFE2CECD4E7B70&x-expires=2147483647&x-signature=s7SeUD%2FlMsfTpWPP7Tl47sPaT%2BQ%3D"></div>

????????需要注意的是，為了節(jié)約存儲空間，這里的背景音樂使用在線的mp3音樂，如果需要離線化展示，可以將mp3進行離線保存即可。

3、燃放控制

????????燃放控制可以支持對煙花秀的播放狀態(tài)進行控制，比如開啟和暫停。同時控制煙花的播放聲效等。還支持設置煙花的樣式、大小、時間、密度等（這里有一些小問題，需要使用的朋友需要自己去實現）。關鍵代碼如下：

<div style="height: 100; width: 100; position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-play" viewbox="0 0 24 24"><path d="M8 5v14l11-7z"></path></symbol><symbol id="icon-pause" viewbox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></symbol><symbol id="icon-close" viewbox="0 0 24 24"><pathd="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></symbol><symbol id="icon-settings" viewbox="0 0 24 24"><pathd="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"></path></symbol><symbol id="icon-sound-on" viewbox="0 0 24 24"><pathd="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"></path></symbol><symbol id="icon-sound-off" viewbox="0 0 24 24"><pathd="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"></path></symbol></svg></div><div class="container"><div class="loading-init"><div class="loading-init__header"></div><div class="loading-init__status"></div></div><div class="stage-container remove"><div class="page_two hide"><div class="type_words" id="contents"></div></div><div class="canvas-container"><canvas id="trails-canvas"></canvas><canvas id="main-canvas"></canvas></div><div class="controls hide"><div class="btn pause-btn"><svg fill="white" width="24" height="24"><use href="#icon-pause" xlink:href="#icon-pause"></use></svg></div><div class="btn sound-btn"><svg fill="white" width="24" height="24"><use href="#icon-sound-off" xlink:href="#icon-sound-off"></use></svg></div><div class="btn settings-btn"><svg fill="white" width="24" height="24"><use href="#icon-settings" xlink:href="#icon-settings"></use></svg></div></div><div class="menu hide"><div class="menu__inner-wrap"><div class="btn btn--bright close-menu-btn"><svg fill="white" width="24" height="24"><use href="#icon-close" xlink:href="#icon-close"></use></svg></div><div class="menu__header">設置</div><form><div class="form-option form-option--select"><label class="shell-type-label">煙花類型</label><select class="shell-type"></select></div><div class="form-option form-option--select"><label class="shell-size-label">煙花大小</label><select class="shell-size"></select></div><div class="form-option form-option--select"><label class="quality-ui-label">畫質</label><select class="quality-ui"></select></div><div class="form-option form-option--select"><label class="sky-lighting-label">天空照明</label><select class="sky-lighting"></select></div><div class="form-option form-option--select"><label class="scaleFactor-label">規(guī)模</label><select class="scaleFactor"></select></div><div class="form-option form-option--checkbox"><label class="auto-launch-label">自動發(fā)射</label><input class="auto-launch" type="checkbox"></div><div class="form-option form-option--checkbox form-option--finale-mode"><label class="finale-mode-label">結局模式</label><input class="finale-mode" type="checkbox"></div><div class="form-option form-option--checkbox"><label class="hide-controls-label">隱藏控制器</label><input class="hide-controls" type="checkbox"></div><div class="form-option form-option--checkbox form-option--fullscreen"><label class="fullscreen-label">全屏</label><input class="fullscreen" type="checkbox"></div><div class="form-option form-option--checkbox"><label class="long-exposure-label">打開快門</label><input class="long-exposure" type="checkbox"></div></form></div></div></div><div class="help-modal"><div class="help-modal__overlay"></div><div class="help-modal__dialog"><div class="help-modal__header"></div><div class="help-modal__body"></div><button type="button" class="help-modal__close-btn">關閉</button></div></div></div>

4、對聯展示

為了在展示頁面中烘托節(jié)日的氣氛，這里在展示頁面左右兩邊增加對聯的展示。這里采用div布局，字體采用楷體。對聯內容如下：

鯤鵬展翅華夏騰飛
龍鳳呈祥陽春錦繡

代碼實現如下：

<div style="width:60px;position:fixed;left:0px;top:30%;background-color:red;text-align:center;font-family:楷體;font-size:36px;"><font color="black" >鯤<br/>鵬<br/>展<br/>翅<br/>華<br/>夏<br/>騰<br/>飛</font></div><div style="width:60px;position:fixed;right:0px;top:30%;background-color:red;text-align:center;font-family:楷體;font-size:36px;"><font color="black">龍<br/>鳳<br/>呈<br/>祥<br/>陽<br/>春<br/>錦<br/>繡</font></div>

5、腳本引用即文本展示

????????在html頁面引用相應的javascript腳本資源，在這里增加相應的邏輯調用。同時，在這里會將頁面展示動態(tài)文字，將文字作為煙花的實例進行燃放，為了在移動端實現這種效果，同時支持分辨率適配。詳細代碼設置如下：

<script>window.myWord = "?新年快樂(*^▽^*) <br > 新的一年， 新的開始， 要繼續(xù)努力哦。<br/>祝朋友們學習進步，開心快樂";window.words = ["", "2024", "新年快樂", "萬事如意", "心想事成", "龍年大吉","龍年行大運","祥瑞照門庭"];</script><script src="static/js/jquery.min.js" type="text/javascript"></script><script src='static/js/fscreen@1.0.1.js'></script> <script src='static/js/stage@0.1.4.js'></script><script src='static/js/mymath.js'></script><script src="static/js/script.js"></script><script src="static/js/main.js"></script><script src="static/js/game.js"></script><script src="static/js/game2.js?v=1.0.0"></script><style>@media only screen and (max-width: 768px) {.canvas-container {/* 迪士尼 *//* background-image: url("https://p3-search.byteimg.com/obj/pgc-image/09b7e7820ba94e76b10a39802b901cab"); */background-image: url(./static/img/20231229155918.jpg);/* 放煙花 */background-size: cover;background-position: center;}}@media only screen and (min-width: 768px) {.canvas-container {/* 天空月亮 */background-image: url(./static/img/e83f1c98e4ff999d33fa02d95d083f5d.png);background-size: cover;background-position: center;}}</style>

三、腳本調用及實現

????????html框架僅僅是頁面的展示外殼，要讓煙花秀真正的動態(tài)燃放，必然少不了javascript的支持。這里將重點介紹腳本的調用。讓我們來看看煙花秀的實現過程。

1、煙花燃放

????????在頁面中我們定義了一個煙花的圖片，在頁面中點擊任意位置即可完成煙花的點燃。同時完成相關事件的觸發(fā)。事件源碼在main.js中：

function musicPlay(isPlay) {var media = document.querySelector('#audioDom');if (isPlay && media.paused) {media.play();}if (!isPlay && !media.paused) {media.pause();}
}
function musicInBrowserHandler() {setTimeout(function () {musicPlay(true)}, 0)
}
document.body.addEventListener('touchstart', musicInBrowserHandler);
$('#yhBtn').click(e => {$('#yhBtn').hide()setTimeout(function () {startF();}, 3000)setTimeout(() => {start()fireworks();}, 5000) // 這里的5000 是5s指煙花延時時間setTimeout(() => {function audioAutoPlay() {var audio = document.getElementById('audioDom');audio.play();}audioAutoPlay();}, 5000) // 這里的5000 是5s指音樂延時時間console.log(updateConfig({ autoLaunch: true }));
})
function fireworks() {$('.page_one').addClass('hide');$('.page_two').removeClass('hide');/*$('.page_two').fireworks({sound: false,opacity: 1,width: '100%',height: '100%'});*/
}
function start() {let str =window.myWord; let str_ = ''let i = 0let content = document.getElementById('contents')let timer = setInterval(() => {if (str_.length < str.length) {str_ += str[i++]content.innerHTML = '<p>' + str_ + '<span class="xx" style="opacity: 1;    color: red;">?</span></p>'                        //打印時加光標} else {clearInterval(timer)content.innerHTML = '<p>' + str_ + '</p>'}}, 100)
}