JQuery和html+css實作滑鼠點擊放煙火-js教程-PHP中文網

4 HTML5煙火燃放特效程式碼</ title> 5 6 <"/><meta property="og:local" content="zh-tw"> <meta property="og:title" content="JQuery和html+css實作滑鼠點擊放煙火-js教程-PHP中文網"> <meta property="og:description" content="1 <!DOCTYPE html> 2 <html> 3 <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <title>HTML5煙火燃放特效程式碼</ title> 5 6 <"> <meta property="og:url" content="https://m.php.cn/zh-tw/faq/369620.html"> <meta property="og:image" content="https://m.php.cn/static/images/logo.png"> <meta property="og:site_name" content="php.cn"> <meta property="og:type" content="website"> <link rel="canonical" href="https://www.php.cn/zh-tw/faq/369620.html"/> <link rel="alternate" hrefLang="zh-cn" href="https://m.php.cn/zh/faq/369620.html" /> <link rel="alternate" hrefLang="en" href="https://m.php.cn/faq/369620.html" /> <link rel="alternate" hrefLang="zh-tw" href="https://m.php.cn/zh-tw/faq/369620.html" /> <link rel="alternate" hrefLang="ja" href="https://m.php.cn/ja/faq/369620.html" /> <link rel="alternate" hrefLang="ko" href="https://m.php.cn/ko/faq/369620.html" /> <link rel="alternate" hrefLang="ms" href="https://m.php.cn/ms/faq/369620.html" /> <link rel="alternate" hrefLang="fr" href="https://m.php.cn/fr/faq/369620.html" /> <link rel="alternate" hrefLang="de" href="https://m.php.cn/de/faq/369620.html" /> <meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=1" /><meta name="applicable-device" content="mobile" /><link rel="stylesheet" href="/static/css/style.css?4.5.31"><link href="/static/front/mobcss/newphpcommon.css?1.1" type="text/css" rel="stylesheet"/><link href="/static/front/mobcss/swiper.min.css" type="text/css" rel="stylesheet"/><link href="/static/front/mobcss/newphp.css?1.2" type="text/css" rel="stylesheet"/><link href="/static/css/global.css" type="text/css" rel="stylesheet"/><link href="/static/layui/css/layui.css" type="text/css" rel="stylesheet"/><link href="/static/mobcss/mobindex3.css" type="text/css" rel="stylesheet"/><script src="/static/front/mobjs/jquery-1.6.1.min.js"></script><script src="/static/front/mobjs/swiper.min.js"></script><script src="/static/front/mobjs/newphpcommon.js"></script><link rel="canonical" href="https://www.php.cn/zh-tw/faq/369620.html"/> <link rel="alternate" hrefLang="zh-cn" href="https://m.php.cn/zh/faq/369620.html" /> <link rel="alternate" hrefLang="en" href="https://m.php.cn/faq/369620.html" /> <link rel="alternate" hrefLang="zh-tw" href="https://m.php.cn/zh-tw/faq/369620.html" /> <link rel="alternate" hrefLang="ja" href="https://m.php.cn/ja/faq/369620.html" /> <link rel="alternate" hrefLang="ko" href="https://m.php.cn/ko/faq/369620.html" /> <link rel="alternate" hrefLang="ms" href="https://m.php.cn/ms/faq/369620.html" /> <link rel="alternate" hrefLang="fr" href="https://m.php.cn/fr/faq/369620.html" /> <link rel="alternate" hrefLang="de" href="https://m.php.cn/de/faq/369620.html" /> <script> var canshu = { SeeMore:'看更多', FoldUp:'折起來', Choice:'語言', wait:'正在加載，請稍候~', LoginFirst:"請先登入", needKeyword:'輸入關鍵字搜尋', emailPhoneError:'請輸入正確的電話或電子郵件地址', missPwd:'請輸入密碼', emailError:'請輸入您正確的電子郵件地址', VerCode:"請輸入驗證碼", getCode:'傳送', pwdError:'密碼格式不正確', TwoPassNotMatch:'兩個密碼不匹配', Bindemail:'綁定信箱', resetpassword:'重新設密碼', ConfirmPass:'確認密碼', pwdCheck:'請輸入6-18個字母或數字', Editinfor: '編輯個人資訊', trimContent:'請輸入內容', titleCheck:'標題長度應至少為 5 個字', choiceLang:'請選擇語言分類', Secondreply:'回覆', NetWorkError:'網路錯誤，請稍後重試！', keywordSearch:'輸入關鍵字搜尋', all_lang_string:'zh|en|zh-tw|ja|ko|ms|fr|de', Next:'下一頁', Previous:'上一頁' }; </script><script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl; f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-WWVXRJPW'); </script><script async src="https://www.googletagmanager.com/gtag/js?id=G-H42EVCYBJC"></script><script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-H42EVCYBJC'); </script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5902227090019525" crossorigin="anonymous"></script><script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"WebSite","url":"https:\/\/m.php.cn\/zh-tw\/","potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/m.php.cn\/zh-tw\/search?word={search_term_string}"},"query-input":"required name=search_term_string"}}</script><meta property="article:author" content="PHP中文网" /><meta property="article:published_first" content=",https://www.php.cn/faq/369620.html" /><link rel="stylesheet" href="/static/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css?1"><link rel="stylesheet" href="/static/ueditor/third-party/SyntaxHighlighter/shCoreDefault1.css"><link href="/static/mobcss/newphp.css" type="text/css" rel="stylesheet"/><script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js"></script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script><script> var xnb_name = 'Virtual currency'; </script><script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","headline":"JQuery和html+css實作滑鼠點擊放煙火","description":"1 <!DOCTYPE html> 2 <html> 3 <head><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\"> 4 <title>HTML5煙火燃放特效程式碼<\/ title> 5 6 <","datePublished":"2017-06-20T09:36:00+8:00","author":{"url":"https:\/\/m.php.cn\/zh-tw\/member\/1.html","name":"PHP中文网"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/m.php.cn\/zh-tw\/faq\/369620.html"},"url":"https:\/\/m.php.cn\/zh-tw\/faq\/369620.html","articleBody":"<div class=\"cnblogs_code\">\n<pre> 1<\/span> \n 2<\/span> \n 3<\/span> <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\n 4<\/span> <title>HTML5烟花燃放特效代码<\/title>\n 5<\/span> \n 6<\/span> <style>\n 7 html,body{height:100%;margin:0;padding:0}\n 8 ul,li{text-indent:0;text-decoration:none;margin:0;padding:0}\n 9 img{border:0}\n 10 body{background-color:#000;color:#999;font:100%\/18px helvetica, arial, sans-serif}\n 11 canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}\n 12 *{\n 13 margin: 0px;\n 14 padding: 0px;\n 15 }\n 16 #bg_Img{\n 17 width: 1920px;\n 18 height: 1500px;\n 19 border: 1px solid transparent;\n 20 background: url(\"start.gif\") repeat;\n 21 text-align: center;\n 22 }\n 23 ul{\n 24 width: 5555px;\n 25 height: 200px;\n 26 }\n 27 li{\n 28 font: 120px\/190px \"楷体\";\n 29 color: white;\n 30 text-shadow: 5px 10px 10px 10px;\n 31 list-style: none;\n 32 float: left;\n 33 display: none;\n 34 }\n 35 #text_bd{\n 36 width: 600px;\n 37 height: 200px;\n 38 border: 5px solid transparent;\n 39 margin-left: 200px;\n 40 }\n 41 #mouse_click{\n 42 margin: 0px auto;\n 43 text-align: center;\n 44 color: white;\n 45 }\n 46 <\/style>\n 47<\/span> \n 48<\/span> \n 49<\/span> \n 50<\/span> <div id=\"bg_Img\">\n 51<\/span> <div id=\"text_bd\">\n 52<\/span> <ul>\n 53<\/span> <li>O(∩_∩)O~~<\/li>\n 54<\/span> <li>同<\/li>\n 55<\/span> <li>学<\/li>\n 56<\/span> <li>们<\/li>\n 57<\/span> <li>节<\/li>\n 58<\/span> <li>日<\/li>\n 59<\/span> <li>快<\/li>\n 60<\/span> <li>乐<\/li>\n 61<\/span> <li>~~<\/li>\n 62<\/span> <\/ul>\n 63<\/span> <\/div>\n 64<\/span> <div id=\"mouse_click\">鼠标点击释放烟花效果<\/div>\n 65<\/span> <\/div>\n 66<\/span> <script type=\"text\/javascript\" src=\"jquery-3.1.1.js\"><\/script>\n 67<\/span> <script type=\"text\/javascript\">\n 68 var aLi=document.querySelectorAll(\"li\");\n 69 setInterval(a,1000);\n 70 setInterval(b,2000);\n 71 setInterval(c,3000);\n 72 setInterval(d,4000);\n 73 setInterval(e,5000);\n 74 setInterval(f,6000);\n 75 setInterval(g,7000);\n 76 setInterval(h,8000);\n 77 function a() {\n 78 aLi[0].style.display = \"block\"\n 79 }\n 80 function b() {\n 81 aLi[1].style.display = \"block\"\n 82 }\n 83 function c() {\n 84 aLi[2].style.display = \"block\"\n 85 }\n 86 function d() {\n 87 aLi[3].style.display = \"block\"\n 88 }\n 89 function e() {\n 90 aLi[4].style.display = \"block\"\n 91 }\n 92 function f() {\n 93 aLi[5].style.display = \"block\"\n 94 }\n 95 function g() {\n 96 aLi[6].style.display = \"block\"\n 97 }\n 98 function h() {\n 99 aLi[7].style.display = \"block\"\n100 }\n101 $(function(){\n102 var Fireworks = function(){\n103 var self = this;\n104 var rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);}\n105 var hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);};\n106 window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1E3\/60)}}();\n107 \n108 self.init = function(){\n109 self.canvas = document.createElement('canvas');\n110 self.canvas.width = self.cw = $(window).innerWidth();\n111 self.canvas.height = self.ch = $(window).innerHeight();\n112 self.particles = [];\n113 self.partCount = 150;\n114 self.fireworks = [];\n115 self.mx = self.cw\/2;\n116 self.my = self.ch\/2;\n117 self.currentHue = 30;\n118 self.partSpeed = 5;\n119 self.partSpeedVariance = 10;\n120 self.partWind = 50;\n121 self.partFriction = 5;\n122 self.partGravity = 1;\n123 self.hueMin = 0;\n124 self.hueMax = 360;\n125 self.fworkSpeed = 4;\n126 self.fworkAccel = 10;\n127 self.hueVariance = 30;\n128 self.flickerDensity = 25;\n129 self.showShockwave = true;\n130 self.showTarget = false;\n131 self.clearAlpha = 25;\n132 \n133 $(document.body).append(self.canvas);\n134 self.ctx = self.canvas.getContext('2d');\n135 self.ctx.lineCap = 'round';\n136 self.ctx.lineJoin = 'round';\n137 self.lineWidth = 1;\n138 self.bindEvents();\n139 self.canvasLoop();\n140 \n141 self.canvas.onselectstart = function() {\n142 return false;\n143 };\n144 };\n145 \n146 self.createParticles = function(x,y, hue){\n147 var countdown = self.partCount;\n148 while(countdown--){\n149 var newParticle = {\n150 x: x,\n151 y: y,\n152 coordLast: [\n153 {x: x, y: y},\n154 {x: x, y: y},\n155 {x: x, y: y}\n156 ],\n157 angle: rand(0, 360),\n158 speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance)),\n159 friction: 1 - self.partFriction\/100,\n160 gravity: self.partGravity\/2,\n161 hue: rand(hue-self.hueVariance, hue+self.hueVariance),\n162 brightness: rand(50, 80),\n163 alpha: rand(40,100)\/100,\n164 decay: rand(10, 50)\/1000,\n165 wind: (rand(0, self.partWind) - (self.partWind\/2))\/25,\n166 lineWidth: self.lineWidth\n167 };\n168 self.particles.push(newParticle);\n169 }\n170 };\n171 \n172 \n173 self.updateParticles = function(){\n174 var i = self.particles.length;\n175 while(i--){\n176 var p = self.particles[i];\n177 var radians = p.angle * Math.PI \/ 180;\n178 var vx = Math.cos(radians) * p.speed;\n179 var vy = Math.sin(radians) * p.speed;\n180 p.speed *= p.friction;\n181 \n182 p.coordLast[2].x = p.coordLast[1].x;\n183 p.coordLast[2].y = p.coordLast[1].y;\n184 p.coordLast[1].x = p.coordLast[0].x;\n185 p.coordLast[1].y = p.coordLast[0].y;\n186 p.coordLast[0].x = p.x;\n187 p.coordLast[0].y = p.y;\n188 \n189 p.x += vx;\n190 p.y += vy;\n191 p.y += p.gravity;\n192 \n193 p.angle += p.wind;\n194 p.alpha -= p.decay;\n195 \n196 if(!hitTest(0,0,self.cw,self.ch,p.x-p.radius, p.y-p.radius, p.radius*2, p.radius*2) || p.alpha < .05){\n197 self.particles.splice(i, 1);\n198 }\n199 };\n200 };\n201 \n202 self.drawParticles = function(){\n203 var i = self.particles.length;\n204 while(i--){\n205 var p = self.particles[i];\n206 \n207 var coordRand = (rand(1,3)-1);\n208 self.ctx.beginPath();\n209 self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y));\n210 self.ctx.lineTo(Math.round(p.x), Math.round(p.y));\n211 self.ctx.closePath();\n212 self.ctx.strokeStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')';\n213 self.ctx.stroke();\n214 \n215 if(self.flickerDensity > 0){\n216 var inverseDensity = 50 - self.flickerDensity;\n217 if(rand(0, inverseDensity) === inverseDensity){\n218 self.ctx.beginPath();\n219 self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth,p.lineWidth+3)\/2, 0, Math.PI*2, false)\n220 self.ctx.closePath();\n221 var randAlpha = rand(50,100)\/100;\n222 self.ctx.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+randAlpha+')';\n223 self.ctx.fill();\n224 }\n225 }\n226 };\n227 };\n228 \n229 \n230 self.createFireworks = function(startX, startY, targetX, targetY){\n231 var newFirework = {\n232 x: startX,\n233 y: startY,\n234 startX: startX,\n235 startY: startY,\n236 hitX: false,\n237 hitY: false,\n238 coordLast: [\n239 {x: startX, y: startY},\n240 {x: startX, y: startY},\n241 {x: startX, y: startY}\n242 ],\n243 targetX: targetX,\n244 targetY: targetY,\n245 speed: self.fworkSpeed,\n246 angle: Math.atan2(targetY - startY, targetX - startX),\n247 shockwaveAngle: Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI\/180)),\n248 acceleration: self.fworkAccel\/100,\n249 hue: self.currentHue,\n250 brightness: rand(50, 80),\n251 alpha: rand(50,100)\/100,\n252 lineWidth: self.lineWidth\n253 };\n254 self.fireworks.push(newFirework);\n255 \n256 };\n257 \n258 \n259 self.updateFireworks = function(){\n260 var i = self.fireworks.length;\n261 \n262 while(i--){\n263 var f = self.fireworks[i];\n264 self.ctx.lineWidth = f.lineWidth;\n265 \n266 vx = Math.cos(f.angle) * f.speed,\n267 vy = Math.sin(f.angle) * f.speed;\n268 f.speed *= 1 + f.acceleration;\n269 f.coordLast[2].x = f.coordLast[1].x;\n270 f.coordLast[2].y = f.coordLast[1].y;\n271 f.coordLast[1].x = f.coordLast[0].x;\n272 f.coordLast[1].y = f.coordLast[0].y;\n273 f.coordLast[0].x = f.x;\n274 f.coordLast[0].y = f.y;\n275 \n276 if(f.startX >= f.targetX){\n277 if(f.x + vx <= f.targetX){\n278 f.x = f.targetX;\n279 f.hitX = true;\n280 } else {\n281 f.x += vx;\n282 }\n283 } else {\n284 if(f.x + vx >= f.targetX){\n285 f.x = f.targetX;\n286 f.hitX = true;\n287 } else {\n288 f.x += vx;\n289 }\n290 }\n291 \n292 if(f.startY >= f.targetY){\n293 if(f.y + vy <= f.targetY){\n294 f.y = f.targetY;\n295 f.hitY = true;\n296 } else {\n297 f.y += vy;\n298 }\n299 } else {\n300 if(f.y + vy >= f.targetY){\n301 f.y = f.targetY;\n302 f.hitY = true;\n303 } else {\n304 f.y += vy;\n305 }\n306 }\n307 \n308 if(f.hitX && f.hitY){\n309 self.createParticles(f.targetX, f.targetY, f.hue);\n310 self.fireworks.splice(i, 1);\n311 \n312 }\n313 };\n314 };\n315 \n316 self.drawFireworks = function(){\n317 var i = self.fireworks.length;\n318 self.ctx.globalCompositeOperation = 'lighter';\n319 while(i--){\n320 var f = self.fireworks[i];\n321 self.ctx.lineWidth = f.lineWidth;\n322 \n323 var coordRand = (rand(1,3)-1);\n324 self.ctx.beginPath();\n325 self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));\n326 self.ctx.lineTo(Math.round(f.x), Math.round(f.y));\n327 self.ctx.closePath();\n328 self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+f.alpha+')';\n329 self.ctx.stroke();\n330 \n331 if(self.showTarget){\n332 self.ctx.save();\n333 self.ctx.beginPath();\n334 self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, false)\n335 self.ctx.closePath();\n336 self.ctx.lineWidth = 1;\n337 self.ctx.stroke();\n338 self.ctx.restore();\n339 }\n340 \n341 if(self.showShockwave){\n342 self.ctx.save();\n343 self.ctx.translate(Math.round(f.x), Math.round(f.y));\n344 self.ctx.rotate(f.shockwaveAngle);\n345 self.ctx.beginPath();\n346 self.ctx.arc(0, 0, 1*(f.speed\/5), 0, Math.PI, true);\n347 self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+rand(25, 60)\/100+')';\n348 self.ctx.lineWidth = f.lineWidth;\n349 self.ctx.stroke();\n350 self.ctx.restore();\n351 }\n352 };\n353 };\n354 \n355 self.bindEvents = function(){\n356 $(window).on('resize', function(){\n357 clearTimeout(self.timeout);\n358 self.timeout = setTimeout(function() {\n359 self.canvas.width = self.cw = $(window).innerWidth();\n360 self.canvas.height = self.ch = $(window).innerHeight();\n361 self.ctx.lineCap = 'round';\n362 self.ctx.lineJoin = 'round';\n363 }, 100);\n364 });\n365 \n366 $(self.canvas).on('mousedown', function(e){\n367 self.mx = e.pageX - self.canvas.offsetLeft;\n368 self.my = e.pageY - self.canvas.offsetTop;\n369 self.currentHue = rand(self.hueMin, self.hueMax);\n370 self.createFireworks(self.cw\/2, self.ch, self.mx, self.my);\n371 \n372 $(self.canvas).on('mousemove.fireworks', function(e){\n373 self.mx = e.pageX - self.canvas.offsetLeft;\n374 self.my = e.pageY - self.canvas.offsetTop;\n375 self.currentHue = rand(self.hueMin, self.hueMax);\n376 self.createFireworks(self.cw\/2, self.ch, self.mx, self.my);\n377 });\n378 });\n379 \n380 $(self.canvas).on('mouseup', function(e){\n381 $(self.canvas).off('mousemove.fireworks');\n382 });\n383 \n384 }\n385 \n386 self.clear = function(){\n387 self.particles = [];\n388 self.fireworks = [];\n389 self.ctx.clearRect(0, 0, self.cw, self.ch);\n390 };\n391 \n392 \n393 self.canvasLoop = function(){\n394 requestAnimFrame(self.canvasLoop, self.canvas);\n395 self.ctx.globalCompositeOperation = 'destination-out';\n396 self.ctx.fillStyle = 'rgba(0,0,0,'+self.clearAlpha\/100+')';\n397 self.ctx.fillRect(0,0,self.cw,self.ch);\n398 self.updateFireworks();\n399 self.updateParticles();\n400 self.drawFireworks();\n401 self.drawParticles();\n402 \n403 };\n404 \n405 self.init();\n406 \n407 }\n408 var fworks = new Fireworks();\n409 \n410 });\n411 \n412 <\/script>\n413<\/span> \n414<\/span> \n415<\/span> <\/pre>\n<\/div>\n廣大網友們!因為這是放假的時候老師給發的!所以我也看不太懂有些東西!實在是抱歉有什麼不明白的,就留言告訴我!我去找我曾經的老師問問,雖然他已經退休好久了!!<\/p>"}</script><script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https:\/\/m.php.cn\/zh-tw\/","name":"首頁"}},{"@type":"ListItem","position":2,"item":{"@id":"https:\/\/m.php.cn\/zh-tw\/web-designer.html","name":"web前端"}},{"@type":"ListItem","position":3,"item":{"@id":"https:\/\/m.php.cn\/zh-tw\/js-tutorial.html","name":"js教程"}},{"@type":"ListItem","position":4,"item":{"@id":"https:\/\/m.php.cn\/zh-tw\/faq\/369620.html","name":"JQuery和html+css實作滑鼠點擊放煙火"}}]}</script></head><body><div class="bodyBg"><link rel="stylesheet" type="text/css" href="/static/csshwm/m_stylehw.css"><header><div class="head"><div class="haed_left"><div class="haed_logo"><a href="https://m.php.cn/zh-tw/" title="PHP中文網" class="haed_logo_a"><img src="/static/imghwm/logo.png" alt="PHP中文網" class="haed_logoimg"></a></div></div><div class="search_div search_div_top2"><input id="key_words" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="" onkeydown="if (event.keyCode == 13) searchs('zh-tw')"/><a onclick="searchs('zh-tw')" href="javascript:;" title="搜尋"><img onerror="this.onerror=''; this.src='static/imghwm/default1.png'" src="/static/imghwm/find.png" alt="搜尋"></a></div><div class="head_right"><button type="button" class="layui-btn layui-btn-primary headerlan headlanmax lan1" id="lan1sp" lay-on="test-offset-r"><img src="/static/imghwm/m_menu.png" alt=""></button><div id="m_menu" class="m_menu" style="display: none;"><div class="m_editormain12main_top"><img src="/static/imghwm/logo.png" alt="logo"><a href="javascript:;" class="m_editormain12main_topi" id="m_editormain12main_topi_sp"></a></div><div class="layui-panel m_menu_main"><ul class="layui-menu" id="demo-menu"><li class="layui-menu-item-group layui-menu-item-up m_menus" lay-options="{type: 'group'}"><div class="layui-menu-body-title m_menus_title">社群</div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/zh-tw/article.html" title="文章">文章</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/zh-tw/faq/zt" title="合集">合集</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/zh-tw/wenda.html" title="問答">問答</a></div></li></ul></li><li class="layui-menu-item-divider"></li><li class="layui-menu-item-group layui-menu-item-up m_menus" lay-options="{type: 'group'}"><div class="layui-menu-body-title m_menus_title">學習</div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/zh-tw/course.html" title="課程">課程</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/zh-tw/dic/29.html" title="程式設計字典">程式設計字典</a></div></li></ul></li><li class="layui-menu-item-divider"></li><li class="layui-menu-item-group layui-menu-item-up m_menus" lay-options="{type: 'group'}"><div class="layui-menu-body-title m_menus_title">工具庫</div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/zh-tw/toolset/development-tools" title="開發工具">開發工具</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/zh-tw/toolset/website-source-code" title="網站源碼">網站源碼</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/zh-tw/toolset/php-libraries" title="PHP 函式庫">PHP 函式庫</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/zh-tw/toolset/js-special-effects" title="JS特效">JS特效</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/zh-tw/toolset/website-materials" title="網站素材">網站素材</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/zh-tw/toolset/extension-plug-ins" title="擴充插件">擴充插件</a></div></li></ul></li><li class="layui-menu-item-divider"></li><li lay-options="{id: 100}"><div class="layui-menu-body-title m_menus_oth"><a href="https://m.php.cn/zh-tw/ai" title="AI工具">AI工具</a></div></li><li class="layui-menu-item-divider"></li><li class="layui-menu-item-group layui-menu-item-up m_menus" lay-options="{type: 'group'}"><div class="layui-menu-body-title m_menus_title">休閒</div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/zh-tw/game" title="遊戲下載">遊戲下載</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/zh-tw/mobile-game-tutorial/" title="遊戲教程">遊戲教程</a></div></li></ul></li><li class="layui-menu-item-divider"></li></ul></div><div class="m_menu_button m_menu_button_login"><a href="https://m.php.cn/zh-tw/login" title="Login">Log in</a></div><div class="m_menu_button m_menu_button_lang"><button type="button" class="layui-btn layui-btn-primary headerlan headlanmax lan1" id="lan1" lay-on="page2">繁体中文</button></div></div><div class="m_menu_lang" id="m_menu_lang" style="display: none;"><div class="m_editormain12main_top"><img src="/static/imghwm/logo.png" alt="logo"><a href="javascript:;" class="m_editormain12main_topi" id="m_editormain12main_topi_lan"></a></div><div class="m_menu_lang_main"><a href="javascript:setlang('zh-cn');" class="m_menu_lang_mains">简体中文zh-cn</a><a href="javascript:setlang('en');" class="m_menu_lang_mains">Englishen</a><a href="javascript:;" class="m_menu_lang_mains">繁体中文zh-tw</a><a href="javascript:setlang('ja');" class="m_menu_lang_mains">日本語ja</a><a href="javascript:setlang('ko');" class="m_menu_lang_mains">한국어ko</a><a href="javascript:setlang('ms');" class="m_menu_lang_mains">Melayums</a><a href="javascript:setlang('fr');" class="m_menu_lang_mains">Françaisfr</a><a href="javascript:setlang('de');" class="m_menu_lang_mains">Deutschde</a></div></div></div></div></header><script> document.getElementById('lan1sp').addEventListener('click', function (event) { event.preventDefault(); var elements = document.getElementsByClassName('m_menu'); for (var i = 0; i < elements.length; i++) { elements[i].style.display = 'block'; } }); document.getElementById('m_editormain12main_topi_sp').addEventListener('click', function (event) { event.preventDefault(); var elements = document.getElementsByClassName('m_menu'); for (var i = 0; i < elements.length; i++) { elements[i].style.display = 'none'; } }); document.getElementById('lan1').addEventListener('click', function (event) { event.preventDefault(); var elements = document.getElementsByClassName('m_menu_lang'); for (var i = 0; i < elements.length; i++) { elements[i].style.display = 'block'; } }); document.getElementById('m_editormain12main_topi_lan').addEventListener('click', function (event) { event.preventDefault(); var elements = document.getElementsByClassName('m_menu_lang'); for (var i = 0; i < elements.length; i++) { elements[i].style.display = 'none'; } }); </script><div class="bodyMain"><div class="nphpSize"><div class="nphpSizeIn"><a href="https://m.php.cn/zh-tw/" title="首頁" class="bBlack">首頁</a> ><a href="https://m.php.cn/zh-tw/web-designer.html" class="cBlack">web前端</a> ><a href="https://m.php.cn/zh-tw/js-tutorial.html" class="cBlack">js教程</a> >JQuery和html+css實作滑鼠點擊放煙火<div class="clear"></div></div></div><div class="nphpQianBox"><div class="nphpQianTitle"><h1>JQuery和html+css實作滑鼠點擊放煙火</h1><div class="nphpQianTitleIn"><img data-src="https://img.php.cn/upload/avatar/000/000/001/6251028808086368.png" alt="PHP中文网" class="lazyload" src="/static/front/mobimages/moren/moren.png" /><dl><dt>PHP中文网原創<div class="clear"></div></dt><dd>2017-06-20 09:36:001622瀏覽<div class="clear"></div></dd></dl><div class="clear"></div></div></div><div class="nphpQianCont wenda-list"><div class="cnblogs_code"> <pre class="brush:php;toolbar:false"> 1 2 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <title>HTML5烟花燃放特效代码</title> 5 6 <style> 7 html,body{height:100%;margin:0;padding:0} 8 ul,li{text-indent:0;text-decoration:none;margin:0;padding:0} 9 img{border:0} 10 body{background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif} 11 canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20} 12 *{ 13 margin: 0px; 14 padding: 0px; 15 } 16 #bg_Img{ 17 width: 1920px; 18 height: 1500px; 19 border: 1px solid transparent; 20 background: url("start.gif") repeat; 21 text-align: center; 22 } 23 ul{ 24 width: 5555px; 25 height: 200px; 26 } 27 li{ 28 font: 120px/190px "楷体"; 29 color: white; 30 text-shadow: 5px 10px 10px 10px; 31 list-style: none; 32 float: left; 33 display: none; 34 } 35 #text_bd{ 36 width: 600px; 37 height: 200px; 38 border: 5px solid transparent; 39 margin-left: 200px; 40 } 41 #mouse_click{ 42 margin: 0px auto; 43 text-align: center; 44 color: white; 45 } 46 </style> 47 48 49 50 <div id="bg_Img"> 51 <div id="text_bd"> 52 <ul> 53 <li>O(∩_∩)O~~</li> 54 <li>同</li> 55 <li>学</li> 56 <li>们</li> 57 <li>节</li> 58 <li>日</li> 59 <li>快</li> 60 <li>乐</li> 61 <li>~~</li> 62 </ul> 63 </div> 64 <div id="mouse_click">鼠标点击释放烟花效果</div> 65 </div> 66 <script type="text/javascript" src="jquery-3.1.1.js"></script> 67 <script type="text/javascript"> 68 var aLi=document.querySelectorAll("li"); 69 setInterval(a,1000); 70 setInterval(b,2000); 71 setInterval(c,3000); 72 setInterval(d,4000); 73 setInterval(e,5000); 74 setInterval(f,6000); 75 setInterval(g,7000); 76 setInterval(h,8000); 77 function a() { 78 aLi[0].style.display = "block" 79 } 80 function b() { 81 aLi[1].style.display = "block" 82 } 83 function c() { 84 aLi[2].style.display = "block" 85 } 86 function d() { 87 aLi[3].style.display = "block" 88 } 89 function e() { 90 aLi[4].style.display = "block" 91 } 92 function f() { 93 aLi[5].style.display = "block" 94 } 95 function g() { 96 aLi[6].style.display = "block" 97 } 98 function h() { 99 aLi[7].style.display = "block" 100 } 101 $(function(){ 102 var Fireworks = function(){ 103 var self = this; 104 var rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);} 105 var hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);}; 106 window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}(); 107 108 self.init = function(){ 109 self.canvas = document.createElement('canvas'); 110 self.canvas.width = self.cw = $(window).innerWidth(); 111 self.canvas.height = self.ch = $(window).innerHeight(); 112 self.particles = []; 113 self.partCount = 150; 114 self.fireworks = []; 115 self.mx = self.cw/2; 116 self.my = self.ch/2; 117 self.currentHue = 30; 118 self.partSpeed = 5; 119 self.partSpeedVariance = 10; 120 self.partWind = 50; 121 self.partFriction = 5; 122 self.partGravity = 1; 123 self.hueMin = 0; 124 self.hueMax = 360; 125 self.fworkSpeed = 4; 126 self.fworkAccel = 10; 127 self.hueVariance = 30; 128 self.flickerDensity = 25; 129 self.showShockwave = true; 130 self.showTarget = false; 131 self.clearAlpha = 25; 132 133 $(document.body).append(self.canvas); 134 self.ctx = self.canvas.getContext('2d'); 135 self.ctx.lineCap = 'round'; 136 self.ctx.lineJoin = 'round'; 137 self.lineWidth = 1; 138 self.bindEvents(); 139 self.canvasLoop(); 140 141 self.canvas.onselectstart = function() { 142 return false; 143 }; 144 }; 145 146 self.createParticles = function(x,y, hue){ 147 var countdown = self.partCount; 148 while(countdown--){ 149 var newParticle = { 150 x: x, 151 y: y, 152 coordLast: [ 153 {x: x, y: y}, 154 {x: x, y: y}, 155 {x: x, y: y} 156 ], 157 angle: rand(0, 360), 158 speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance)), 159 friction: 1 - self.partFriction/100, 160 gravity: self.partGravity/2, 161 hue: rand(hue-self.hueVariance, hue+self.hueVariance), 162 brightness: rand(50, 80), 163 alpha: rand(40,100)/100, 164 decay: rand(10, 50)/1000, 165 wind: (rand(0, self.partWind) - (self.partWind/2))/25, 166 lineWidth: self.lineWidth 167 }; 168 self.particles.push(newParticle); 169 } 170 }; 171 172 173 self.updateParticles = function(){ 174 var i = self.particles.length; 175 while(i--){ 176 var p = self.particles[i]; 177 var radians = p.angle * Math.PI / 180; 178 var vx = Math.cos(radians) * p.speed; 179 var vy = Math.sin(radians) * p.speed; 180 p.speed *= p.friction; 181 182 p.coordLast[2].x = p.coordLast[1].x; 183 p.coordLast[2].y = p.coordLast[1].y; 184 p.coordLast[1].x = p.coordLast[0].x; 185 p.coordLast[1].y = p.coordLast[0].y; 186 p.coordLast[0].x = p.x; 187 p.coordLast[0].y = p.y; 188 189 p.x += vx; 190 p.y += vy; 191 p.y += p.gravity; 192 193 p.angle += p.wind; 194 p.alpha -= p.decay; 195 196 if(!hitTest(0,0,self.cw,self.ch,p.x-p.radius, p.y-p.radius, p.radius*2, p.radius*2) || p.alpha < .05){ 197 self.particles.splice(i, 1); 198 } 199 }; 200 }; 201 202 self.drawParticles = function(){ 203 var i = self.particles.length; 204 while(i--){ 205 var p = self.particles[i]; 206 207 var coordRand = (rand(1,3)-1); 208 self.ctx.beginPath(); 209 self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y)); 210 self.ctx.lineTo(Math.round(p.x), Math.round(p.y)); 211 self.ctx.closePath(); 212 self.ctx.strokeStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')'; 213 self.ctx.stroke(); 214 215 if(self.flickerDensity > 0){ 216 var inverseDensity = 50 - self.flickerDensity; 217 if(rand(0, inverseDensity) === inverseDensity){ 218 self.ctx.beginPath(); 219 self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth,p.lineWidth+3)/2, 0, Math.PI*2, false) 220 self.ctx.closePath(); 221 var randAlpha = rand(50,100)/100; 222 self.ctx.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+randAlpha+')'; 223 self.ctx.fill(); 224 } 225 } 226 }; 227 }; 228 229 230 self.createFireworks = function(startX, startY, targetX, targetY){ 231 var newFirework = { 232 x: startX, 233 y: startY, 234 startX: startX, 235 startY: startY, 236 hitX: false, 237 hitY: false, 238 coordLast: [ 239 {x: startX, y: startY}, 240 {x: startX, y: startY}, 241 {x: startX, y: startY} 242 ], 243 targetX: targetX, 244 targetY: targetY, 245 speed: self.fworkSpeed, 246 angle: Math.atan2(targetY - startY, targetX - startX), 247 shockwaveAngle: Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI/180)), 248 acceleration: self.fworkAccel/100, 249 hue: self.currentHue, 250 brightness: rand(50, 80), 251 alpha: rand(50,100)/100, 252 lineWidth: self.lineWidth 253 }; 254 self.fireworks.push(newFirework); 255 256 }; 257 258 259 self.updateFireworks = function(){ 260 var i = self.fireworks.length; 261 262 while(i--){ 263 var f = self.fireworks[i]; 264 self.ctx.lineWidth = f.lineWidth; 265 266 vx = Math.cos(f.angle) * f.speed, 267 vy = Math.sin(f.angle) * f.speed; 268 f.speed *= 1 + f.acceleration; 269 f.coordLast[2].x = f.coordLast[1].x; 270 f.coordLast[2].y = f.coordLast[1].y; 271 f.coordLast[1].x = f.coordLast[0].x; 272 f.coordLast[1].y = f.coordLast[0].y; 273 f.coordLast[0].x = f.x; 274 f.coordLast[0].y = f.y; 275 276 if(f.startX >= f.targetX){ 277 if(f.x + vx <= f.targetX){ 278 f.x = f.targetX; 279 f.hitX = true; 280 } else { 281 f.x += vx; 282 } 283 } else { 284 if(f.x + vx >= f.targetX){ 285 f.x = f.targetX; 286 f.hitX = true; 287 } else { 288 f.x += vx; 289 } 290 } 291 292 if(f.startY >= f.targetY){ 293 if(f.y + vy <= f.targetY){ 294 f.y = f.targetY; 295 f.hitY = true; 296 } else { 297 f.y += vy; 298 } 299 } else { 300 if(f.y + vy >= f.targetY){ 301 f.y = f.targetY; 302 f.hitY = true; 303 } else { 304 f.y += vy; 305 } 306 } 307 308 if(f.hitX && f.hitY){ 309 self.createParticles(f.targetX, f.targetY, f.hue); 310 self.fireworks.splice(i, 1); 311 312 } 313 }; 314 }; 315 316 self.drawFireworks = function(){ 317 var i = self.fireworks.length; 318 self.ctx.globalCompositeOperation = 'lighter'; 319 while(i--){ 320 var f = self.fireworks[i]; 321 self.ctx.lineWidth = f.lineWidth; 322 323 var coordRand = (rand(1,3)-1); 324 self.ctx.beginPath(); 325 self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y)); 326 self.ctx.lineTo(Math.round(f.x), Math.round(f.y)); 327 self.ctx.closePath(); 328 self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+f.alpha+')'; 329 self.ctx.stroke(); 330 331 if(self.showTarget){ 332 self.ctx.save(); 333 self.ctx.beginPath(); 334 self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, false) 335 self.ctx.closePath(); 336 self.ctx.lineWidth = 1; 337 self.ctx.stroke(); 338 self.ctx.restore(); 339 } 340 341 if(self.showShockwave){ 342 self.ctx.save(); 343 self.ctx.translate(Math.round(f.x), Math.round(f.y)); 344 self.ctx.rotate(f.shockwaveAngle); 345 self.ctx.beginPath(); 346 self.ctx.arc(0, 0, 1*(f.speed/5), 0, Math.PI, true); 347 self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+rand(25, 60)/100+')'; 348 self.ctx.lineWidth = f.lineWidth; 349 self.ctx.stroke(); 350 self.ctx.restore(); 351 } 352 }; 353 }; 354 355 self.bindEvents = function(){ 356 $(window).on('resize', function(){ 357 clearTimeout(self.timeout); 358 self.timeout = setTimeout(function() { 359 self.canvas.width = self.cw = $(window).innerWidth(); 360 self.canvas.height = self.ch = $(window).innerHeight(); 361 self.ctx.lineCap = 'round'; 362 self.ctx.lineJoin = 'round'; 363 }, 100); 364 }); 365 366 $(self.canvas).on('mousedown', function(e){ 367 self.mx = e.pageX - self.canvas.offsetLeft; 368 self.my = e.pageY - self.canvas.offsetTop; 369 self.currentHue = rand(self.hueMin, self.hueMax); 370 self.createFireworks(self.cw/2, self.ch, self.mx, self.my); 371 372 $(self.canvas).on('mousemove.fireworks', function(e){ 373 self.mx = e.pageX - self.canvas.offsetLeft; 374 self.my = e.pageY - self.canvas.offsetTop; 375 self.currentHue = rand(self.hueMin, self.hueMax); 376 self.createFireworks(self.cw/2, self.ch, self.mx, self.my); 377 }); 378 }); 379 380 $(self.canvas).on('mouseup', function(e){ 381 $(self.canvas).off('mousemove.fireworks'); 382 }); 383 384 } 385 386 self.clear = function(){ 387 self.particles = []; 388 self.fireworks = []; 389 self.ctx.clearRect(0, 0, self.cw, self.ch); 390 }; 391 392 393 self.canvasLoop = function(){ 394 requestAnimFrame(self.canvasLoop, self.canvas); 395 self.ctx.globalCompositeOperation = 'destination-out'; 396 self.ctx.fillStyle = 'rgba(0,0,0,'+self.clearAlpha/100+')'; 397 self.ctx.fillRect(0,0,self.cw,self.ch); 398 self.updateFireworks(); 399 self.updateParticles(); 400 self.drawFireworks(); 401 self.drawParticles(); 402 403 }; 404 405 self.init(); 406 407 } 408 var fworks = new Fireworks(); 409 410 }); 411 412 </script> 413 414 415 </pre> </div> 廣大網友們!因為這是放假的時候老師給發的!所以我也看不太懂有些東西!實在是抱歉有什麼不明白的,就留言告訴我!我去找我曾經的老師問問,雖然他已經退休好久了!!以上是JQuery和html+css實作滑鼠點擊放煙火的詳細內容。更多資訊請關注PHP中文網其他相關文章！</div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng">陳述：<div>本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn</div></div></div><div class="nphpSytBox">上一篇：<a class="dBlack" title="javaScript事件綁使用方法" href="https://m.php.cn/zh-tw/faq/369618.html">javaScript事件綁使用方法</a>下一篇：<a class="dBlack" title="javaScript事件綁使用方法" href="https://m.php.cn/zh-tw/faq/369622.html">javaScript事件綁使用方法</a></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>相關文章</h2><a href="https://m.php.cn/zh-tw/article.html" class="bBlack">看更多</a><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><a href="https://m.php.cn/zh-tw/faq/1609.html" title="深入淺析Bootstrap列表組元件" class="aBlack">深入淺析Bootstrap列表組元件</a><div class="clear"></div></li><li><a href="https://m.php.cn/zh-tw/faq/1640.html" title="JavaScript函數柯里化詳解" class="aBlack">JavaScript函數柯里化詳解</a><div class="clear"></div></li><li><a href="https://m.php.cn/zh-tw/faq/1949.html" title="JS密碼產生與強度偵測完整實例(附demo源碼下載)" class="aBlack">JS密碼產生與強度偵測完整實例(附demo源碼下載)</a><div class="clear"></div></li><li><a href="https://m.php.cn/zh-tw/faq/2248.html" title="Angularjs整合微信UI（weui）" class="aBlack">Angularjs整合微信UI（weui）</a><div class="clear"></div></li><li><a href="https://m.php.cn/zh-tw/faq/2351.html" title="JavaScript快速切換繁體中文和簡體中文的方法及網站支援簡繁體切換的絕招_javascript技巧" class="aBlack">JavaScript快速切換繁體中文和簡體中文的方法及網站支援簡繁體切換的絕招_javascript技巧</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt="">公益線上PHP培訓，幫助PHP學習者快速成長！</div><div class="footermid"><a href="https://m.php.cn/zh-tw/about/us.html">關於我們</a><a href="https://m.php.cn/zh-tw/about/disclaimer.html">免責聲明</a><a href="https://m.php.cn/zh-tw/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"> © php.cn All rights reserved </div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append(""); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><script> // 初始化菜单交互功能 document.addEventListener('DOMContentLoaded', function() { const menuGroupElements = document.querySelectorAll('.layui-menu-item-group'); menuGroupElements.forEach(menuItem => { menuItem.addEventListener('click', function(event) { // 防止子菜单点击触发父级事件 if (event.target.closest('.m_menusnames')) { return; } // 切换菜单状态 this.classList.toggle('layui-menu-item-down'); this.classList.toggle('layui-menu-item-up'); // 获取子菜单容器 const subMenuContainer = this.querySelector('.m_menusnames'); // 切换子菜单显示状态 if (subMenuContainer) { if (this.classList.contains('layui-menu-item-down')) { subMenuContainer.style.display = 'block'; this.querySelector('.layui-icon').classList.remove('layui-icon-down'); this.querySelector('.layui-icon').classList.add('layui-icon-up'); } else { subMenuContainer.style.display = 'none'; this.querySelector('.layui-icon').classList.remove('layui-icon-up'); this.querySelector('.layui-icon').classList.add('layui-icon-down'); } } }); }); }); </script><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script></html>