烟花php,新年倒计时,定时开启新年烟花效果

路过tiandi兄的博客打酱油,无意中看到了"为WordPress添加新年礼花效果" 这篇文章,但感觉气势不够强烈啊,按自己需要改改,看下效果还是不错的!

过年什么的,来个倒计时,烟花什么是必须的。新年烟花定时开启,定时关闭也有必要:本身烟花效果,个人觉得还是比较影响页面加载速度的,呵呵!

折腾下,修改后的,效果如下图所示:

7faba1d1cf922064070ba9492dc8eb86.png

想要在自己的站点上添加上面的效果,只需要加入下面的代码,并修改开始时间dateStr1 & 结束时间dateStr2。嗯,就这样,Enjoy....

完整源码如下:

// 预览效果,修改开始 & 结束时间

// 开始时间

var dateStr1="2014/01/16 11:24:50",

// 结束时间

dateStr2="2014/01/16 11:25:25",

// 倒计时5分钟,单位秒(s)

countdown=300,

temp,startTime,endTime;

var number=0;

startTime=new Date(dateStr1);

endTime=new Date(dateStr2);

var timer=setInterval(function(){

now= new Date();

if(now

console.log("还没进入倒计时时间!");

}else if(now

// 进入倒计时

console.log("进入倒计时时间!");

temp=Math.ceil((startTime-now)/1000);

temp--;

console.log(temp);

if(temp>=0){

var $i=$("").html("节日倒计时
"+temp+"秒");//添加到页面的元素

$i.css({

width:200,

height:80,

borderRadius:20,

zIndex:99999,

top:"50%",

left:"50%",

position:"absolute",

marginLeft:-100,

marginTop:-40,

textAlign:"center",

lineHeight:"35px",

backgroundColor:"#E94F06",

color:"#fff",

opacity:0,

fontSize:"2em",

paddingTop:15

});

$("body").append($i);

$i.animate({

opacity:1

},950,function(){

if(temp==0){

$i.html("新年快乐!
Happy New Year
");

setTimeout(function(){

$i.fadeOut(15000);

});

}else{$i.remove();}

});

}

}else if(now

console.log("时间到了!!");

if(number==0) fireworks();

number++;

}else{

// 清除烟花效果

clearTimeout(bangs);

clearInterval(fwAction);

$(boddie).remove();

clearInterval(timer);

console.log("已按设定时间去除烟花效果!");

}

now=null;

},1000);

// 烟花效果js

//

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-11 mf2fm web-design*

* https://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=800;

var shigh=600;

var boddie;

var bbang,fwAction;

function write_fire(N) {

var i, rlef, rdow;

stars[N+'r']=createDiv('|', 12);

boddie.appendChild(stars[N+'r']);

for (i=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.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"]

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

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";

Xpos[i]+=dX[i];

Ypos[i]+=(dY[i]+=1.25/intensity[N]);

}

if (A!=bits){bbang=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"]

M=Math.floor(Math.random()*3*colours.length);

intensity[N]=5+Math.random()*4;

for (i=N*bits; 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

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.οnresize=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

if (self.innerHeight>0 && self.innerHeight

}

if (document.body.clientWidth) {

if (document.body.clientWidth>0 && document.body.clientWidth

if (document.body.clientHeight>0 && document.body.clientHeight

}

if (sw_min==999999 || sh_min==999999) {

sw_min=800;

sh_min=600;

}

swide=sw_min;

shigh=sh_min;

}

function fireworks() { 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.width="1px";

boddie.style.height="1px";

boddie.style.backgroundColor="transparent";

document.body.appendChild(boddie);

set_width();

for (i=0; i

write_fire(i);

launch(i);

fwAction=setInterval('stepthrough('+i+')', speed);

}

}}

// ]]>

提示:你可以先修改部分代码再运行。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值