JQuery and html+css implement mouse click to set off fireworks-JS Tutorial-php.cn

4 HTML5 fireworks special effects code</ title> 5 6 <"/><meta property="og:local" content="faq"> <meta property="og:title" content="JQuery and html+css implement mouse click to set off fireworks-JS Tutorial-php.cn"> <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 fireworks special effects code</ title> 5 6 <"> <meta property="og:url" content="https://m.php.cn/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/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/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:'See more', FoldUp:'Fold up', Choice:'LANGUAGE', wait:'Loading, please wait~', LoginFirst:"Please log in first", needKeyword:'Enter keyword search', emailPhoneError:'Please enter the correct phone or email address', missPwd:'Please enter the password', emailError:'Please enter your correct email address', VerCode:"Please enter the verification code", getCode:'Sending', pwdError:'Incorrect password format', TwoPassNotMatch:'Two passwords do not match', Bindemail:'Bind email', resetpassword:'reset password', ConfirmPass:'Confirm Password', pwdCheck:'Please enter 6-18 letters or numbers', Editinfor: 'Edit personal information', trimContent:'Please enter content', titleCheck:'Title should be at least 5 words long', choiceLang:'Please select a language classification', Secondreply:'reply', NetWorkError:'Network error, please try again later!', keywordSearch:'Enter keyword search', all_lang_string:'zh|en|zh-tw|ja|ko|ms|fr|de', Next:'Next', Previous:'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\/","potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/m.php.cn\/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 and html+css implement mouse click to set off fireworks","description":"1 <!DOCTYPE html> 2 <html> 3 <head><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\"> 4 <title>HTML5 fireworks special effects code<\/ title> 5 6 <","datePublished":"2017-06-20T09:36:00+8:00","author":{"url":"https:\/\/m.php.cn\/member\/1.html","name":"PHP中文网"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/m.php.cn\/faq\/369620.html"},"url":"https:\/\/m.php.cn\/faq\/369620.html","articleBody":"<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080\"> 1<\/span> \n<span style=\"color: #008080\"> 2<\/span> \n<span style=\"color: #008080\"> 3<\/span> <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\n<span style=\"color: #008080\"> 4<\/span> <title>HTML5烟花燃放特效代码<\/title>\n<span style=\"color: #008080\"> 5<\/span> \n<span style=\"color: #008080\"> 6<\/span> <style>\n<span style=\"color: #008080\"> 7 html,body{height:100%;margin:0;padding:0<span style=\"color: #000000\">}\n<span style=\"color: #008080\"> 8 ul,li{text-indent:0;text-decoration:none;margin:0;padding:0<span style=\"color: #000000\">}\n<span style=\"color: #008080\"> 9 img{border:0<span style=\"color: #000000\">}\n<span style=\"color: #008080\"> 10 body{background-color:#000;color:#999;font:100%\/18px helvetica, arial, sans-serif}\n<span style=\"color: #008080\"> 11 canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20<span style=\"color: #000000\">}\n<span style=\"color: #008080\"> 12 *<span style=\"color: #000000\">{\n<span style=\"color: #008080\"> 13 <span style=\"color: #000000\"> margin: 0px;\n<span style=\"color: #008080\"> 14 <span style=\"color: #000000\"> padding: 0px;\n<span style=\"color: #008080\"> 15 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\"> 16 <span style=\"color: #000000\"> #bg_Img{\n<span style=\"color: #008080\"> 17 <span style=\"color: #000000\"> width: 1920px;\n<span style=\"color: #008080\"> 18 <span style=\"color: #000000\"> height: 1500px;\n<span style=\"color: #008080\"> 19 <span style=\"color: #000000\"> border: 1px solid transparent;\n<span style=\"color: #008080\"> 20 background: url(\"start.gif\"<span style=\"color: #000000\">) repeat;\n<span style=\"color: #008080\"> 21 text-<span style=\"color: #000000\">align: center;\n<span style=\"color: #008080\"> 22 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\"> 23 <span style=\"color: #000000\"> ul{\n<span style=\"color: #008080\"> 24 <span style=\"color: #000000\"> width: 5555px;\n<span style=\"color: #008080\"> 25 <span style=\"color: #000000\"> height: 200px;\n<span style=\"color: #008080\"> 26 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\"> 27 <span style=\"color: #000000\"> li{\n<span style=\"color: #008080\"> 28 font: 120px\/190px \"楷体\";\n<span style=\"color: #008080\"> 29 <span style=\"color: #000000\"> color: white;\n<span style=\"color: #008080\"> 30 text-<span style=\"color: #000000\">shadow: 5px 10px 10px 10px;\n<span style=\"color: #008080\"> 31 list-<span style=\"color: #000000\">style: none;\n<span style=\"color: #008080\"> 32 <span style=\"color: #0000ff\">float<span style=\"color: #000000\">: left;\n<span style=\"color: #008080\"> 33 <span style=\"color: #000000\"> display: none;\n<span style=\"color: #008080\"> 34 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\"> 35 <span style=\"color: #000000\"> #text_bd{\n<span style=\"color: #008080\"> 36 <span style=\"color: #000000\"> width: 600px;\n<span style=\"color: #008080\"> 37 <span style=\"color: #000000\"> height: 200px;\n<span style=\"color: #008080\"> 38 <span style=\"color: #000000\"> border: 5px solid transparent;\n<span style=\"color: #008080\"> 39 margin-<span style=\"color: #000000\">left: 200px;\n<span style=\"color: #008080\"> 40 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\"> 41 <span style=\"color: #000000\"> #mouse_click{\n<span style=\"color: #008080\"> 42 <span style=\"color: #000000\"> margin: 0px auto;\n<span style=\"color: #008080\"> 43 text-<span style=\"color: #000000\">align: center;\n<span style=\"color: #008080\"> 44 <span style=\"color: #000000\"> color: white;\n<span style=\"color: #008080\"> 45 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\"> 46 <\/style>\n<span style=\"color: #008080\"> 47<\/span> \n<span style=\"color: #008080\"> 48<\/span> \n<span style=\"color: #008080\"> 49<\/span> \n<span style=\"color: #008080\"> 50<\/span> <div id=\"bg_Img\">\n<span style=\"color: #008080\"> 51<\/span> <div id=\"text_bd\">\n<span style=\"color: #008080\"> 52<\/span> <ul>\n<span style=\"color: #008080\"> 53<\/span> <li>O(∩_∩)O~~<\/li>\n<span style=\"color: #008080\"> 54<\/span> <li>同<\/li>\n<span style=\"color: #008080\"> 55<\/span> <li>学<\/li>\n<span style=\"color: #008080\"> 56<\/span> <li>们<\/li>\n<span style=\"color: #008080\"> 57<\/span> <li>节<\/li>\n<span style=\"color: #008080\"> 58<\/span> <li>日<\/li>\n<span style=\"color: #008080\"> 59<\/span> <li>快<\/li>\n<span style=\"color: #008080\"> 60<\/span> <li>乐<\/li>\n<span style=\"color: #008080\"> 61<\/span> <li>~~<\/li>\n<span style=\"color: #008080\"> 62<\/span> <\/ul>\n<span style=\"color: #008080\"> 63<\/span> <\/div>\n<span style=\"color: #008080\"> 64<\/span> <div id=\"mouse_click\">鼠标点击释放烟花效果<\/div>\n<span style=\"color: #008080\"> 65<\/span> <\/div>\n<span style=\"color: #008080\"> 66<\/span> <script type=\"text\/javascript\" src=\"jquery-3.1.1.js\"><\/script>\n<span style=\"color: #008080\"> 67<\/span> <script type=\"text\/javascript\">\n<span style=\"color: #008080\"> 68 <span style=\"color: #0000ff\">var aLi=document.querySelectorAll(\"li\"<span style=\"color: #000000\">);\n<span style=\"color: #008080\"> 69 setInterval(a,1000<span style=\"color: #000000\">);\n<span style=\"color: #008080\"> 70 setInterval(b,2000<span style=\"color: #000000\">);\n<span style=\"color: #008080\"> 71 setInterval(c,3000<span style=\"color: #000000\">);\n<span style=\"color: #008080\"> 72 setInterval(d,4000<span style=\"color: #000000\">);\n<span style=\"color: #008080\"> 73 setInterval(e,5000<span style=\"color: #000000\">);\n<span style=\"color: #008080\"> 74 setInterval(f,6000<span style=\"color: #000000\">);\n<span style=\"color: #008080\"> 75 setInterval(g,7000<span style=\"color: #000000\">);\n<span style=\"color: #008080\"> 76 setInterval(h,8000<span style=\"color: #000000\">);\n<span style=\"color: #008080\"> 77 <span style=\"color: #0000ff\">function<span style=\"color: #000000\"> a() {\n<span style=\"color: #008080\"> 78 aLi[0].style.display = \"block\"\n<span style=\"color: #008080\"> 79 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\"> 80 <span style=\"color: #0000ff\">function<span style=\"color: #000000\"> b() {\n<span style=\"color: #008080\"> 81 aLi[1].style.display = \"block\"\n<span style=\"color: #008080\"> 82 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\"> 83 <span style=\"color: #0000ff\">function<span style=\"color: #000000\"> c() {\n<span style=\"color: #008080\"> 84 aLi[2].style.display = \"block\"\n<span style=\"color: #008080\"> 85 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\"> 86 <span style=\"color: #0000ff\">function<span style=\"color: #000000\"> d() {\n<span style=\"color: #008080\"> 87 aLi[3].style.display = \"block\"\n<span style=\"color: #008080\"> 88 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\"> 89 <span style=\"color: #0000ff\">function<span style=\"color: #000000\"> e() {\n<span style=\"color: #008080\"> 90 aLi[4].style.display = \"block\"\n<span style=\"color: #008080\"> 91 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\"> 92 <span style=\"color: #0000ff\">function<span style=\"color: #000000\"> f() {\n<span style=\"color: #008080\"> 93 aLi[5].style.display = \"block\"\n<span style=\"color: #008080\"> 94 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\"> 95 <span style=\"color: #0000ff\">function<span style=\"color: #000000\"> g() {\n<span style=\"color: #008080\"> 96 aLi[6].style.display = \"block\"\n<span style=\"color: #008080\"> 97 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\"> 98 <span style=\"color: #0000ff\">function<span style=\"color: #000000\"> h() {\n<span style=\"color: #008080\"> 99 aLi[7].style.display = \"block\"\n<span style=\"color: #008080\">100 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\">101 $(<span style=\"color: #0000ff\">function<span style=\"color: #000000\">(){\n<span style=\"color: #008080\">102 <span style=\"color: #0000ff\">var Fireworks = <span style=\"color: #0000ff\">function<span style=\"color: #000000\">(){\n<span style=\"color: #008080\">103 <span style=\"color: #0000ff\">var self = <span style=\"color: #0000ff\">this<span style=\"color: #000000\">;\n<span style=\"color: #008080\">104 <span style=\"color: #0000ff\">var rand = <span style=\"color: #0000ff\">function(rMi, rMa){<span style=\"color: #0000ff\">return ~~((Math.random()*(rMa-rMi+1))+<span style=\"color: #000000\">rMi);}\n<span style=\"color: #008080\">105 <span style=\"color: #0000ff\">var hitTest = <span style=\"color: #0000ff\">function(x1, y1, w1, h1, x2, y2, w2, h2){<span style=\"color: #0000ff\">return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 <<span style=\"color: #000000\"> y1);};\n<span style=\"color: #008080\">106 window.requestAnimFrame=<span style=\"color: #0000ff\">function(){<span style=\"color: #0000ff\">return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||<span style=\"color: #0000ff\">function(a){window.setTimeout(a,1E3\/60)}}();\n<span style=\"color: #008080\">107 \n<span style=\"color: #008080\">108 self.init = <span style=\"color: #0000ff\">function<span style=\"color: #000000\">(){\n<span style=\"color: #008080\">109 self.canvas = document.createElement('canvas'<span style=\"color: #000000\">);\n<span style=\"color: #008080\">110 self.canvas.width = self.cw =<span style=\"color: #000000\"> $(window).innerWidth();\n<span style=\"color: #008080\">111 self.canvas.height = self.ch =<span style=\"color: #000000\"> $(window).innerHeight();\n<span style=\"color: #008080\">112 self.particles =<span style=\"color: #000000\"> [];\n<span style=\"color: #008080\">113 self.partCount = 150<span style=\"color: #000000\">;\n<span style=\"color: #008080\">114 self.fireworks =<span style=\"color: #000000\"> [];\n<span style=\"color: #008080\">115 self.mx = self.cw\/2;\n<span style=\"color: #008080\">116 self.my = self.ch\/2;\n<span style=\"color: #008080\">117 self.currentHue = 30<span style=\"color: #000000\">;\n<span style=\"color: #008080\">118 self.partSpeed = 5<span style=\"color: #000000\">;\n<span style=\"color: #008080\">119 self.partSpeedVariance = 10<span style=\"color: #000000\">;\n<span style=\"color: #008080\">120 self.partWind = 50<span style=\"color: #000000\">;\n<span style=\"color: #008080\">121 self.partFriction = 5<span style=\"color: #000000\">;\n<span style=\"color: #008080\">122 self.partGravity = 1<span style=\"color: #000000\">;\n<span style=\"color: #008080\">123 self.hueMin = 0<span style=\"color: #000000\">;\n<span style=\"color: #008080\">124 self.hueMax = 360<span style=\"color: #000000\">;\n<span style=\"color: #008080\">125 self.fworkSpeed = 4<span style=\"color: #000000\">;\n<span style=\"color: #008080\">126 self.fworkAccel = 10<span style=\"color: #000000\">;\n<span style=\"color: #008080\">127 self.hueVariance = 30<span style=\"color: #000000\">;\n<span style=\"color: #008080\">128 self.flickerDensity = 25<span style=\"color: #000000\">;\n<span style=\"color: #008080\">129 self.showShockwave = <span style=\"color: #0000ff\">true<span style=\"color: #000000\">;\n<span style=\"color: #008080\">130 self.showTarget = <span style=\"color: #0000ff\">false<span style=\"color: #000000\">;\n<span style=\"color: #008080\">131 self.clearAlpha = 25<span style=\"color: #000000\">;\n<span style=\"color: #008080\">132 \n<span style=\"color: #008080\">133 <span style=\"color: #000000\"> $(document.body).append(self.canvas);\n<span style=\"color: #008080\">134 self.ctx = self.canvas.getContext('2d'<span style=\"color: #000000\">);\n<span style=\"color: #008080\">135 self.ctx.lineCap = 'round'<span style=\"color: #000000\">;\n<span style=\"color: #008080\">136 self.ctx.lineJoin = 'round'<span style=\"color: #000000\">;\n<span style=\"color: #008080\">137 self.lineWidth = 1<span style=\"color: #000000\">;\n<span style=\"color: #008080\">138 <span style=\"color: #000000\"> self.bindEvents();\n<span style=\"color: #008080\">139 <span style=\"color: #000000\"> self.canvasLoop();\n<span style=\"color: #008080\">140 \n<span style=\"color: #008080\">141 self.canvas.onselectstart = <span style=\"color: #0000ff\">function<span style=\"color: #000000\">() {\n<span style=\"color: #008080\">142 <span style=\"color: #0000ff\">return <span style=\"color: #0000ff\">false<span style=\"color: #000000\">;\n<span style=\"color: #008080\">143 <span style=\"color: #000000\"> };\n<span style=\"color: #008080\">144 <span style=\"color: #000000\"> };\n<span style=\"color: #008080\">145 \n<span style=\"color: #008080\">146 self.createParticles = <span style=\"color: #0000ff\">function<span style=\"color: #000000\">(x,y, hue){\n<span style=\"color: #008080\">147 <span style=\"color: #0000ff\">var countdown =<span style=\"color: #000000\"> self.partCount;\n<span style=\"color: #008080\">148 <span style=\"color: #0000ff\">while(countdown--<span style=\"color: #000000\">){\n<span style=\"color: #008080\">149 <span style=\"color: #0000ff\">var newParticle =<span style=\"color: #000000\"> {\n<span style=\"color: #008080\">150 <span style=\"color: #000000\"> x: x,\n<span style=\"color: #008080\">151 <span style=\"color: #000000\"> y: y,\n<span style=\"color: #008080\">152 <span style=\"color: #000000\"> coordLast: [\n<span style=\"color: #008080\">153 <span style=\"color: #000000\"> {x: x, y: y},\n<span style=\"color: #008080\">154 <span style=\"color: #000000\"> {x: x, y: y},\n<span style=\"color: #008080\">155 <span style=\"color: #000000\"> {x: x, y: y}\n<span style=\"color: #008080\">156 <span style=\"color: #000000\"> ],\n<span style=\"color: #008080\">157 angle: rand(0, 360<span style=\"color: #000000\">),\n<span style=\"color: #008080\">158 speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed +<span style=\"color: #000000\"> self.partSpeedVariance)),\n<span style=\"color: #008080\">159 friction: 1 - self.partFriction\/100,\n<span style=\"color: #008080\">160 gravity: self.partGravity\/2,\n<span style=\"color: #008080\">161 hue: rand(hue-self.hueVariance, hue+<span style=\"color: #000000\">self.hueVariance),\n<span style=\"color: #008080\">162 brightness: rand(50, 80<span style=\"color: #000000\">),\n<span style=\"color: #008080\">163 alpha: rand(40,100)\/100,\n<span style=\"color: #008080\">164 decay: rand(10, 50)\/1000,\n<span style=\"color: #008080\">165 wind: (rand(0, self.partWind) - (self.partWind\/2))\/25<span style=\"color: #000000\">,\n<span style=\"color: #008080\">166 <span style=\"color: #000000\"> lineWidth: self.lineWidth\n<span style=\"color: #008080\">167 <span style=\"color: #000000\"> };\n<span style=\"color: #008080\">168 <span style=\"color: #000000\"> self.particles.push(newParticle);\n<span style=\"color: #008080\">169 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\">170 <span style=\"color: #000000\"> };\n<span style=\"color: #008080\">171 \n<span style=\"color: #008080\">172 \n<span style=\"color: #008080\">173 self.updateParticles = <span style=\"color: #0000ff\">function<span style=\"color: #000000\">(){\n<span style=\"color: #008080\">174 <span style=\"color: #0000ff\">var i =<span style=\"color: #000000\"> self.particles.length;\n<span style=\"color: #008080\">175 <span style=\"color: #0000ff\">while(i--<span style=\"color: #000000\">){\n<span style=\"color: #008080\">176 <span style=\"color: #0000ff\">var p =<span style=\"color: #000000\"> self.particles[i];\n<span style=\"color: #008080\">177 <span style=\"color: #0000ff\">var radians = p.angle * Math.PI \/ 180<span style=\"color: #000000\">;\n<span style=\"color: #008080\">178 <span style=\"color: #0000ff\">var vx = Math.cos(radians) *<span style=\"color: #000000\"> p.speed;\n<span style=\"color: #008080\">179 <span style=\"color: #0000ff\">var vy = Math.sin(radians) *<span style=\"color: #000000\"> p.speed;\n<span style=\"color: #008080\">180 p.speed *=<span style=\"color: #000000\"> p.friction;\n<span style=\"color: #008080\">181 \n<span style=\"color: #008080\">182 p.coordLast[2].x = p.coordLast[1<span style=\"color: #000000\">].x;\n<span style=\"color: #008080\">183 p.coordLast[2].y = p.coordLast[1<span style=\"color: #000000\">].y;\n<span style=\"color: #008080\">184 p.coordLast[1].x = p.coordLast[0<span style=\"color: #000000\">].x;\n<span style=\"color: #008080\">185 p.coordLast[1].y = p.coordLast[0<span style=\"color: #000000\">].y;\n<span style=\"color: #008080\">186 p.coordLast[0].x =<span style=\"color: #000000\"> p.x;\n<span style=\"color: #008080\">187 p.coordLast[0].y =<span style=\"color: #000000\"> p.y;\n<span style=\"color: #008080\">188 \n<span style=\"color: #008080\">189 p.x +=<span style=\"color: #000000\"> vx;\n<span style=\"color: #008080\">190 p.y +=<span style=\"color: #000000\"> vy;\n<span style=\"color: #008080\">191 p.y +=<span style=\"color: #000000\"> p.gravity;\n<span style=\"color: #008080\">192 \n<span style=\"color: #008080\">193 p.angle +=<span style=\"color: #000000\"> p.wind;\n<span style=\"color: #008080\">194 p.alpha -=<span style=\"color: #000000\"> p.decay;\n<span style=\"color: #008080\">195 \n<span style=\"color: #008080\">196 <span style=\"color: #0000ff\">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<span style=\"color: #000000\">){\n<span style=\"color: #008080\">197 self.particles.splice(i, 1<span style=\"color: #000000\">);\n<span style=\"color: #008080\">198 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\">199 <span style=\"color: #000000\"> };\n<span style=\"color: #008080\">200 <span style=\"color: #000000\"> };\n<span style=\"color: #008080\">201 \n<span style=\"color: #008080\">202 self.drawParticles = <span style=\"color: #0000ff\">function<span style=\"color: #000000\">(){\n<span style=\"color: #008080\">203 <span style=\"color: #0000ff\">var i =<span style=\"color: #000000\"> self.particles.length;\n<span style=\"color: #008080\">204 <span style=\"color: #0000ff\">while(i--<span style=\"color: #000000\">){\n<span style=\"color: #008080\">205 <span style=\"color: #0000ff\">var p =<span style=\"color: #000000\"> self.particles[i];\n<span style=\"color: #008080\">206 \n<span style=\"color: #008080\">207 <span style=\"color: #0000ff\">var coordRand = (rand(1,3)-1<span style=\"color: #000000\">);\n<span style=\"color: #008080\">208 <span style=\"color: #000000\"> self.ctx.beginPath();\n<span style=\"color: #008080\">209 <span style=\"color: #000000\"> self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y));\n<span style=\"color: #008080\">210 <span style=\"color: #000000\"> self.ctx.lineTo(Math.round(p.x), Math.round(p.y));\n<span style=\"color: #008080\">211 <span style=\"color: #000000\"> self.ctx.closePath();\n<span style=\"color: #008080\">212 self.ctx.strokeStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')'<span style=\"color: #000000\">;\n<span style=\"color: #008080\">213 <span style=\"color: #000000\"> self.ctx.stroke();\n<span style=\"color: #008080\">214 \n<span style=\"color: #008080\">215 <span style=\"color: #0000ff\">if(self.flickerDensity > 0<span style=\"color: #000000\">){\n<span style=\"color: #008080\">216 <span style=\"color: #0000ff\">var inverseDensity = 50 -<span style=\"color: #000000\"> self.flickerDensity;\n<span style=\"color: #008080\">217 <span style=\"color: #0000ff\">if(rand(0, inverseDensity) ===<span style=\"color: #000000\"> inverseDensity){\n<span style=\"color: #008080\">218 <span style=\"color: #000000\"> self.ctx.beginPath();\n<span style=\"color: #008080\">219 self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth,p.lineWidth+3)\/2, 0, Math.PI*2, false)\n<span style=\"color: #008080\">220 <span style=\"color: #000000\"> self.ctx.closePath();\n<span style=\"color: #008080\">221 <span style=\"color: #0000ff\">var randAlpha = rand(50,100)\/100;\n<span style=\"color: #008080\">222 self.ctx.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+randAlpha+')'<span style=\"color: #000000\">;\n<span style=\"color: #008080\">223 <span style=\"color: #000000\"> self.ctx.fill();\n<span style=\"color: #008080\">224 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\">225 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\">226 <span style=\"color: #000000\"> };\n<span style=\"color: #008080\">227 <span style=\"color: #000000\"> };\n<span style=\"color: #008080\">228 \n<span style=\"color: #008080\">229 \n<span style=\"color: #008080\">230 self.createFireworks = <span style=\"color: #0000ff\">function<span style=\"color: #000000\">(startX, startY, targetX, targetY){\n<span style=\"color: #008080\">231 <span style=\"color: #0000ff\">var newFirework =<span style=\"color: #000000\"> {\n<span style=\"color: #008080\">232 <span style=\"color: #000000\"> x: startX,\n<span style=\"color: #008080\">233 <span style=\"color: #000000\"> y: startY,\n<span style=\"color: #008080\">234 <span style=\"color: #000000\"> startX: startX,\n<span style=\"color: #008080\">235 <span style=\"color: #000000\"> startY: startY,\n<span style=\"color: #008080\">236 hitX: <span style=\"color: #0000ff\">false<span style=\"color: #000000\">,\n<span style=\"color: #008080\">237 hitY: <span style=\"color: #0000ff\">false<span style=\"color: #000000\">,\n<span style=\"color: #008080\">238 <span style=\"color: #000000\"> coordLast: [\n<span style=\"color: #008080\">239 <span style=\"color: #000000\"> {x: startX, y: startY},\n<span style=\"color: #008080\">240 <span style=\"color: #000000\"> {x: startX, y: startY},\n<span style=\"color: #008080\">241 <span style=\"color: #000000\"> {x: startX, y: startY}\n<span style=\"color: #008080\">242 <span style=\"color: #000000\"> ],\n<span style=\"color: #008080\">243 <span style=\"color: #000000\"> targetX: targetX,\n<span style=\"color: #008080\">244 <span style=\"color: #000000\"> targetY: targetY,\n<span style=\"color: #008080\">245 <span style=\"color: #000000\"> speed: self.fworkSpeed,\n<span style=\"color: #008080\">246 angle: Math.atan2(targetY - startY, targetX -<span style=\"color: #000000\"> startX),\n<span style=\"color: #008080\">247 shockwaveAngle: Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI\/180)),\n<span style=\"color: #008080\">248 acceleration: self.fworkAccel\/100,\n<span style=\"color: #008080\">249 <span style=\"color: #000000\"> hue: self.currentHue,\n<span style=\"color: #008080\">250 brightness: rand(50, 80<span style=\"color: #000000\">),\n<span style=\"color: #008080\">251 alpha: rand(50,100)\/100,\n<span style=\"color: #008080\">252 <span style=\"color: #000000\"> lineWidth: self.lineWidth\n<span style=\"color: #008080\">253 <span style=\"color: #000000\"> };\n<span style=\"color: #008080\">254 <span style=\"color: #000000\"> self.fireworks.push(newFirework);\n<span style=\"color: #008080\">255 \n<span style=\"color: #008080\">256 <span style=\"color: #000000\"> };\n<span style=\"color: #008080\">257 \n<span style=\"color: #008080\">258 \n<span style=\"color: #008080\">259 self.updateFireworks = <span style=\"color: #0000ff\">function<span style=\"color: #000000\">(){\n<span style=\"color: #008080\">260 <span style=\"color: #0000ff\">var i =<span style=\"color: #000000\"> self.fireworks.length;\n<span style=\"color: #008080\">261 \n<span style=\"color: #008080\">262 <span style=\"color: #0000ff\">while(i--<span style=\"color: #000000\">){\n<span style=\"color: #008080\">263 <span style=\"color: #0000ff\">var f =<span style=\"color: #000000\"> self.fireworks[i];\n<span style=\"color: #008080\">264 self.ctx.lineWidth =<span style=\"color: #000000\"> f.lineWidth;\n<span style=\"color: #008080\">265 \n<span style=\"color: #008080\">266 vx = Math.cos(f.angle) *<span style=\"color: #000000\"> f.speed,\n<span style=\"color: #008080\">267 vy = Math.sin(f.angle) *<span style=\"color: #000000\"> f.speed;\n<span style=\"color: #008080\">268 f.speed *= 1 +<span style=\"color: #000000\"> f.acceleration;\n<span style=\"color: #008080\">269 f.coordLast[2].x = f.coordLast[1<span style=\"color: #000000\">].x;\n<span style=\"color: #008080\">270 f.coordLast[2].y = f.coordLast[1<span style=\"color: #000000\">].y;\n<span style=\"color: #008080\">271 f.coordLast[1].x = f.coordLast[0<span style=\"color: #000000\">].x;\n<span style=\"color: #008080\">272 f.coordLast[1].y = f.coordLast[0<span style=\"color: #000000\">].y;\n<span style=\"color: #008080\">273 f.coordLast[0].x =<span style=\"color: #000000\"> f.x;\n<span style=\"color: #008080\">274 f.coordLast[0].y =<span style=\"color: #000000\"> f.y;\n<span style=\"color: #008080\">275 \n<span style=\"color: #008080\">276 <span style=\"color: #0000ff\">if(f.startX >=<span style=\"color: #000000\"> f.targetX){\n<span style=\"color: #008080\">277 <span style=\"color: #0000ff\">if(f.x + vx <=<span style=\"color: #000000\"> f.targetX){\n<span style=\"color: #008080\">278 f.x =<span style=\"color: #000000\"> f.targetX;\n<span style=\"color: #008080\">279 f.hitX = <span style=\"color: #0000ff\">true<span style=\"color: #000000\">;\n<span style=\"color: #008080\">280 } <span style=\"color: #0000ff\">else<span style=\"color: #000000\"> {\n<span style=\"color: #008080\">281 f.x +=<span style=\"color: #000000\"> vx;\n<span style=\"color: #008080\">282 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\">283 } <span style=\"color: #0000ff\">else<span style=\"color: #000000\"> {\n<span style=\"color: #008080\">284 <span style=\"color: #0000ff\">if(f.x + vx >=<span style=\"color: #000000\"> f.targetX){\n<span style=\"color: #008080\">285 f.x =<span style=\"color: #000000\"> f.targetX;\n<span style=\"color: #008080\">286 f.hitX = <span style=\"color: #0000ff\">true<span style=\"color: #000000\">;\n<span style=\"color: #008080\">287 } <span style=\"color: #0000ff\">else<span style=\"color: #000000\"> {\n<span style=\"color: #008080\">288 f.x +=<span style=\"color: #000000\"> vx;\n<span style=\"color: #008080\">289 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\">290 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\">291 \n<span style=\"color: #008080\">292 <span style=\"color: #0000ff\">if(f.startY >=<span style=\"color: #000000\"> f.targetY){\n<span style=\"color: #008080\">293 <span style=\"color: #0000ff\">if(f.y + vy <=<span style=\"color: #000000\"> f.targetY){\n<span style=\"color: #008080\">294 f.y =<span style=\"color: #000000\"> f.targetY;\n<span style=\"color: #008080\">295 f.hitY = <span style=\"color: #0000ff\">true<span style=\"color: #000000\">;\n<span style=\"color: #008080\">296 } <span style=\"color: #0000ff\">else<span style=\"color: #000000\"> {\n<span style=\"color: #008080\">297 f.y +=<span style=\"color: #000000\"> vy;\n<span style=\"color: #008080\">298 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\">299 } <span style=\"color: #0000ff\">else<span style=\"color: #000000\"> {\n<span style=\"color: #008080\">300 <span style=\"color: #0000ff\">if(f.y + vy >=<span style=\"color: #000000\"> f.targetY){\n<span style=\"color: #008080\">301 f.y =<span style=\"color: #000000\"> f.targetY;\n<span style=\"color: #008080\">302 f.hitY = <span style=\"color: #0000ff\">true<span style=\"color: #000000\">;\n<span style=\"color: #008080\">303 } <span style=\"color: #0000ff\">else<span style=\"color: #000000\"> {\n<span style=\"color: #008080\">304 f.y +=<span style=\"color: #000000\"> vy;\n<span style=\"color: #008080\">305 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\">306 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\">307 \n<span style=\"color: #008080\">308 <span style=\"color: #0000ff\">if(f.hitX &&<span style=\"color: #000000\"> f.hitY){\n<span style=\"color: #008080\">309 <span style=\"color: #000000\"> self.createParticles(f.targetX, f.targetY, f.hue);\n<span style=\"color: #008080\">310 self.fireworks.splice(i, 1<span style=\"color: #000000\">);\n<span style=\"color: #008080\">311 \n<span style=\"color: #008080\">312 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\">313 <span style=\"color: #000000\"> };\n<span style=\"color: #008080\">314 <span style=\"color: #000000\"> };\n<span style=\"color: #008080\">315 \n<span style=\"color: #008080\">316 self.drawFireworks = <span style=\"color: #0000ff\">function<span style=\"color: #000000\">(){\n<span style=\"color: #008080\">317 <span style=\"color: #0000ff\">var i =<span style=\"color: #000000\"> self.fireworks.length;\n<span style=\"color: #008080\">318 self.ctx.globalCompositeOperation = 'lighter'<span style=\"color: #000000\">;\n<span style=\"color: #008080\">319 <span style=\"color: #0000ff\">while(i--<span style=\"color: #000000\">){\n<span style=\"color: #008080\">320 <span style=\"color: #0000ff\">var f =<span style=\"color: #000000\"> self.fireworks[i];\n<span style=\"color: #008080\">321 self.ctx.lineWidth =<span style=\"color: #000000\"> f.lineWidth;\n<span style=\"color: #008080\">322 \n<span style=\"color: #008080\">323 <span style=\"color: #0000ff\">var coordRand = (rand(1,3)-1<span style=\"color: #000000\">);\n<span style=\"color: #008080\">324 <span style=\"color: #000000\"> self.ctx.beginPath();\n<span style=\"color: #008080\">325 <span style=\"color: #000000\"> self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));\n<span style=\"color: #008080\">326 <span style=\"color: #000000\"> self.ctx.lineTo(Math.round(f.x), Math.round(f.y));\n<span style=\"color: #008080\">327 <span style=\"color: #000000\"> self.ctx.closePath();\n<span style=\"color: #008080\">328 self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+f.alpha+')'<span style=\"color: #000000\">;\n<span style=\"color: #008080\">329 <span style=\"color: #000000\"> self.ctx.stroke();\n<span style=\"color: #008080\">330 \n<span style=\"color: #008080\">331 <span style=\"color: #0000ff\">if<span style=\"color: #000000\">(self.showTarget){\n<span style=\"color: #008080\">332 <span style=\"color: #000000\"> self.ctx.save();\n<span style=\"color: #008080\">333 <span style=\"color: #000000\"> self.ctx.beginPath();\n<span style=\"color: #008080\">334 self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, <span style=\"color: #0000ff\">false<span style=\"color: #000000\">)\n<span style=\"color: #008080\">335 <span style=\"color: #000000\"> self.ctx.closePath();\n<span style=\"color: #008080\">336 self.ctx.lineWidth = 1<span style=\"color: #000000\">;\n<span style=\"color: #008080\">337 <span style=\"color: #000000\"> self.ctx.stroke();\n<span style=\"color: #008080\">338 <span style=\"color: #000000\"> self.ctx.restore();\n<span style=\"color: #008080\">339 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\">340 \n<span style=\"color: #008080\">341 <span style=\"color: #0000ff\">if<span style=\"color: #000000\">(self.showShockwave){\n<span style=\"color: #008080\">342 <span style=\"color: #000000\"> self.ctx.save();\n<span style=\"color: #008080\">343 <span style=\"color: #000000\"> self.ctx.translate(Math.round(f.x), Math.round(f.y));\n<span style=\"color: #008080\">344 <span style=\"color: #000000\"> self.ctx.rotate(f.shockwaveAngle);\n<span style=\"color: #008080\">345 <span style=\"color: #000000\"> self.ctx.beginPath();\n<span style=\"color: #008080\">346 self.ctx.arc(0, 0, 1*(f.speed\/5), 0, Math.PI, true);\n<span style=\"color: #008080\">347 self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+rand(25, 60)\/100+')';\n<span style=\"color: #008080\">348 self.ctx.lineWidth =<span style=\"color: #000000\"> f.lineWidth;\n<span style=\"color: #008080\">349 <span style=\"color: #000000\"> self.ctx.stroke();\n<span style=\"color: #008080\">350 <span style=\"color: #000000\"> self.ctx.restore();\n<span style=\"color: #008080\">351 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\">352 <span style=\"color: #000000\"> };\n<span style=\"color: #008080\">353 <span style=\"color: #000000\"> };\n<span style=\"color: #008080\">354 \n<span style=\"color: #008080\">355 self.bindEvents = <span style=\"color: #0000ff\">function<span style=\"color: #000000\">(){\n<span style=\"color: #008080\">356 $(window).on('resize', <span style=\"color: #0000ff\">function<span style=\"color: #000000\">(){\n<span style=\"color: #008080\">357 <span style=\"color: #000000\"> clearTimeout(self.timeout);\n<span style=\"color: #008080\">358 self.timeout = setTimeout(<span style=\"color: #0000ff\">function<span style=\"color: #000000\">() {\n<span style=\"color: #008080\">359 self.canvas.width = self.cw =<span style=\"color: #000000\"> $(window).innerWidth();\n<span style=\"color: #008080\">360 self.canvas.height = self.ch =<span style=\"color: #000000\"> $(window).innerHeight();\n<span style=\"color: #008080\">361 self.ctx.lineCap = 'round'<span style=\"color: #000000\">;\n<span style=\"color: #008080\">362 self.ctx.lineJoin = 'round'<span style=\"color: #000000\">;\n<span style=\"color: #008080\">363 }, 100<span style=\"color: #000000\">);\n<span style=\"color: #008080\">364 <span style=\"color: #000000\"> });\n<span style=\"color: #008080\">365 \n<span style=\"color: #008080\">366 $(self.canvas).on('mousedown', <span style=\"color: #0000ff\">function<span style=\"color: #000000\">(e){\n<span style=\"color: #008080\">367 self.mx = e.pageX -<span style=\"color: #000000\"> self.canvas.offsetLeft;\n<span style=\"color: #008080\">368 self.my = e.pageY -<span style=\"color: #000000\"> self.canvas.offsetTop;\n<span style=\"color: #008080\">369 self.currentHue =<span style=\"color: #000000\"> rand(self.hueMin, self.hueMax);\n<span style=\"color: #008080\">370 self.createFireworks(self.cw\/2, self.ch, self.mx, self.my);\n<span style=\"color: #008080\">371 \n<span style=\"color: #008080\">372 $(self.canvas).on('mousemove.fireworks', <span style=\"color: #0000ff\">function<span style=\"color: #000000\">(e){\n<span style=\"color: #008080\">373 self.mx = e.pageX -<span style=\"color: #000000\"> self.canvas.offsetLeft;\n<span style=\"color: #008080\">374 self.my = e.pageY -<span style=\"color: #000000\"> self.canvas.offsetTop;\n<span style=\"color: #008080\">375 self.currentHue =<span style=\"color: #000000\"> rand(self.hueMin, self.hueMax);\n<span style=\"color: #008080\">376 self.createFireworks(self.cw\/2, self.ch, self.mx, self.my);\n<span style=\"color: #008080\">377 <span style=\"color: #000000\"> });\n<span style=\"color: #008080\">378 <span style=\"color: #000000\"> });\n<span style=\"color: #008080\">379 \n<span style=\"color: #008080\">380 $(self.canvas).on('mouseup', <span style=\"color: #0000ff\">function<span style=\"color: #000000\">(e){\n<span style=\"color: #008080\">381 $(self.canvas).off('mousemove.fireworks'<span style=\"color: #000000\">);\n<span style=\"color: #008080\">382 <span style=\"color: #000000\"> });\n<span style=\"color: #008080\">383 \n<span style=\"color: #008080\">384 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\">385 \n<span style=\"color: #008080\">386 self.clear = <span style=\"color: #0000ff\">function<span style=\"color: #000000\">(){\n<span style=\"color: #008080\">387 self.particles =<span style=\"color: #000000\"> [];\n<span style=\"color: #008080\">388 self.fireworks =<span style=\"color: #000000\"> [];\n<span style=\"color: #008080\">389 self.ctx.clearRect(0, 0<span style=\"color: #000000\">, self.cw, self.ch);\n<span style=\"color: #008080\">390 <span style=\"color: #000000\"> };\n<span style=\"color: #008080\">391 \n<span style=\"color: #008080\">392 \n<span style=\"color: #008080\">393 self.canvasLoop = <span style=\"color: #0000ff\">function<span style=\"color: #000000\">(){\n<span style=\"color: #008080\">394 <span style=\"color: #000000\"> requestAnimFrame(self.canvasLoop, self.canvas);\n<span style=\"color: #008080\">395 self.ctx.globalCompositeOperation = 'destination-out'<span style=\"color: #000000\">;\n<span style=\"color: #008080\">396 self.ctx.fillStyle = 'rgba(0,0,0,'+self.clearAlpha\/100+')';\n<span style=\"color: #008080\">397 self.ctx.fillRect(0,0<span style=\"color: #000000\">,self.cw,self.ch);\n<span style=\"color: #008080\">398 <span style=\"color: #000000\"> self.updateFireworks();\n<span style=\"color: #008080\">399 <span style=\"color: #000000\"> self.updateParticles();\n<span style=\"color: #008080\">400 <span style=\"color: #000000\"> self.drawFireworks();\n<span style=\"color: #008080\">401 <span style=\"color: #000000\"> self.drawParticles();\n<span style=\"color: #008080\">402 \n<span style=\"color: #008080\">403 <span style=\"color: #000000\"> };\n<span style=\"color: #008080\">404 \n<span style=\"color: #008080\">405 <span style=\"color: #000000\"> self.init();\n<span style=\"color: #008080\">406 \n<span style=\"color: #008080\">407 <span style=\"color: #000000\"> }\n<span style=\"color: #008080\">408 <span style=\"color: #0000ff\">var fworks = <span style=\"color: #0000ff\">new<span style=\"color: #000000\"> Fireworks();\n<span style=\"color: #008080\">409 \n<span style=\"color: #008080\">410 <span style=\"color: #000000\"> });\n<span style=\"color: #008080\">411 \n<span style=\"color: #008080\">412 <\/script>\n<span style=\"color: #008080\">413<\/span> \n<span style=\"color: #008080\">414<\/span> \n<span style=\"color: #008080\">415<\/span> <\/pre>\n<\/div>\n<p> Dear netizens! Because this was sent by the teacher during the holiday! So I can’t understand some things! I’m really sorry. If you don’t understand anything, just leave a message and tell me! I’ll go to my former teacher and ask Ask, even though he has retired for a long time!!<\/p>"}</script><script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https:\/\/m.php.cn\/","name":"Home"}},{"@type":"ListItem","position":2,"item":{"@id":"https:\/\/m.php.cn\/web-designer.html","name":"Web Front-end"}},{"@type":"ListItem","position":3,"item":{"@id":"https:\/\/m.php.cn\/js-tutorial.html","name":"JS Tutorial"}},{"@type":"ListItem","position":4,"item":{"@id":"https:\/\/m.php.cn\/faq\/369620.html","name":"JQuery and html+css implement mouse click to set off fireworks"}}]}</script></head><body data-commit-time="2023-12-28T14:50:12+08:00" class="body2_2"><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/" title="php.cn" class="haed_logo_a"><img src="/static/imghwm/logo.png" alt="php.cn" 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('en')"/><a onclick="searchs('en')" href="javascript:;" title="search"><img onerror="this.onerror=''; this.src='static/imghwm/default1.png'" src="/static/imghwm/find.png" alt="search"></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"><i class="layui-icon layui-icon-close"></i></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">Community<i class="layui-icon layui-icon-down"></i></div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/article.html" title="Articles">Articles</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/faq/zt" title="Topics">Topics</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/wenda.html" title="Q&A">Q&A</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">Learn<i class="layui-icon layui-icon-down"></i></div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/course.html" title="Course">Course</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/dic/29.html" title="Programming Dictionary">Programming Dictionary</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">Tools Library<i class="layui-icon layui-icon-down"></i></div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/toolset/development-tools" title="Development tools">Development tools</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/toolset/website-source-code" title="Website Source Code">Website Source Code</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/toolset/php-libraries" title="PHP Libraries">PHP Libraries</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/toolset/js-special-effects" title="JS special effects">JS special effects</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/toolset/website-materials" title="Website Materials">Website Materials</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/toolset/extension-plug-ins" title="Extension plug-ins">Extension plug-ins</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/ai" title="AI Tools">AI Tools</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">Leisure<i class="layui-icon layui-icon-down"></i></div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/game" title="Game Download">Game Download</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/mobile-game-tutorial/" title="Game Tutorials">Game Tutorials</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/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">English<i class="layui-icon layui-icon-triangle-d"></i></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"><i class="layui-icon layui-icon-close"></i></a></div><div class="m_menu_lang_main"><a href="javascript:setlang('zh-cn');" class="m_menu_lang_mains">简体中文<span>zh-cn</span></a><a href="javascript:;" class="m_menu_lang_mains">English<span>en</span></a><a href="javascript:setlang('zh-tw');" class="m_menu_lang_mains">繁体中文<span>zh-tw</span></a><a href="javascript:setlang('ja');" class="m_menu_lang_mains">日本語<span>ja</span></a><a href="javascript:setlang('ko');" class="m_menu_lang_mains">한국어<span>ko</span></a><a href="javascript:setlang('ms');" class="m_menu_lang_mains">Melayu<span>ms</span></a><a href="javascript:setlang('fr');" class="m_menu_lang_mains">Français<span>fr</span></a><a href="javascript:setlang('de');" class="m_menu_lang_mains">Deutsch<span>de</span></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><main class="m_phpTopic_Details m_phpArticle_Details"><div class="Article_Details_main1M"><div class="phpgenera_Details_mainL1"><a href="https://m.php.cn/" title="Home" class="phpgenera_Details_mainL1a">Home</a><img class="lazy" data-src="/static/imghwm/top_right.png" src="/static/imghw/default1.png" alt="" /><a href="https://m.php.cn/web-designer.html" class="phpgenera_Details_mainL1a">Web Front-end</a><img class="lazy" data-src="/static/imghwm/top_right.png" src="/static/imghw/default1.png" alt="" /><a href="https://m.php.cn/js-tutorial.html" class="phpgenera_Details_mainL1a">JS Tutorial</a><img class="lazy" data-src="/static/imghwm/top_right.png" src="/static/imghw/default1.png" alt="" /><span>JQuery and html+css implement mouse click to set off fireworks</span></div><div class="Articlelist_txts"><div class="Articlelist_txts_info"><h1><a href="" title="" class="Articlelist_txts_title">JQuery and html+css implement mouse click to set off fireworks</a></h1><div class="Articlelist_txts_info_head"><div class="author_info"><a href="https://m.php.cn/member/1.html" class="author_avatar"><img class="lazy" data-src="https://img.php.cn/upload/avatar/000/000/001/6251028808086368.png" alt="PHP中文网" src="/static/imghw/default1.png" alt="author avatar" onerror="this.onerror=''; this.src='/static/imghw/default1.png'"></a><div class="author_detail"><a href="https://m.php.cn/member/1.html" class="author_name">PHP中文网</a></div></div></div><span class="Articlelist_txts_time">Jun 20, 2017 am 09:36 AM</span><div class="Articlelist_txts_infos"><span class="Articlelist_txts_infoss on">css</span><span class="Articlelist_txts_infoss ">html+css</span><span class="Articlelist_txts_infoss ">jquery</span><span class="Articlelist_txts_infoss ">accomplish</span><span class="Articlelist_txts_infoss ">Click</span><span class="Articlelist_txts_infoss ">mouse</span></div></div></div><hr /><div class="article_main wenda-list"><div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><span style="color: #008080"> 1</span> <span style="color: #008080"> 2</span> <span style="color: #008080"> 3</span> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <span style="color: #008080"> 4</span> <title>HTML5烟花燃放特效代码</title> <span style="color: #008080"> 5</span> <span style="color: #008080"> 6</span> <style> <span style="color: #008080"> 7 html,body{height:100%;margin:0;padding:0<span style="color: #000000">} <span style="color: #008080"> 8 ul,li{text-indent:0;text-decoration:none;margin:0;padding:0<span style="color: #000000">} <span style="color: #008080"> 9 img{border:0<span style="color: #000000">} <span style="color: #008080"> 10 body{background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif} <span style="color: #008080"> 11 canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20<span style="color: #000000">} <span style="color: #008080"> 12 *<span style="color: #000000">{ <span style="color: #008080"> 13 <span style="color: #000000"> margin: 0px; <span style="color: #008080"> 14 <span style="color: #000000"> padding: 0px; <span style="color: #008080"> 15 <span style="color: #000000"> } <span style="color: #008080"> 16 <span style="color: #000000"> #bg_Img{ <span style="color: #008080"> 17 <span style="color: #000000"> width: 1920px; <span style="color: #008080"> 18 <span style="color: #000000"> height: 1500px; <span style="color: #008080"> 19 <span style="color: #000000"> border: 1px solid transparent; <span style="color: #008080"> 20 background: url("start.gif"<span style="color: #000000">) repeat; <span style="color: #008080"> 21 text-<span style="color: #000000">align: center; <span style="color: #008080"> 22 <span style="color: #000000"> } <span style="color: #008080"> 23 <span style="color: #000000"> ul{ <span style="color: #008080"> 24 <span style="color: #000000"> width: 5555px; <span style="color: #008080"> 25 <span style="color: #000000"> height: 200px; <span style="color: #008080"> 26 <span style="color: #000000"> } <span style="color: #008080"> 27 <span style="color: #000000"> li{ <span style="color: #008080"> 28 font: 120px/190px "楷体"; <span style="color: #008080"> 29 <span style="color: #000000"> color: white; <span style="color: #008080"> 30 text-<span style="color: #000000">shadow: 5px 10px 10px 10px; <span style="color: #008080"> 31 list-<span style="color: #000000">style: none; <span style="color: #008080"> 32 <span style="color: #0000ff">float<span style="color: #000000">: left; <span style="color: #008080"> 33 <span style="color: #000000"> display: none; <span style="color: #008080"> 34 <span style="color: #000000"> } <span style="color: #008080"> 35 <span style="color: #000000"> #text_bd{ <span style="color: #008080"> 36 <span style="color: #000000"> width: 600px; <span style="color: #008080"> 37 <span style="color: #000000"> height: 200px; <span style="color: #008080"> 38 <span style="color: #000000"> border: 5px solid transparent; <span style="color: #008080"> 39 margin-<span style="color: #000000">left: 200px; <span style="color: #008080"> 40 <span style="color: #000000"> } <span style="color: #008080"> 41 <span style="color: #000000"> #mouse_click{ <span style="color: #008080"> 42 <span style="color: #000000"> margin: 0px auto; <span style="color: #008080"> 43 text-<span style="color: #000000">align: center; <span style="color: #008080"> 44 <span style="color: #000000"> color: white; <span style="color: #008080"> 45 <span style="color: #000000"> } <span style="color: #008080"> 46 </style> <span style="color: #008080"> 47</span> <span style="color: #008080"> 48</span> <span style="color: #008080"> 49</span> <span style="color: #008080"> 50</span> <div id="bg_Img"> <span style="color: #008080"> 51</span> <div id="text_bd"> <span style="color: #008080"> 52</span> <ul> <span style="color: #008080"> 53</span> <li>O(∩_∩)O~~</li> <span style="color: #008080"> 54</span> <li>同</li> <span style="color: #008080"> 55</span> <li>学</li> <span style="color: #008080"> 56</span> <li>们</li> <span style="color: #008080"> 57</span> <li>节</li> <span style="color: #008080"> 58</span> <li>日</li> <span style="color: #008080"> 59</span> <li>快</li> <span style="color: #008080"> 60</span> <li>乐</li> <span style="color: #008080"> 61</span> <li>~~</li> <span style="color: #008080"> 62</span> </ul> <span style="color: #008080"> 63</span> </div> <span style="color: #008080"> 64</span> <div id="mouse_click">鼠标点击释放烟花效果</div> <span style="color: #008080"> 65</span> </div> <span style="color: #008080"> 66</span> <script type="text/javascript" src="jquery-3.1.1.js"></script> <span style="color: #008080"> 67</span> <script type="text/javascript"> <span style="color: #008080"> 68 <span style="color: #0000ff">var aLi=document.querySelectorAll("li"<span style="color: #000000">); <span style="color: #008080"> 69 setInterval(a,1000<span style="color: #000000">); <span style="color: #008080"> 70 setInterval(b,2000<span style="color: #000000">); <span style="color: #008080"> 71 setInterval(c,3000<span style="color: #000000">); <span style="color: #008080"> 72 setInterval(d,4000<span style="color: #000000">); <span style="color: #008080"> 73 setInterval(e,5000<span style="color: #000000">); <span style="color: #008080"> 74 setInterval(f,6000<span style="color: #000000">); <span style="color: #008080"> 75 setInterval(g,7000<span style="color: #000000">); <span style="color: #008080"> 76 setInterval(h,8000<span style="color: #000000">); <span style="color: #008080"> 77 <span style="color: #0000ff">function<span style="color: #000000"> a() { <span style="color: #008080"> 78 aLi[0].style.display = "block" <span style="color: #008080"> 79 <span style="color: #000000"> } <span style="color: #008080"> 80 <span style="color: #0000ff">function<span style="color: #000000"> b() { <span style="color: #008080"> 81 aLi[1].style.display = "block" <span style="color: #008080"> 82 <span style="color: #000000"> } <span style="color: #008080"> 83 <span style="color: #0000ff">function<span style="color: #000000"> c() { <span style="color: #008080"> 84 aLi[2].style.display = "block" <span style="color: #008080"> 85 <span style="color: #000000"> } <span style="color: #008080"> 86 <span style="color: #0000ff">function<span style="color: #000000"> d() { <span style="color: #008080"> 87 aLi[3].style.display = "block" <span style="color: #008080"> 88 <span style="color: #000000"> } <span style="color: #008080"> 89 <span style="color: #0000ff">function<span style="color: #000000"> e() { <span style="color: #008080"> 90 aLi[4].style.display = "block" <span style="color: #008080"> 91 <span style="color: #000000"> } <span style="color: #008080"> 92 <span style="color: #0000ff">function<span style="color: #000000"> f() { <span style="color: #008080"> 93 aLi[5].style.display = "block" <span style="color: #008080"> 94 <span style="color: #000000"> } <span style="color: #008080"> 95 <span style="color: #0000ff">function<span style="color: #000000"> g() { <span style="color: #008080"> 96 aLi[6].style.display = "block" <span style="color: #008080"> 97 <span style="color: #000000"> } <span style="color: #008080"> 98 <span style="color: #0000ff">function<span style="color: #000000"> h() { <span style="color: #008080"> 99 aLi[7].style.display = "block" <span style="color: #008080">100 <span style="color: #000000"> } <span style="color: #008080">101 $(<span style="color: #0000ff">function<span style="color: #000000">(){ <span style="color: #008080">102 <span style="color: #0000ff">var Fireworks = <span style="color: #0000ff">function<span style="color: #000000">(){ <span style="color: #008080">103 <span style="color: #0000ff">var self = <span style="color: #0000ff">this<span style="color: #000000">; <span style="color: #008080">104 <span style="color: #0000ff">var rand = <span style="color: #0000ff">function(rMi, rMa){<span style="color: #0000ff">return ~~((Math.random()*(rMa-rMi+1))+<span style="color: #000000">rMi);} <span style="color: #008080">105 <span style="color: #0000ff">var hitTest = <span style="color: #0000ff">function(x1, y1, w1, h1, x2, y2, w2, h2){<span style="color: #0000ff">return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 <<span style="color: #000000"> y1);}; <span style="color: #008080">106 window.requestAnimFrame=<span style="color: #0000ff">function(){<span style="color: #0000ff">return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||<span style="color: #0000ff">function(a){window.setTimeout(a,1E3/60)}}(); <span style="color: #008080">107 <span style="color: #008080">108 self.init = <span style="color: #0000ff">function<span style="color: #000000">(){ <span style="color: #008080">109 self.canvas = document.createElement('canvas'<span style="color: #000000">); <span style="color: #008080">110 self.canvas.width = self.cw =<span style="color: #000000"> $(window).innerWidth(); <span style="color: #008080">111 self.canvas.height = self.ch =<span style="color: #000000"> $(window).innerHeight(); <span style="color: #008080">112 self.particles =<span style="color: #000000"> []; <span style="color: #008080">113 self.partCount = 150<span style="color: #000000">; <span style="color: #008080">114 self.fireworks =<span style="color: #000000"> []; <span style="color: #008080">115 self.mx = self.cw/2; <span style="color: #008080">116 self.my = self.ch/2; <span style="color: #008080">117 self.currentHue = 30<span style="color: #000000">; <span style="color: #008080">118 self.partSpeed = 5<span style="color: #000000">; <span style="color: #008080">119 self.partSpeedVariance = 10<span style="color: #000000">; <span style="color: #008080">120 self.partWind = 50<span style="color: #000000">; <span style="color: #008080">121 self.partFriction = 5<span style="color: #000000">; <span style="color: #008080">122 self.partGravity = 1<span style="color: #000000">; <span style="color: #008080">123 self.hueMin = 0<span style="color: #000000">; <span style="color: #008080">124 self.hueMax = 360<span style="color: #000000">; <span style="color: #008080">125 self.fworkSpeed = 4<span style="color: #000000">; <span style="color: #008080">126 self.fworkAccel = 10<span style="color: #000000">; <span style="color: #008080">127 self.hueVariance = 30<span style="color: #000000">; <span style="color: #008080">128 self.flickerDensity = 25<span style="color: #000000">; <span style="color: #008080">129 self.showShockwave = <span style="color: #0000ff">true<span style="color: #000000">; <span style="color: #008080">130 self.showTarget = <span style="color: #0000ff">false<span style="color: #000000">; <span style="color: #008080">131 self.clearAlpha = 25<span style="color: #000000">; <span style="color: #008080">132 <span style="color: #008080">133 <span style="color: #000000"> $(document.body).append(self.canvas); <span style="color: #008080">134 self.ctx = self.canvas.getContext('2d'<span style="color: #000000">); <span style="color: #008080">135 self.ctx.lineCap = 'round'<span style="color: #000000">; <span style="color: #008080">136 self.ctx.lineJoin = 'round'<span style="color: #000000">; <span style="color: #008080">137 self.lineWidth = 1<span style="color: #000000">; <span style="color: #008080">138 <span style="color: #000000"> self.bindEvents(); <span style="color: #008080">139 <span style="color: #000000"> self.canvasLoop(); <span style="color: #008080">140 <span style="color: #008080">141 self.canvas.onselectstart = <span style="color: #0000ff">function<span style="color: #000000">() { <span style="color: #008080">142 <span style="color: #0000ff">return <span style="color: #0000ff">false<span style="color: #000000">; <span style="color: #008080">143 <span style="color: #000000"> }; <span style="color: #008080">144 <span style="color: #000000"> }; <span style="color: #008080">145 <span style="color: #008080">146 self.createParticles = <span style="color: #0000ff">function<span style="color: #000000">(x,y, hue){ <span style="color: #008080">147 <span style="color: #0000ff">var countdown =<span style="color: #000000"> self.partCount; <span style="color: #008080">148 <span style="color: #0000ff">while(countdown--<span style="color: #000000">){ <span style="color: #008080">149 <span style="color: #0000ff">var newParticle =<span style="color: #000000"> { <span style="color: #008080">150 <span style="color: #000000"> x: x, <span style="color: #008080">151 <span style="color: #000000"> y: y, <span style="color: #008080">152 <span style="color: #000000"> coordLast: [ <span style="color: #008080">153 <span style="color: #000000"> {x: x, y: y}, <span style="color: #008080">154 <span style="color: #000000"> {x: x, y: y}, <span style="color: #008080">155 <span style="color: #000000"> {x: x, y: y} <span style="color: #008080">156 <span style="color: #000000"> ], <span style="color: #008080">157 angle: rand(0, 360<span style="color: #000000">), <span style="color: #008080">158 speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed +<span style="color: #000000"> self.partSpeedVariance)), <span style="color: #008080">159 friction: 1 - self.partFriction/100, <span style="color: #008080">160 gravity: self.partGravity/2, <span style="color: #008080">161 hue: rand(hue-self.hueVariance, hue+<span style="color: #000000">self.hueVariance), <span style="color: #008080">162 brightness: rand(50, 80<span style="color: #000000">), <span style="color: #008080">163 alpha: rand(40,100)/100, <span style="color: #008080">164 decay: rand(10, 50)/1000, <span style="color: #008080">165 wind: (rand(0, self.partWind) - (self.partWind/2))/25<span style="color: #000000">, <span style="color: #008080">166 <span style="color: #000000"> lineWidth: self.lineWidth <span style="color: #008080">167 <span style="color: #000000"> }; <span style="color: #008080">168 <span style="color: #000000"> self.particles.push(newParticle); <span style="color: #008080">169 <span style="color: #000000"> } <span style="color: #008080">170 <span style="color: #000000"> }; <span style="color: #008080">171 <span style="color: #008080">172 <span style="color: #008080">173 self.updateParticles = <span style="color: #0000ff">function<span style="color: #000000">(){ <span style="color: #008080">174 <span style="color: #0000ff">var i =<span style="color: #000000"> self.particles.length; <span style="color: #008080">175 <span style="color: #0000ff">while(i--<span style="color: #000000">){ <span style="color: #008080">176 <span style="color: #0000ff">var p =<span style="color: #000000"> self.particles[i]; <span style="color: #008080">177 <span style="color: #0000ff">var radians = p.angle * Math.PI / 180<span style="color: #000000">; <span style="color: #008080">178 <span style="color: #0000ff">var vx = Math.cos(radians) *<span style="color: #000000"> p.speed; <span style="color: #008080">179 <span style="color: #0000ff">var vy = Math.sin(radians) *<span style="color: #000000"> p.speed; <span style="color: #008080">180 p.speed *=<span style="color: #000000"> p.friction; <span style="color: #008080">181 <span style="color: #008080">182 p.coordLast[2].x = p.coordLast[1<span style="color: #000000">].x; <span style="color: #008080">183 p.coordLast[2].y = p.coordLast[1<span style="color: #000000">].y; <span style="color: #008080">184 p.coordLast[1].x = p.coordLast[0<span style="color: #000000">].x; <span style="color: #008080">185 p.coordLast[1].y = p.coordLast[0<span style="color: #000000">].y; <span style="color: #008080">186 p.coordLast[0].x =<span style="color: #000000"> p.x; <span style="color: #008080">187 p.coordLast[0].y =<span style="color: #000000"> p.y; <span style="color: #008080">188 <span style="color: #008080">189 p.x +=<span style="color: #000000"> vx; <span style="color: #008080">190 p.y +=<span style="color: #000000"> vy; <span style="color: #008080">191 p.y +=<span style="color: #000000"> p.gravity; <span style="color: #008080">192 <span style="color: #008080">193 p.angle +=<span style="color: #000000"> p.wind; <span style="color: #008080">194 p.alpha -=<span style="color: #000000"> p.decay; <span style="color: #008080">195 <span style="color: #008080">196 <span style="color: #0000ff">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<span style="color: #000000">){ <span style="color: #008080">197 self.particles.splice(i, 1<span style="color: #000000">); <span style="color: #008080">198 <span style="color: #000000"> } <span style="color: #008080">199 <span style="color: #000000"> }; <span style="color: #008080">200 <span style="color: #000000"> }; <span style="color: #008080">201 <span style="color: #008080">202 self.drawParticles = <span style="color: #0000ff">function<span style="color: #000000">(){ <span style="color: #008080">203 <span style="color: #0000ff">var i =<span style="color: #000000"> self.particles.length; <span style="color: #008080">204 <span style="color: #0000ff">while(i--<span style="color: #000000">){ <span style="color: #008080">205 <span style="color: #0000ff">var p =<span style="color: #000000"> self.particles[i]; <span style="color: #008080">206 <span style="color: #008080">207 <span style="color: #0000ff">var coordRand = (rand(1,3)-1<span style="color: #000000">); <span style="color: #008080">208 <span style="color: #000000"> self.ctx.beginPath(); <span style="color: #008080">209 <span style="color: #000000"> self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y)); <span style="color: #008080">210 <span style="color: #000000"> self.ctx.lineTo(Math.round(p.x), Math.round(p.y)); <span style="color: #008080">211 <span style="color: #000000"> self.ctx.closePath(); <span style="color: #008080">212 self.ctx.strokeStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')'<span style="color: #000000">; <span style="color: #008080">213 <span style="color: #000000"> self.ctx.stroke(); <span style="color: #008080">214 <span style="color: #008080">215 <span style="color: #0000ff">if(self.flickerDensity > 0<span style="color: #000000">){ <span style="color: #008080">216 <span style="color: #0000ff">var inverseDensity = 50 -<span style="color: #000000"> self.flickerDensity; <span style="color: #008080">217 <span style="color: #0000ff">if(rand(0, inverseDensity) ===<span style="color: #000000"> inverseDensity){ <span style="color: #008080">218 <span style="color: #000000"> self.ctx.beginPath(); <span style="color: #008080">219 self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth,p.lineWidth+3)/2, 0, Math.PI*2, false) <span style="color: #008080">220 <span style="color: #000000"> self.ctx.closePath(); <span style="color: #008080">221 <span style="color: #0000ff">var randAlpha = rand(50,100)/100; <span style="color: #008080">222 self.ctx.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+randAlpha+')'<span style="color: #000000">; <span style="color: #008080">223 <span style="color: #000000"> self.ctx.fill(); <span style="color: #008080">224 <span style="color: #000000"> } <span style="color: #008080">225 <span style="color: #000000"> } <span style="color: #008080">226 <span style="color: #000000"> }; <span style="color: #008080">227 <span style="color: #000000"> }; <span style="color: #008080">228 <span style="color: #008080">229 <span style="color: #008080">230 self.createFireworks = <span style="color: #0000ff">function<span style="color: #000000">(startX, startY, targetX, targetY){ <span style="color: #008080">231 <span style="color: #0000ff">var newFirework =<span style="color: #000000"> { <span style="color: #008080">232 <span style="color: #000000"> x: startX, <span style="color: #008080">233 <span style="color: #000000"> y: startY, <span style="color: #008080">234 <span style="color: #000000"> startX: startX, <span style="color: #008080">235 <span style="color: #000000"> startY: startY, <span style="color: #008080">236 hitX: <span style="color: #0000ff">false<span style="color: #000000">, <span style="color: #008080">237 hitY: <span style="color: #0000ff">false<span style="color: #000000">, <span style="color: #008080">238 <span style="color: #000000"> coordLast: [ <span style="color: #008080">239 <span style="color: #000000"> {x: startX, y: startY}, <span style="color: #008080">240 <span style="color: #000000"> {x: startX, y: startY}, <span style="color: #008080">241 <span style="color: #000000"> {x: startX, y: startY} <span style="color: #008080">242 <span style="color: #000000"> ], <span style="color: #008080">243 <span style="color: #000000"> targetX: targetX, <span style="color: #008080">244 <span style="color: #000000"> targetY: targetY, <span style="color: #008080">245 <span style="color: #000000"> speed: self.fworkSpeed, <span style="color: #008080">246 angle: Math.atan2(targetY - startY, targetX -<span style="color: #000000"> startX), <span style="color: #008080">247 shockwaveAngle: Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI/180)), <span style="color: #008080">248 acceleration: self.fworkAccel/100, <span style="color: #008080">249 <span style="color: #000000"> hue: self.currentHue, <span style="color: #008080">250 brightness: rand(50, 80<span style="color: #000000">), <span style="color: #008080">251 alpha: rand(50,100)/100, <span style="color: #008080">252 <span style="color: #000000"> lineWidth: self.lineWidth <span style="color: #008080">253 <span style="color: #000000"> }; <span style="color: #008080">254 <span style="color: #000000"> self.fireworks.push(newFirework); <span style="color: #008080">255 <span style="color: #008080">256 <span style="color: #000000"> }; <span style="color: #008080">257 <span style="color: #008080">258 <span style="color: #008080">259 self.updateFireworks = <span style="color: #0000ff">function<span style="color: #000000">(){ <span style="color: #008080">260 <span style="color: #0000ff">var i =<span style="color: #000000"> self.fireworks.length; <span style="color: #008080">261 <span style="color: #008080">262 <span style="color: #0000ff">while(i--<span style="color: #000000">){ <span style="color: #008080">263 <span style="color: #0000ff">var f =<span style="color: #000000"> self.fireworks[i]; <span style="color: #008080">264 self.ctx.lineWidth =<span style="color: #000000"> f.lineWidth; <span style="color: #008080">265 <span style="color: #008080">266 vx = Math.cos(f.angle) *<span style="color: #000000"> f.speed, <span style="color: #008080">267 vy = Math.sin(f.angle) *<span style="color: #000000"> f.speed; <span style="color: #008080">268 f.speed *= 1 +<span style="color: #000000"> f.acceleration; <span style="color: #008080">269 f.coordLast[2].x = f.coordLast[1<span style="color: #000000">].x; <span style="color: #008080">270 f.coordLast[2].y = f.coordLast[1<span style="color: #000000">].y; <span style="color: #008080">271 f.coordLast[1].x = f.coordLast[0<span style="color: #000000">].x; <span style="color: #008080">272 f.coordLast[1].y = f.coordLast[0<span style="color: #000000">].y; <span style="color: #008080">273 f.coordLast[0].x =<span style="color: #000000"> f.x; <span style="color: #008080">274 f.coordLast[0].y =<span style="color: #000000"> f.y; <span style="color: #008080">275 <span style="color: #008080">276 <span style="color: #0000ff">if(f.startX >=<span style="color: #000000"> f.targetX){ <span style="color: #008080">277 <span style="color: #0000ff">if(f.x + vx <=<span style="color: #000000"> f.targetX){ <span style="color: #008080">278 f.x =<span style="color: #000000"> f.targetX; <span style="color: #008080">279 f.hitX = <span style="color: #0000ff">true<span style="color: #000000">; <span style="color: #008080">280 } <span style="color: #0000ff">else<span style="color: #000000"> { <span style="color: #008080">281 f.x +=<span style="color: #000000"> vx; <span style="color: #008080">282 <span style="color: #000000"> } <span style="color: #008080">283 } <span style="color: #0000ff">else<span style="color: #000000"> { <span style="color: #008080">284 <span style="color: #0000ff">if(f.x + vx >=<span style="color: #000000"> f.targetX){ <span style="color: #008080">285 f.x =<span style="color: #000000"> f.targetX; <span style="color: #008080">286 f.hitX = <span style="color: #0000ff">true<span style="color: #000000">; <span style="color: #008080">287 } <span style="color: #0000ff">else<span style="color: #000000"> { <span style="color: #008080">288 f.x +=<span style="color: #000000"> vx; <span style="color: #008080">289 <span style="color: #000000"> } <span style="color: #008080">290 <span style="color: #000000"> } <span style="color: #008080">291 <span style="color: #008080">292 <span style="color: #0000ff">if(f.startY >=<span style="color: #000000"> f.targetY){ <span style="color: #008080">293 <span style="color: #0000ff">if(f.y + vy <=<span style="color: #000000"> f.targetY){ <span style="color: #008080">294 f.y =<span style="color: #000000"> f.targetY; <span style="color: #008080">295 f.hitY = <span style="color: #0000ff">true<span style="color: #000000">; <span style="color: #008080">296 } <span style="color: #0000ff">else<span style="color: #000000"> { <span style="color: #008080">297 f.y +=<span style="color: #000000"> vy; <span style="color: #008080">298 <span style="color: #000000"> } <span style="color: #008080">299 } <span style="color: #0000ff">else<span style="color: #000000"> { <span style="color: #008080">300 <span style="color: #0000ff">if(f.y + vy >=<span style="color: #000000"> f.targetY){ <span style="color: #008080">301 f.y =<span style="color: #000000"> f.targetY; <span style="color: #008080">302 f.hitY = <span style="color: #0000ff">true<span style="color: #000000">; <span style="color: #008080">303 } <span style="color: #0000ff">else<span style="color: #000000"> { <span style="color: #008080">304 f.y +=<span style="color: #000000"> vy; <span style="color: #008080">305 <span style="color: #000000"> } <span style="color: #008080">306 <span style="color: #000000"> } <span style="color: #008080">307 <span style="color: #008080">308 <span style="color: #0000ff">if(f.hitX &&<span style="color: #000000"> f.hitY){ <span style="color: #008080">309 <span style="color: #000000"> self.createParticles(f.targetX, f.targetY, f.hue); <span style="color: #008080">310 self.fireworks.splice(i, 1<span style="color: #000000">); <span style="color: #008080">311 <span style="color: #008080">312 <span style="color: #000000"> } <span style="color: #008080">313 <span style="color: #000000"> }; <span style="color: #008080">314 <span style="color: #000000"> }; <span style="color: #008080">315 <span style="color: #008080">316 self.drawFireworks = <span style="color: #0000ff">function<span style="color: #000000">(){ <span style="color: #008080">317 <span style="color: #0000ff">var i =<span style="color: #000000"> self.fireworks.length; <span style="color: #008080">318 self.ctx.globalCompositeOperation = 'lighter'<span style="color: #000000">; <span style="color: #008080">319 <span style="color: #0000ff">while(i--<span style="color: #000000">){ <span style="color: #008080">320 <span style="color: #0000ff">var f =<span style="color: #000000"> self.fireworks[i]; <span style="color: #008080">321 self.ctx.lineWidth =<span style="color: #000000"> f.lineWidth; <span style="color: #008080">322 <span style="color: #008080">323 <span style="color: #0000ff">var coordRand = (rand(1,3)-1<span style="color: #000000">); <span style="color: #008080">324 <span style="color: #000000"> self.ctx.beginPath(); <span style="color: #008080">325 <span style="color: #000000"> self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y)); <span style="color: #008080">326 <span style="color: #000000"> self.ctx.lineTo(Math.round(f.x), Math.round(f.y)); <span style="color: #008080">327 <span style="color: #000000"> self.ctx.closePath(); <span style="color: #008080">328 self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+f.alpha+')'<span style="color: #000000">; <span style="color: #008080">329 <span style="color: #000000"> self.ctx.stroke(); <span style="color: #008080">330 <span style="color: #008080">331 <span style="color: #0000ff">if<span style="color: #000000">(self.showTarget){ <span style="color: #008080">332 <span style="color: #000000"> self.ctx.save(); <span style="color: #008080">333 <span style="color: #000000"> self.ctx.beginPath(); <span style="color: #008080">334 self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, <span style="color: #0000ff">false<span style="color: #000000">) <span style="color: #008080">335 <span style="color: #000000"> self.ctx.closePath(); <span style="color: #008080">336 self.ctx.lineWidth = 1<span style="color: #000000">; <span style="color: #008080">337 <span style="color: #000000"> self.ctx.stroke(); <span style="color: #008080">338 <span style="color: #000000"> self.ctx.restore(); <span style="color: #008080">339 <span style="color: #000000"> } <span style="color: #008080">340 <span style="color: #008080">341 <span style="color: #0000ff">if<span style="color: #000000">(self.showShockwave){ <span style="color: #008080">342 <span style="color: #000000"> self.ctx.save(); <span style="color: #008080">343 <span style="color: #000000"> self.ctx.translate(Math.round(f.x), Math.round(f.y)); <span style="color: #008080">344 <span style="color: #000000"> self.ctx.rotate(f.shockwaveAngle); <span style="color: #008080">345 <span style="color: #000000"> self.ctx.beginPath(); <span style="color: #008080">346 self.ctx.arc(0, 0, 1*(f.speed/5), 0, Math.PI, true); <span style="color: #008080">347 self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+rand(25, 60)/100+')'; <span style="color: #008080">348 self.ctx.lineWidth =<span style="color: #000000"> f.lineWidth; <span style="color: #008080">349 <span style="color: #000000"> self.ctx.stroke(); <span style="color: #008080">350 <span style="color: #000000"> self.ctx.restore(); <span style="color: #008080">351 <span style="color: #000000"> } <span style="color: #008080">352 <span style="color: #000000"> }; <span style="color: #008080">353 <span style="color: #000000"> }; <span style="color: #008080">354 <span style="color: #008080">355 self.bindEvents = <span style="color: #0000ff">function<span style="color: #000000">(){ <span style="color: #008080">356 $(window).on('resize', <span style="color: #0000ff">function<span style="color: #000000">(){ <span style="color: #008080">357 <span style="color: #000000"> clearTimeout(self.timeout); <span style="color: #008080">358 self.timeout = setTimeout(<span style="color: #0000ff">function<span style="color: #000000">() { <span style="color: #008080">359 self.canvas.width = self.cw =<span style="color: #000000"> $(window).innerWidth(); <span style="color: #008080">360 self.canvas.height = self.ch =<span style="color: #000000"> $(window).innerHeight(); <span style="color: #008080">361 self.ctx.lineCap = 'round'<span style="color: #000000">; <span style="color: #008080">362 self.ctx.lineJoin = 'round'<span style="color: #000000">; <span style="color: #008080">363 }, 100<span style="color: #000000">); <span style="color: #008080">364 <span style="color: #000000"> }); <span style="color: #008080">365 <span style="color: #008080">366 $(self.canvas).on('mousedown', <span style="color: #0000ff">function<span style="color: #000000">(e){ <span style="color: #008080">367 self.mx = e.pageX -<span style="color: #000000"> self.canvas.offsetLeft; <span style="color: #008080">368 self.my = e.pageY -<span style="color: #000000"> self.canvas.offsetTop; <span style="color: #008080">369 self.currentHue =<span style="color: #000000"> rand(self.hueMin, self.hueMax); <span style="color: #008080">370 self.createFireworks(self.cw/2, self.ch, self.mx, self.my); <span style="color: #008080">371 <span style="color: #008080">372 $(self.canvas).on('mousemove.fireworks', <span style="color: #0000ff">function<span style="color: #000000">(e){ <span style="color: #008080">373 self.mx = e.pageX -<span style="color: #000000"> self.canvas.offsetLeft; <span style="color: #008080">374 self.my = e.pageY -<span style="color: #000000"> self.canvas.offsetTop; <span style="color: #008080">375 self.currentHue =<span style="color: #000000"> rand(self.hueMin, self.hueMax); <span style="color: #008080">376 self.createFireworks(self.cw/2, self.ch, self.mx, self.my); <span style="color: #008080">377 <span style="color: #000000"> }); <span style="color: #008080">378 <span style="color: #000000"> }); <span style="color: #008080">379 <span style="color: #008080">380 $(self.canvas).on('mouseup', <span style="color: #0000ff">function<span style="color: #000000">(e){ <span style="color: #008080">381 $(self.canvas).off('mousemove.fireworks'<span style="color: #000000">); <span style="color: #008080">382 <span style="color: #000000"> }); <span style="color: #008080">383 <span style="color: #008080">384 <span style="color: #000000"> } <span style="color: #008080">385 <span style="color: #008080">386 self.clear = <span style="color: #0000ff">function<span style="color: #000000">(){ <span style="color: #008080">387 self.particles =<span style="color: #000000"> []; <span style="color: #008080">388 self.fireworks =<span style="color: #000000"> []; <span style="color: #008080">389 self.ctx.clearRect(0, 0<span style="color: #000000">, self.cw, self.ch); <span style="color: #008080">390 <span style="color: #000000"> }; <span style="color: #008080">391 <span style="color: #008080">392 <span style="color: #008080">393 self.canvasLoop = <span style="color: #0000ff">function<span style="color: #000000">(){ <span style="color: #008080">394 <span style="color: #000000"> requestAnimFrame(self.canvasLoop, self.canvas); <span style="color: #008080">395 self.ctx.globalCompositeOperation = 'destination-out'<span style="color: #000000">; <span style="color: #008080">396 self.ctx.fillStyle = 'rgba(0,0,0,'+self.clearAlpha/100+')'; <span style="color: #008080">397 self.ctx.fillRect(0,0<span style="color: #000000">,self.cw,self.ch); <span style="color: #008080">398 <span style="color: #000000"> self.updateFireworks(); <span style="color: #008080">399 <span style="color: #000000"> self.updateParticles(); <span style="color: #008080">400 <span style="color: #000000"> self.drawFireworks(); <span style="color: #008080">401 <span style="color: #000000"> self.drawParticles(); <span style="color: #008080">402 <span style="color: #008080">403 <span style="color: #000000"> }; <span style="color: #008080">404 <span style="color: #008080">405 <span style="color: #000000"> self.init(); <span style="color: #008080">406 <span style="color: #008080">407 <span style="color: #000000"> } <span style="color: #008080">408 <span style="color: #0000ff">var fworks = <span style="color: #0000ff">new<span style="color: #000000"> Fireworks(); <span style="color: #008080">409 <span style="color: #008080">410 <span style="color: #000000"> }); <span style="color: #008080">411 <span style="color: #008080">412 </script> <span style="color: #008080">413</span> <span style="color: #008080">414</span> <span style="color: #008080">415</span> </pre> </div> <p> Dear netizens! Because this was sent by the teacher during the holiday! So I can’t understand some things! I’m really sorry. If you don’t understand anything, just leave a message and tell me! I’ll go to my former teacher and ask Ask, even though he has retired for a long time!!</p><p>The above is the detailed content of JQuery and html+css implement mouse click to set off fireworks. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="wzconShengming_sp"><div class="bzsmdiv_sp">Statement</div><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="phpgenera_Details_mainL4"><div class="phpmain1_2_top"><a href="javascript:void(0);" class="phpmain1_2_top_title">Related Article<img class="lazy" data-src="/static/imghwm/index2_title2.png" src="/static/imghw/default1.png" alt="" /></a></div><div class="phpgenera_Details_mainL4_info"><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796797281.html" title="Understanding the JavaScript Engine: Implementation Details" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174481955113957.jpg?x-oss-process=image/resize,p_40" alt="Understanding the JavaScript Engine: Implementation Details" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796797281.html" title="Understanding the JavaScript Engine: Implementation Details" class="phphistorical_Version2_mids_title">Understanding the JavaScript Engine: Implementation Details</a><span class="Articlelist_txts_time">Apr 17, 2025 am 12:05 AM</span><p class="Articlelist_txts_p">Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796796853.html" title="Python vs. JavaScript: The Learning Curve and Ease of Use" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174473354083140.jpg?x-oss-process=image/resize,p_40" alt="Python vs. JavaScript: The Learning Curve and Ease of Use" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796796853.html" title="Python vs. JavaScript: The Learning Curve and Ease of Use" class="phphistorical_Version2_mids_title">Python vs. JavaScript: The Learning Curve and Ease of Use</a><span class="Articlelist_txts_time">Apr 16, 2025 am 12:12 AM</span><p class="Articlelist_txts_p">Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796796259.html" title="Python vs. JavaScript: Community, Libraries, and Resources" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174464741163649.jpg?x-oss-process=image/resize,p_40" alt="Python vs. JavaScript: Community, Libraries, and Resources" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796796259.html" title="Python vs. JavaScript: Community, Libraries, and Resources" class="phphistorical_Version2_mids_title">Python vs. JavaScript: Community, Libraries, and Resources</a><span class="Articlelist_txts_time">Apr 15, 2025 am 12:16 AM</span><p class="Articlelist_txts_p">Python and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796795636.html" title="From C/C to JavaScript: How It All Works" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174456030117549.jpg?x-oss-process=image/resize,p_40" alt="From C/C to JavaScript: How It All Works" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796795636.html" title="From C/C to JavaScript: How It All Works" class="phphistorical_Version2_mids_title">From C/C to JavaScript: How It All Works</a><span class="Articlelist_txts_time">Apr 14, 2025 am 12:05 AM</span><p class="Articlelist_txts_p">The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796795187.html" title="JavaScript Engines: Comparing Implementations" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174447395115481.jpg?x-oss-process=image/resize,p_40" alt="JavaScript Engines: Comparing Implementations" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796795187.html" title="JavaScript Engines: Comparing Implementations" class="phphistorical_Version2_mids_title">JavaScript Engines: Comparing Implementations</a><span class="Articlelist_txts_time">Apr 13, 2025 am 12:05 AM</span><p class="Articlelist_txts_p">Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796794707.html" title="Beyond the Browser: JavaScript in the Real World" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174438758116720.jpg?x-oss-process=image/resize,p_40" alt="Beyond the Browser: JavaScript in the Real World" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796794707.html" title="Beyond the Browser: JavaScript in the Real World" class="phphistorical_Version2_mids_title">Beyond the Browser: JavaScript in the Real World</a><span class="Articlelist_txts_time">Apr 12, 2025 am 12:06 AM</span><p class="Articlelist_txts_p">JavaScript's applications in the real world include server-side programming, mobile application development and Internet of Things control: 1. Server-side programming is realized through Node.js, suitable for high concurrent request processing. 2. Mobile application development is carried out through ReactNative and supports cross-platform deployment. 3. Used for IoT device control through Johnny-Five library, suitable for hardware interaction.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796794258.html" title="Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174433099040604.jpg?x-oss-process=image/resize,p_40" alt="Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796794258.html" title="Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)" class="phphistorical_Version2_mids_title">Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)</a><span class="Articlelist_txts_time">Apr 11, 2025 am 08:23 AM</span><p class="Articlelist_txts_p">I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796794257.html" title="How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174433092927917.jpg?x-oss-process=image/resize,p_40" alt="How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796794257.html" title="How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)" class="phphistorical_Version2_mids_title">How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)</a><span class="Articlelist_txts_time">Apr 11, 2025 am 08:22 AM</span><p class="Articlelist_txts_p">This article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base</p></div></div><a href="https://m.php.cn/web-designer.html" class="phpgenera_Details_mainL4_botton"><span>See all articles</span><img class="lazy" data-src="/static/imghwm/down_right.png" src="/static/imghw/default1.png" alt="" /></a></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><div class="AI_ToolDetails_main4sR"><div class="phpgenera_Details_mainR3"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>Hot AI Tools</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ai/undresserai-undress" title="Undresser.AI Undress"class="phpmain_tab2_mids_title"><h3>Undresser.AI Undress</h3></a><p>AI-powered app for creating realistic nude photos</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover"class="phpmain_tab2_mids_title"><h3>AI Clothes Remover</h3></a><p>Online AI tool for removing clothes from photos.</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ai/undress-ai-tool" title="Undress AI Tool"class="phpmain_tab2_mids_title"><h3>Undress AI Tool</h3></a><p>Undress images for free</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ai/clothoffio" title="Clothoff.io"class="phpmain_tab2_mids_title"><h3>Clothoff.io</h3></a><p>AI clothes remover</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ai/ai-hentai-generator" title="AI Hentai Generator"class="phpmain_tab2_mids_title"><h3>AI Hentai Generator</h3></a><p>Generate AI Hentai for free.</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ai">Show More</a></div></div></div><div class="phpgenera_Details_mainR4"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>Hot Article</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/1796780570.html" title="R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>1 months ago</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/1796780641.html" title="R.E.P.O. Best Graphic Settings" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Best Graphic Settings</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>1 months ago</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/1796785841.html" title="Assassin's Creed Shadows: Seashell Riddle Solution" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Seashell Riddle Solution</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>2 weeks ago</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/1796780520.html" title="R.E.P.O. How to Fix Audio if You Can't Hear Anyone" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. How to Fix Audio if You Can't Hear Anyone</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>1 months ago</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/1796780523.html" title="R.E.P.O. Chat Commands and How to Use Them" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Chat Commands and How to Use Them</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>1 months ago</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/article.html">Show More</a></div></div></div><div class="phpgenera_Details_mainR3"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>Hot Tools</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/1574" title="Safe Exam Browser" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/017/169233952169011.png" src="/static/imghw/default1.png" alt="Safe Exam Browser" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/1574" title="Safe Exam Browser" class="phpmain_tab2_mids_title"><h3>Safe Exam Browser</h3></a><p>Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg" src="/static/imghw/default1.png" alt="Zend Studio 13.0.1" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_title"><h3>Zend Studio 13.0.1</h3></a><p>Powerful PHP integrated development environment</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/1556" title="MantisBT" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/004/169206588591843.png" src="/static/imghw/default1.png" alt="MantisBT" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/1556" title="MantisBT" class="phpmain_tab2_mids_title"><h3>MantisBT</h3></a><p>Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/1527" title="VSCode Windows 64-bit Download" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/5e2151b57e8e3927.png" src="/static/imghw/default1.png" alt="VSCode Windows 64-bit Download" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/1527" title="VSCode Windows 64-bit Download" class="phpmain_tab2_mids_title"><h3>VSCode Windows 64-bit Download</h3></a><p>A free and powerful IDE editor launched by Microsoft</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/506" title="WebStorm Mac version" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d36e6254963493.png" src="/static/imghw/default1.png" alt="WebStorm Mac version" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/506" title="WebStorm Mac version" class="phpmain_tab2_mids_title"><h3>WebStorm Mac version</h3></a><p>Useful JavaScript development tools</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ai">Show More</a></div></div></div><div class="phpgenera_Details_mainR4"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>Hot Topics</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/gmailyxdlrkzn" title="Where is the login entrance for gmail email?" class="phpgenera_Details_mainR4_bottom_title">Where is the login entrance for gmail email?</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>7536</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>15</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1379</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>52</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/steamdzhmcssmgs" title="What is the format of the account name of steam" class="phpgenera_Details_mainR4_bottom_title">What is the format of the account name of steam</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>82</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>11</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/winactivationkeyper" title="win11 activation key permanent" class="phpgenera_Details_mainR4_bottom_title">win11 activation key permanent</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>55</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>19</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/newyorktimesdailybrief" title="nyt connections hints and answers" class="phpgenera_Details_mainR4_bottom_title">nyt connections hints and answers</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>21</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>86</span></div></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/faq/zt">Show More</a></div></div></div></div></main><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=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></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><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> 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><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("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(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><script>// 通用函数，用于显示或隐藏元素 function toggleElementsDisplay(className, show) { const elements = document.getElementsByClassName(className); for (let i = 0; i < elements.length; i++) { elements[i].style.display = show ? "block" : "none"; } } // 页面加载完成后执行的主函数 document.addEventListener("DOMContentLoaded", () => { // 1. 绑定菜单按钮事件 const bindMenuEvents = () => { const toggleDisplay = (className, show, eventId) => { const element = document.getElementById(eventId); if (element) { element.addEventListener("click", (event) => { event.preventDefault(); toggleElementsDisplay(className, show); }); } }; toggleDisplay("m_editormain12main", true, "fixed_tab_img"); toggleDisplay("m_editormain12main", false, "fixed_tab_topi"); toggleDisplay("m_editormain12main", false, "fixed_tab_close"); toggleDisplay("m_menu", true, "lan1sp"); toggleDisplay("m_menu", false, "m_editormain12main_topi_sp"); toggleDisplay("m_menu_lang", true, "lan1"); toggleDisplay("m_menu_lang", false, "m_editormain12main_topi_lan"); }; // 2. 绑定滚动链接事件 const bindScrollLinks = () => { const titleList = document.getElementById("fixed_tab_titlelist"); const menuMain = document.getElementsByClassName("m_editormain12main")[0]; const links = document.querySelectorAll('.fixed_tab_a'); links.forEach(linkElement => { if (linkElement) { linkElement.addEventListener("click", async (e) => { e.preventDefault(); e.stopPropagation(); // 先隐藏菜单 if (menuMain) menuMain.style.display = "none"; if (titleList) titleList.style.display = "none"; // 获取目标元素的 ID const targetId = linkElement.getAttribute('href').substring(1); const targetElement = document.getElementById(targetId); // 等待 DOM 更新 await new Promise(resolve => requestAnimationFrame(resolve)); // 滚动到目标位置 if (targetElement) { targetElement.scrollIntoView({ behavior: "smooth", block: "start" }); } }); } }); }; // 3. 绑定关闭按钮事件 const bindCloseButton = () => { const closeButton = document.querySelector(".phpgenera_Details_mainR1_close"); const container = document.querySelector(".phpgenera_Details_mainR1"); if (closeButton && container) { closeButton.addEventListener("click", (event) => { event.preventDefault(); container.style.display = "none"; }); } }; // 4. 初始化菜单交互功能 const initMenuInteraction = () => { 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'); const icon = this.querySelector('.layui-icon'); if (subMenuContainer && icon) { if (this.classList.contains('layui-menu-item-down')) { subMenuContainer.style.display = 'block'; icon.classList.remove('layui-icon-down'); icon.classList.add('layui-icon-up'); } else { subMenuContainer.style.display = 'none'; icon.classList.remove('layui-icon-up'); icon.classList.add('layui-icon-down'); } } }); }); }; // 5. 初始化 layui 功能 const initLayui = () => { if (typeof layui !== 'undefined') { layui.use(function () { var util = layui.util; if (util && util.fixbar) { util.fixbar({ on: { mouseenter: function (type) { if (layer && layer.tips) { layer.tips(type, this, { tips: 4, fixed: true, }); } }, mouseleave: function (type) { if (layer && layer.closeAll) { layer.closeAll("tips"); } }, }, }); } }); } }; // 执行所有初始化函数 bindMenuEvents(); bindScrollLinks(); bindCloseButton(); initMenuInteraction(); initLayui(); }); </script></body></html>