<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>烟花效果</title>
<style type="text/css">
*{margin:0;padding:0;}
body{background:#000;overflow:hidden;}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var winWidth = document.documentElement.clientWidth || document.body.clientWidth;
var winHeight = document.documentElement.clientHeight || document.body.clientHeight;
var disX = 0;
var disY = 0;
var scroll = null;
document.onclick = function(e){
var oEvent = e || window.event;
scroll = document.documentElement.scrollTop || document.body.scrollTop;
disX = oEvent.clientX;
disY = oEvent.clientY;
var moveDiv = document.createElement("div");
moveDiv.style.position = "absolute";
moveDiv.style.left = disX + "px";
moveDiv.style.top = winHeight + scroll + "px";
moveDiv.style.width = "5px";
moveDiv.style.height = "20px";
moveDiv.style.background = "red";
document.body.appendChild(moveDiv);
moveDiv.timer = setInterval(function(){
if(moveDiv.offsetTop<=disY){
clearInterval(moveDiv.timer);
document.body.removeChild(moveDiv);
bone();
}else{
moveDiv.style.top = moveDiv.offsetTop - 20 + "px";
}
},40)
}
function bone(){
var arr = [];
var timer = null;
var i;
var len = 0;
for(i=0;i<30;i++){
var boneDiv = document.createElement("div");
boneDiv.style.position = "absolute";
boneDiv.style.left = disX + "px";
boneDiv.style.top = disY + scroll + "px";
boneDiv.style.width = "5px";
boneDiv.style.height = "5px";
boneDiv.style.background = "#"+getBg();
document.body.appendChild(boneDiv);
arr.push(boneDiv);
boneDiv.iSpeedX = Math.ceil(Math.random()*20-10);
boneDiv.iSpeedY = Math.ceil(Math.random()*20-10);
}
len = arr.length;
timer = setInterval(function(){
for(i=0,len=arr.length;i<len;i++){
if(! arr[i]){continue}
arr[i].style.left = arr[i].offsetLeft + arr[i].iSpeedX + "px";
arr[i].style.top = arr[i].offsetTop + arr[i].iSpeedY + "px";
arr[i].iSpeedY++;
if(arr[i].offsetLeft<=0 || arr[i].offsetLeft>=winWidth || arr[i].offsetTop <=0 || arr[i].offsetTop >= winHeight){
document.body.removeChild(arr[i])
arr[i] = null;
len--;
}
if(len<=0){
clearInterval(timer);
}
}
},40)
}
function getBg(){
var color = Math.ceil(Math.random()*16777215).toString(16);
while(color<6){
color = "#"+color;
}
return color;
}
}
</script>
</body>
</html>