马上春节，快来跟我学习做烟花，包教包会（html+css+js），蚂蚁金服前端架构面试题

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;

}

表现

---

关键代码，满满注释哦，这我可够意思了哈，不懂的话再私下问我吧。

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) { //产生范围在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) {

//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);

//window.setInterval方法 该方法使得一个函数每隔固定时间被调用一次

// console.log(param.y);

oEntity.timer = setInterval(function () {

// console.log(oEntity.offsetTop);

// console.log(oEntity.style.top);

oEntity.style.top = oEntity.offsetTop - 20 + “px”;

//判断烟花是否上升到或者第一次超过上次鼠标点击位置

if (oEntity.offsetTop <= param.y) {

//烟花爆炸

clearInterval(oEntity.timer);

document.body.removeChild(oEntity);

(function () {

//在50-100之间随机生成碎片

//由于IE浏览器处理效率低, 随机范围缩小至20-30

//自动放烟花时, 随机范围缩小至20-30

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++;

//判断烟花爆炸颗粒是否掉落至窗体之外，为真则remove

//splice() 方法可删除从 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))

};

//判断烟花爆炸颗粒是否全部remove，为真则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;

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

Event = 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;

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

[外链图片转存中…(img-D66IUUVW-1727198861922)]