结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
注意看有两种模式哦,可以自由切换,鼠标点哪里哪里有烟花,还可以自动放烟花
以下样式大部分是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”;
//初始位置距网页顶部为:整个网页的高度(处于网页底部)
分享
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】