作一個煙花，點擊的時候綻開

時間 2019-11-12

標籤一個煙花點擊時候綻開简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">html

<head>
<meta charset="UTF-8">
<title>Document</title>app

//每次點擊就在點擊的位置下方建立一個煙花對象
$(".container").onclick = function(event) {函數

var evt = event || window.event;this

//console.log(evt.clientX);htm

var target = {
left: evt.clientX - this.offsetLeft,
top: evt.clientY - this.offsetTop
};

//建立煙花對象
new Fireworks(this, target);對象

}ip

}
//煙花構造函數
function Fireworks(obj, target) {rem

this.obj = obj;
//console.log(this);
//煙花運動的目標值
this.target = target;get

this.fire = document.createElement("div");

//初始化建立煙花div設置類名和顏色，添加到contenter
this.init = function() {

this.fire.className = "fire";
this.fire.style.background = this.randomColor();
$(".container").appendChild(this.fire);
//控制div的座標在鼠標的最下方，
this.fire.style.left = this.target.left + "px";

}

//煙花的移動方法
this.move = function() {

var _this = this;

animate(this.fire, { left: this.target.left, top: this.target.top }, function() {

//運動結束之後移除div
_this.obj.removeChild(_this.fire);
//調用爆炸方法，處理爆炸效果
_this.boom();

})

}

//爆炸效果
this.boom = function() {
console.log('爆炸')

//在目標位置擅長隨機擅長20之內的div，並讓他運動隨機位置，擅長爆炸效果
for(let i = 0; i < Math.round(Math.random() * 10 + 10); i++) {

console.log(1);

var _this = this;

//在目標位置建立一個div
let fire = document.createElement("div");
fire.className = "fire";
fire.style.left = this.target.left + "px";
fire.style.top = this.target.top + "px";
fire.style.borderRadius = "50%";
this.obj.appendChild(fire);
fire.style.background = this.randomColor();

var target = {};
//在contenter內產生隨機座標，讓fire 運動該位置
target.left = Math.round(Math.random() * (this.obj.offsetWidth - 10));
target.top = Math.round(Math.random() * (this.obj.offsetHeight - 10));
animate(fire, target, function() {
//運動結束後移除
_this.obj.removeChild(fire);

});

}

this.randomColor = function() {

var r = Math.round(Math.random() * 255);
var g = Math.round(Math.random() * 255);
var b = Math.round(Math.random() * 255);

return "rgb(" + r + "," + g + "," + b + ")";

}

this.getStyle = function(obj, attr) {
//獲取當前元素定位;

return {
left: getComputedStyle(obj)[attr],
top: getComputedStyle(obj)[attr]
}

}
//移動開始；
this.init();
this.move();

};

function $(select) {

return document.querySelector(select);
}
</script>
</head>