- PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest
Radissian folks, welcome to honest front class, last time I wrote a little blind box for the New Year, this big New Year’s day, I have fireworks ready for you, today we will write a small fireworks.
positive
Note that there are two modes oh, you can freely switch, mouse click where there are fireworks, can also automatically set off fireworks
The structure is just two lines
<div id="tips">
<a id="manual" href="javascript:;">Manual fireworks</a>
<a id="auto" href="javascript:;">Automatic fireworks</a>
</div>
Copy the codestyle
Most of the following styles are rendered on the DOM by JS code
html.body {
overflow: hidden;
}
body.div.p {
margin: 0;
padding: 0;
}
body {
background: # 000;
font: 12px/1.5 arial;
color: #7A7A7A;
}
a {
text-decoration: none;
outline: none;
}
#tips.#copyright {
position: absolute;
width: 100%;
height: 50px;
text-align: center;
background: # 171717;
border: 2px solid # 484848;
}
#tips {
top: 0;
border-width: 0 0 2px;
}
#tips a {
font: 14px/30px arial;
color: #FFF;
background: #F06;
display: inline-block;
margin: 10px 5px 0;
padding: 0 15px;
border-radius: 15px;
}
#tips a.active {
background: #FE0000;
}
#copyright {
bottom: 0;
line-height: 50px;
border-width: 2px 0 0;
}
#copyright a {
color: #FFF;
background: #7A7A7A;
padding: 2px 5px;
border-radius: 10px;
}
#copyright a:hover {
background: #F90;
}
p {
position: absolute;
top: 55px;
width: 100%;
text-align: center;
}
Copy the codeperformance
Key code, full of comments oh, this I can mean ha, do not understand the words of the private ask me.
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) { // Generate random numbers ranging from lower to upper
return Math.floor(Math.random() * (upper - lower + 1) + lower)
},
getRanColor: function () { // Get a random hexadecimal color
var str = this.randomRange(0.0xFFFFFF).toString(16);
while (str.length < 6) str = "0" + str;
return "#" + str
}
};
// Initialize the object
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) {
// Param stands for mouse click point (i.e. fireworks explosion point)
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) { // Fireworks rise entity initialization
position = "absolute";
// The initial position from the top of the page is: the height of the entire page (at the bottom of the page)
top = document.documentElement.clientHeight + "px";
left = param.x + "px";
width = "4px";
height = "30px";
borderRadius = "4px";
background = fgm.getRanColor();
};
document.body.appendChild(oEntity);
//window.setInterval method This method causes a function to be called at fixed intervals
// console.log(param.y);
oEntity.timer = setInterval(function () {
// console.log(oEntity.offsetTop);
// console.log(oEntity.style.top);
oEntity.style.top = oEntity.offsetTop - 20 + "px";
// Determine whether the firework has risen to or exceeded the last mouse click for the first time
if (oEntity.offsetTop <= param.y) {
// Fireworks explode
clearInterval(oEntity.timer);
document.body.removeChild(oEntity);
(function () {
// Randomly generate shards between 50 and 100
// Due to the low processing efficiency of Internet Explorer, the random range is reduced to 20-30
// Automatic fireworks, the random range is reduced to 20-30
var len = (/msie/i.test(navigator.userAgent) || that.type == 2)? fgm.randomRange(20.30) : fgm.randomRange(50.100)
// Generates all firework explosion particle entities
for (i = 0; i < len; i++) {
// Fireworks particles form entities
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++;
// Check whether fireworks explosion particles fall outside the window, if true, remove
// The splice() method removes zero or more elements starting at index
(obj.offsetTop < 0 || obj.offsetLeft < 0 || obj.offsetTop > document.documentElement.clientHeight || obj.offsetLeft > document.documentElement.clientWidth) && (document.body.removeChild(obj), aChip.splice(i, 1))};// Check whether all fireworks explosion particles are removed. If true, clearInterval(timer);! 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";
// Prevents the browser's default event bubbling behavior
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
});
Copy the codeDo not learn to have no train of thought, is it not difficult to feel over? Have you done it yet?
The last
The blogger is honest, answers questions for free, and also makes some learning videos to teach students
If helpful to you, I hope you can give 👍/ comments/favorites
Your three lines ~ are the biggest motivation to support my creation