JS原生之------放烟花喽

最新推荐文章于 2024-07-25 11:15:00 发布

玉米_欣

最新推荐文章于 2024-07-25 11:15:00 发布

阅读量1.9k

点赞数

分类专栏：前端 js 文章标签： function javascript 烟花效果运动

本文链接：https://blog.csdn.net/u012967849/article/details/52633910

版权

前端同时被 2 个专栏收录

49 篇文章 0 订阅

订阅专栏

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>放烟花——欣欣博客</title>
		<style>
			html,body{overflow:hidden;}
			body,div,p{margin:0;padding:0;}
			body{background:#000;font:12px/1.5 arial;color:#7A7A7A;}
			.fire {
				width: 3px;
				height: 30px;
				background: white;
				position: absolute;
			} 
			.spark {
				position: absolute;
				width: 6px;
				height: 6px;
			}
		</style>
		<script src="move.js"></script>
		<script>
			οnlοad=function(){
				document.οnclick=function(e){
					e =e||event;
					var coord ={
						x:e.clientX,
						y:e.clientY
					};
					new Fire(coord).init().launch();
				}

				function Fire(coord){
					var self = this;
					//初始化
					this.init=function(){
						this.ball = document.createElement("div");
						this.ball.className="fire";
						this.ball.style.left = coord.x+"px";
						this.ball.style.top= window.innerHeight +"px";
						document.body.appendChild(this.ball);
						return this;
					}
					//发射
					this.launch=function(){
						
						animate(this.ball,{left:coord.x,top:coord.y,height:3},{callback:function(){
							self.explode();
						}});					
						return this;
					}
					//爆炸
					this.explode=function(){
						this.destory();
						var count = randomInt(30,50);
						for(var i =0;i<count;i++){
							new Spark(coord).init().parabola();
						}
					}
					//销毁
					this.destory = function(){
						this.ball.remove();
					}
				}
				function Spark(coord){
					var self = this;
					this.init=function(){
						this.box = document.createElement("div");
						this.box.className="spark";
						this.box.style.backgroundColor="#"+randomColor();
						console.log(this.box.style.backgroundColor)
						this.box.style.left = coord.x+"px";
						this.box.style.top = coord.y+"px";
						this.box.speedX = randomInt(-20,20);
						this.box.speedY = randomInt(-20,10);
						document.body.appendChild(this.box);
						return this;
					}
					this.parabola=function(){
						
						this.timer =setInterval(function(){
							if(self.box.offsetTop >window.innerHeight){
								clearInterval(self.timer);
								self.destroy();
								return;
							}
							self.box.style.left = self.box.offsetLeft + self.box.speedX +"px";
							self.box.style.top = self.box.offsetTop +self.box.speedY++ +"px";
							
						},30)
						
					}
					this.destory=function(){
						this.box.remove();
					}
					
					
				}
				
				//随机整数
				function randomInt(min,max){
					return Math.round(Math.random()*(max-min)+min);
				}
				//随机颜色
				function randomColor(){
					var R = Math.round( Math.random()*255 ).toString(16);
					var G = Math.round( Math.random()*255 ).toString(16);
					var B = Math.round( Math.random()*255 ).toString(16);
					return (R.length<2?"0"+R:R) + (G.length<2?"0"+G:G)+ (B.length<2?"0"+B:B);
				}
			}
		</script>
	</head>
	<body>
		
	</body>
</html>

move.js

<pre name="code" class="javascript">/**
 * 
 * @param {Object} obj 目标对象
 * @param {Object} json 要改变的属性
 * @param {Object} extend {buffer,callback} 当buffer为true时为弹性运动
 *  callback会在运动结束时，被执行
 * animate(obj, {top:500, left: 300}, {callback:function(){}, buffer: true})
 */
function animate(obj, json, extend){
	extend = extend || {};
	if(obj.isMoving){
		return;
	} else {
		stop();
		obj.isMoving = true;
	}
	//obj = Object.assgin(obj,extend);
	obj.buffer = extend.buffer;
	obj.callback = extend.callback;
	obj.timerlist = {};
	//为每一个属性添加一个定时器
	for(var attr in json){
		(function(attr){
			obj.timerlist[attr] = {speed:0};
			obj.timerlist[attr].timer = setInterval(function(){
				//首先得到当前值
				var iNow = 0;
				if(attr == "opacity"){
					iNow = getStyle(obj, attr) * 100; 
				} else {
					iNow = getStyle(obj, attr);
				}
				var speed = obj.timerlist[attr].speed;
				//根据目标值，计算需要的速度
				if(obj.buffer==true){
					speed += (json[attr] - iNow)/5;
					speed *= 0.75;
				} else {
					speed = (json[attr] - iNow)/5;
				}
				//当无限接近目标值时，停止定时器
				if(Math.abs(iNow - json[attr]) < 0.5){
					clearInterval(obj.timerlist[attr].timer);
					delete obj.timerlist[attr];
					if(getObjLength(obj.timerlist)==0){//所有定时器已停止
						stop();
						obj.callback ? obj.callback() : "";
					}
				} else {
					//根据速度，修改当前值
					if(attr == "opacity"){
						obj.style.opacity = (iNow+speed)/100;
						obj.style.filter = 'alpha(opacity=' + parseFloat(iNow+speed) + ')';			
					} else {
						obj.style[attr] = iNow+speed+"px";
					}
					obj.timerlist[attr].speed = speed;
				}
			}, 30);
		})(attr);
	}
	
	function clearTimer(){
		for(var i in obj.timerlist){
			clearInterval(obj.timerlist[i]);
		}
	}
	function getStyle(obj, attr){
		if(obj.currentStyle){
			return isNaN(parseFloat(obj.currentStyle[attr])) ? obj.style[attr]=0 : parseFloat(obj.currentStyle[attr]);
		} else {
			return isNaN(parseFloat(getComputedStyle(obj, null)[attr])) ? obj.style[attr]=0 : parseFloat(getComputedStyle(obj, null)[attr]);
		}
	}
	function getObjLength(obj){
		var n = 0;
		for(var i in obj){
			n++;
		}
		return n;
	}
	function stop(){
		clearTimer();//清除所有定时器
		obj.isMoving = false;
	}
}