本文主要是介绍JS原生 之------放烟花喽，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!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;}
}
这篇关于JS原生 之------放烟花喽的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
