2024年最新马上春节，快来跟我学习做烟花，包教包会（html+css+js，2024年最新字节跳动视频面试难吗

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

正片

---

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

视频演示：html+css写一个烟花，源码请你直接拿走！

结构就两行

---

手动放烟花

自动放烟花

样式

---

以下样式大部分是js代码渲染上dom后表现出来的

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;

}

表现

---

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

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

//初始位置距网页顶部为：整个网页的高度（处于网页底部）

分享

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

style) { //烟花上升过程实体初始化

position = “absolute”;

//初始位置距网页顶部为：整个网页的高度（处于网页底部）

分享

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】