Code Tạo Pháo Hoa Cho Website Trang Trí Tết
Ngày tết gần đến rồi, ắt hẵn những bạn làm Webiste đều muốn trang trí cho ngôi nhà thứ 2 của mình thêm lộng lẫy lung linh huyền ảo. Hôm này mình sẽ hướng dẫn cho các bạn cách tạo pháo hoa để tạo không khí tết cho Webiste nhé.
Bước 1: Trước tiên bạn cần tạo 1 file tên phaohoa.js, nội dung code copy ở dưới nhé (có thể dùng notepad). Rồi up lên Hosting
Hoặc bạn có thể tải về theo link: https://yeucongngheso.vn/resource/phaohoa/phaohoa.js
// <![CDATA[
var bits=80; // how many bits
var speed=33; // how fast – smaller is faster
var bangs=5; // how many can be launched simultaneously (note that using too many can slow the script down)
var colours=new Array(“#03f”, “#f03”, “#0e0”, “#93f”, “#0cf”, “#f93”, “#f0c”);
// blue red green purple cyan orange pink
/****************************
* Fireworks Effect *
*(c)2004-14 mf2fm web-design*
* http://www.mf2fm.com/rv ** DON’T EDIT BELOW THIS BOX *
****************************/
var bangheight=new Array();
var intensity=new Array();
var colour=new Array();
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var stars=new Array();
var decay=new Array();
var swide=1000;
var shigh=600;
var boddie;
if (typeof(‘addRVLoadEvent’)!=’function’) function addRVLoadEvent(funky) {
var oldonload=window.onload;
if (typeof(oldonload)!=’function’) window.onload=funky;
else window.onload=function() {
if (oldonload) oldonload();
funky();
}
}
addRVLoadEvent(light_blue_touchpaper);
function light_blue_touchpaper() { if (document.getElementById) {
var i;
boddie=document.createElement(“div”);
boddie.style.position=”fixed”;
boddie.style.top=”0px”;
boddie.style.left=”0px”;
boddie.style.overflow=”visible”;
boddie.style.zIndex = ‘9999’;
boddie.style.width=”1px”;
boddie.style.height=”1px”;
boddie.style.backgroundColor=”transparent”;
document.body.appendChild(boddie);
set_width();
for (i=0; i<bangs; i++) {
write_fire(i);
launch(i);
setInterval(‘stepthrough(‘+i+’)’, speed);
}
}}
function write_fire(N) {
var i, rlef, rdow;
stars[N+’r’]=createDiv(‘|’, 12);
boddie.appendChild(stars[N+’r’]);
for (i=bits*N; i<bits+bits*N; i++) {
stars[i]=createDiv(‘*’, 13);
boddie.appendChild(stars[i]);
}
}
function createDiv(char, size) {
var div=document.createElement(“div”);
div.style.font=size+”px monospace”;
div.style.position=”absolute”;
div.style.zIndex = ‘9999’;
div.style.backgroundColor=”transparent”;
div.appendChild(document.createTextNode(char));
return (div);
}
function launch(N) {
colour[N]=Math.floor(Math.random()*colours.length);
Xpos[N+”r”]=swide*0.5;
Ypos[N+”r”]=shigh-5;
bangheight[N]=Math.round((0.5+Math.random())*shigh*0.4);
dX[N+”r”]=(Math.random()-0.5)*swide/bangheight[N];
if (dX[N+”r”]>1.25) stars[N+”r”].firstChild.nodeValue=”/”;
else if (dX[N+”r”]<-1.25) stars[N+”r”].firstChild.nodeValue=”\\”;
else stars[N+”r”].firstChild.nodeValue=”|”;
stars[N+”r”].style.color=colours[colour[N]];
}
function bang(N) {
var i, Z, A=0;
for (i=bits*N; i<bits+bits*N; i++) {
Z=stars[i].style;
Z.left=Xpos[i]+”px”;
Z.top=Ypos[i]+”px”;
if (decay[i]) decay[i]–;
else A++;
if (decay[i]==15) Z.fontSize=”7px”;
else if (decay[i]==7) Z.fontSize=”2px”;
else if (decay[i]==1) Z.visibility=”hidden”;
if (decay[i]>1 && Math.random()<.1) {
Z.visibility=”hidden”;
setTimeout(‘stars[‘+i+’].style.visibility=”visible”‘, speed-1);
}
Xpos[i]+=dX[i];
Ypos[i]+=(dY[i]+=1.25/intensity[N]);
}
if (A!=bits) setTimeout(“bang(“+N+”)”, speed);
}
function stepthrough(N) {
var i, M, Z;
var oldx=Xpos[N+”r”];
var oldy=Ypos[N+”r”];
Xpos[N+”r”]+=dX[N+”r”];
Ypos[N+”r”]-=4;
if (Ypos[N+”r”]<bangheight[N]) {
M=Math.floor(Math.random()*3*colours.length);
intensity[N]=5+Math.random()*4;
for (i=N*bits; i<bits+bits*N; i++) {
Xpos[i]=Xpos[N+”r”];
Ypos[i]=Ypos[N+”r”];
dY[i]=(Math.random()-0.5)*intensity[N];
dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;
decay[i]=16+Math.floor(Math.random()*16);
Z=stars[i];
if (M<colours.length) Z.style.color=colours[i%2?colour[N]:M];
else if (M<2*colours.length) Z.style.color=colours[colour[N]];
else Z.style.color=colours[i%colours.length];
Z.style.fontSize=”13px”;
Z.style.visibility=”visible”;
}
bang(N);
launch(N);
}
stars[N+”r”].style.left=oldx+”px”;
stars[N+”r”].style.top=oldy+”px”;
}
window.onresize=set_width;
function set_width() {
var sw_min=999999;
var sh_min=999999;
if (document.documentElement && document.documentElement.clientWidth) {
if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
}
if (typeof(self.innerWidth)!=”undefined” && self.innerWidth) {
if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
}
if (document.body.clientWidth) {
if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
}
if (sw_min==999999 || sh_min==999999) {
sw_min=800;
sh_min=600;
}
swide=sw_min;
shigh=sh_min;
}
// ]]>
Bước 2: Chèn đoạn Code Tạo Pháo Hoa Cho Website dưới đây vào dưới thẻ <body> của trang Web
Lưu ý: src=”https://websitecuaban.com/phaohoa.js”đây là đường dẫn của file phaohoa.js mà bạn up lên Website, nhớ thay đường dẫn cho đúng nhé.
<script src=”https://websitecuaban.com/phaohoa.js”></script>
<script type=”text/javascript”>
var bgBegin = 22;
var bgEnd = 31;
var bgTetId = 31;
var bgTetUrl = ‘/banner/’;
document.body.style.backgroundImage = ‘url(‘ + bgTetUrl + bgTetId + ‘.jpg)’;
document.body.style.backgroundAttachment = ‘fixed’;
document.body.style.backgroundSize = ‘cover’;
setInterval(function(){
if (bgTetId == bgEnd) bgTetId = bgBegin;
document.body.style.backgroundImage = ‘url(‘ + bgTetUrl + bgTetId + ‘.jpg)’;
document.body.style.backgroundAttachment = ‘fixed’;
document.body.style.backgroundSize = ‘cover’;
bgTetId++;
}, 15000);
</script>
Bây giờ bạn có thể mở lại Website và nhấn F5 để refresh và thưởng thức nhé
Bạn có thể xem làm Website có ruồi chạy tại bài này