路过tiandi兄的博客打酱油,无意中看到了"为WordPress添加新年礼花效果" 这篇文章,但感觉气势不够强烈啊,按自己需要改改,看下效果还是不错的!
过年什么的,来个倒计时,烟花什么是必须的。新年烟花定时开启,定时关闭也有必要:本身烟花效果,个人觉得还是比较影响页面加载速度的,呵呵!
折腾下,修改后的,效果如下图所示:
想要在自己的站点上添加上面的效果,只需要加入下面的代码,并修改开始时间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);
}
}}
// ]]>
提示:你可以先修改部分代码再运行。