雷迪森安的乡亲们,欢迎来到老实人的前端课堂,上次写了一个新春小盲盒,这大过年的,我把烟花都给你们准备好了,今天我们来写个小烟花吧。

正片
注意看有两种模式哦,可以自由切换,鼠标点哪里哪里有烟花,还可以自动放烟花

结构就两行
样式
以下样式大部分是js代码渲染上dom后表现出来的
表现
关键代码,满满注释哦,这我可够意思了哈,不懂的话再私下问我吧。
var fgm = {
on: function (element, type, handler) {
return element.addEventListener ? element.addEventListener(type, handler, false) : element.attachEvent("on" + type, handler)
},
un: function (element, type, handler) {
return element.removeEventListener ? element.removeEventListener(type, handler, false) : element.detachEvent("on" + type, handler)
},
bind: function (object, handler) {
return function () {
return handler.apply(object, arguments)
}
},
randomRange: function (lower, upper) {
return Math.floor(Math.random() * (upper - lower + 1) + lower)
},
getRanColor: function () {
var str = this.randomRange(0, 0xFFFFFF).toString(16);
while (str.length < 6) str = "0" + str;
return "#" + str
}
};
function FireWorks() {
this.type = 0;
this.timer = null;
this.fnManual = fgm.bind(this, this.manual)
}
FireWorks.prototype = {
initialize: function () {
clearTimeout(this.timer);
fgm.un(document, "click", this.fnManual);
switch (this.type) {
case 1:
fgm.on(document, "click", this.fnManual);
break;
case 2:
this.auto();
break;
};
},
manual: function (event) {
event = event || window.event;
this.__create__({
x: event.clientX,
y: event.clientY
});
},
auto: function () {
var that = this;
that.timer = setTimeout(function () {
that.__create__({
x: fgm.randomRange(50, document.documentElement.clientWidth - 50),
y: fgm.randomRange(50, document.documentElement.clientHeight - 150)
})
that.auto();
}, fgm.randomRange(900, 1100))
},
__create__: function (param) {
var that = this;
var oEntity = null;
var oChip = null;
var aChip = [];
var timer = null;
var oFrag = document.createDocumentFragment();
oEntity = document.createElement("div");
with (oEntity.style) {
position = "absolute";
top = document.documentElement.clientHeight + "px";
left = param.x + "px";
width = "4px";
height = "30px";
borderRadius = "4px";
background = fgm.getRanColor();
};
document.body.appendChild(oEntity);
oEntity.timer = setInterval(function () {
oEntity.style.top = oEntity.offsetTop - 20 + "px";
if (oEntity.offsetTop <= param.y) {
clearInterval(oEntity.timer);
document.body.removeChild(oEntity);
(function () {
var len = (/msie/i.test(navigator.userAgent) || that.type == 2) ? fgm.randomRange(20, 30) : fgm.randomRange(50, 100)
for (i = 0; i < len; i++) {
oChip = document.createElement("div");
with (oChip.style) {
position = "absolute";
top = param.y + "px";
left = param.x + "px";
width = "4px";
height = "4px";
overflow = "hidden";
borderRadius = "4px";
background = fgm.getRanColor();
};
oChip.speedX = fgm.randomRange(-20, 20);
oChip.speedY = fgm.randomRange(-20, 20);
oFrag.appendChild(oChip);
aChip[i] = oChip
};
document.body.appendChild(oFrag);
timer = setInterval(function () {
for (i = 0; i < aChip.length; i++) {
var obj = aChip[i];
with (obj.style) {
top = obj.offsetTop + obj.speedY + "px";
left = obj.offsetLeft + obj.speedX + "px";
};
obj.speedY++;
(obj.offsetTop < 0 || obj.offsetLeft < 0 || obj.offsetTop > document.documentElement.clientHeight || obj.offsetLeft > document.documentElement.clientWidth) && (document.body.removeChild(obj), aChip.splice(i, 1))
};
!aChip[0] && clearInterval(timer);
}, 30)
})()
}
}, 30)
}
};
fgm.on(window, "load", function () {
var oTips = document.getElementById("tips");
var aBtn = oTips.getElementsByTagName("a");
var oFireWorks = new FireWorks();
fgm.on(oTips, "click", function (event) {
var oEvent = event || window.event;
var oTarget = oEvent.target || oEvent.srcElement;
var i = 0;
if (oTarget.tagName.toUpperCase() == "A") {
for (i = 0; i < aBtn.length; i++) aBtn[i].className = "";
switch (oTarget.id) {
case "manual":
oFireWorks.type = 1;
break;
case "auto":
oFireWorks.type = 2;
break;
case "stop":
oFireWorks.type = 0;
break;
}
oFireWorks.initialize();
oTarget.className = "active";
oEvent.stopPropagation ? oEvent.stopPropagation() : oEvent.cancelBubble = true
}
});
});
fgm.on(document, "contextmenu", function (event) {
var oEvent = event || window.event;
oEvent.preventDefault ? oEvent.preventDefault() : oEvent.returnValue = false
});
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
- 149.
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160.
- 161.
- 162.
- 163.
- 164.
- 165.
- 166.
- 167.
- 168.
- 169.
不学没思路,看完是不是感觉也不难啊?你做出来了吗?
最后
博主为人老实,无偿解答问题,也会录制一些学习视频教同学们知识❤
如果对您有帮助,希望能给个👍/评论/收藏
您的三连~是对我创作最大的动力支持
外行人问一句,这个用什么软件开发啊?
vscode