javascript 烟花效果
最终效果 请看 [http:///](http:///)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>firework</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
body{
background-color: #000;
overflow: hidden;
}
.firework{
position: absolute;
width: 15px;
height: 40px;
border-radius: 50%;
background-color: red;
}
.fireworks{
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
background-color: red;
}
.info h1{
color: red;
position: absolute;
left: 0;
top: 0;
}
.info{
display: none;
}
.tips{
color: red;
position: absolute;
left: 50%;
top: 50%;
font-size: 25px;
font-family: 楷体;
}
</style>
</head>
<body>
<div class="tips">请点击屏幕</div>
<div class="info">
<h1>hello hello !</h1>
</div>
<script type="text/javascript">
infor = ('info')[0];
infors = ('h1')[0];
= function(ev){
= color();
= "block";
var ev = ev || ;
();
var oDiv = ("div");
= "firework"
x = ;
y = ;
= x + "px";
= color();
= + "px";
(oDiv);
var speed = 10;
var timer = setInterval(function(){
= - speed + "px";
if(<=){
= ;
clearInterval(timer);
(oDiv);
firework(x,y);
}
},1000/60)
function firework(x,y){
var n = Math.ceil(Math.random()*50) + 25;
var sDiv = [];
for(var i=0;i<n;i++){
sDiv[i] = ("div");
sDiv[i].className = "fireworks";
sDiv[i]. = x + "px";
sDiv[i]. = y + "px";
sDiv[i]. = color();
sDiv[i].speedx = Math.ceil(Math.random()*20) - 10;
sDiv[i].speedy = Math.ceil(Math.random()*20) - 10;
(sDiv[i]);
}
setInterval(function(){
for(var i =0; i<n ; i++){
sDiv[i]. = sDiv[i].offsetLeft + sDiv[i].speedx + "px";
sDiv[i]. = sDiv[i].offsetTop + sDiv[i].speedy + "px";
if(sDiv[i].speedy < 30){
sDiv[i].speedy ++;
}
if(sDiv[i].offsetLeft<0 || sDiv[i].offsetLeft > || sDiv[i].offsetTop>){
(sDiv[i]);
}
}
},1000/60)
}
}
function color(){
var r =Math.ceil(Math.random()*245)+10;
var g =Math.ceil(Math.random()*245)+10;
var b =Math.ceil(Math.random()*245)+10;
return "rgb("+r+","+g+" , "+b+")";
}
</script>
</body>
</html>