Shulou(Shulou.com)06/01 Report--

Based on Html+CSS+JS how to achieve manual fireworks effect, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

Effect display

Note that there are two modes, oh, you can switch freely, where there are fireworks with the mouse click, and you can set off fireworks automatically.

Video demonstration: html+css to write a fireworks, please take away the source code directly!

Implement code Html to set off fireworks manually and automatically Css

Most of the following styles are rendered by js code on 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.02px;} # 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 00;} # 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;} JavaScript 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 return Math.floor (Math.random () * (upper-lower + 1) + lower)} in the range of lower~upper GetRanColor: function () {/ / randomly get the hexadecimal color 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 document.documentElement.clientHeight || obj.offsetLeft >

Document.documentElement.clientWidth) & & (document.body.removeChild (obj), aChip.splice (I, 1))}; / / determine whether the fireworks explosion particles are all remove, if clearInterval (timer) is true;! 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; iTunes +) a BTN [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"; / / prevent 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})

The key code is full of comments. This is good enough for me. Ask me in private if you don't understand.

To make a statement. 3. External style, in which the link style is the most frequently used and the most practical style, only need to add

Just do it. The second is to import styles, import styles and link styles are similar, using @ import style to import CSS stylesheets, not recommended.

To make a statement. 3. External style, in which the link style is the most frequently used and the most practical style, only need to add

Just do it. The second is to import styles, import styles and link styles are similar, using @ import style to import CSS stylesheets, not recommended. What is the full name of css? the full name of css is Cascading Style Sheets (cascading style sheets), a computer language used to express file styles such as HTML or XML. CSS can not only modify the web page statically, but also format the elements of the web page dynamically with various scripting languages.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.