4 HTML5-Code für Spezialeffekte für die Feuerwerksanzeige< /Titel> 5 6 <"/><meta property="og:local" content="de"> <meta property="og:title" content="JQuery und HTML+CSS implementieren einen Mausklick, um ein Feuerwerk auszulösen-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-Code für Spezialeffekte für die Feuerwerksanzeige< /Titel> 5 6 <"> <meta property="og:url" content="https://m.php.cn/de/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="http://www.php.cn/de/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,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"><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="http://www.php.cn/de/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:'Mehr sehen', FoldUp:'Zusammenklappen', Choice:'Sprache', wait:'Laden, bitte warten~', LoginFirst:"Bitte loggen Sie sich zuerst ein", needKeyword:'Geben Sie die Stichwortsuche ein', emailPhoneError:'Bitte geben Sie die richtige Telefon- oder E-Mail-Adresse ein', missPwd:'Bitte geben Sie das Passwort ein', emailError:'Bitte geben Sie Ihre korrekte E-Mail-Adresse ein', VerCode:"Bitte den Bestätigungscode eingeben", getCode:'Senden', pwdError:'Falsches Passwortformat', TwoPassNotMatch:'Zwei Passwörter stimmen nicht überein', Bindemail:'E-Mail binden', resetpassword:'Passwort zurücksetzen', ConfirmPass:'Bestätige das Passwort', pwdCheck:'Bitte geben Sie 6-18 Buchstaben oder Zahlen ein', Editinfor: 'Persönliche Informationen bearbeiten', trimContent:'Bitte geben Sie Inhalte ein', titleCheck:'Der Titel sollte mindestens 5 Wörter lang sein', choiceLang:'Bitte wählen Sie eine Sprachklassifizierung aus', Secondreply:'Antwort', NetWorkError:'Netzwerkfehler, bitte versuchen Sie es später noch einmal!', keywordSearch:'Geben Sie die Stichwortsuche ein', all_lang_string:'zh|en|zh-tw|ja|ko|ms|fr|de', Next:'Nächste', Previous:'Vorherige' }; </script><!-- Google Tag Manager --><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><!-- End Google Tag Manager --><!-- Google tag (gtag.js) --><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 async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6267705206177514" crossorigin="anonymous"></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> var xnb_name = 'Virtual currency'; </script><script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","headline":"JQuery und HTML+CSS implementieren einen Mausklick, um ein Feuerwerk auszulösen","description":"1 <!DOCTYPE html> 2 <html> 3 <head><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\"> 4 <title>HTML5-Code für Spezialeffekte für die Feuerwerksanzeige< \/Titel> 5 6 <","datePublished":"2017-06-20T09:36:00+8:00","author":{"url":"http:\/\/m.php.cn\/de\/member\/1.html","name":"PHP中文网"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/m.php.cn\/de\/faq\/369620.html"},"url":"https:\/\/m.php.cn\/de\/faq\/369620.html","articleBody":"<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080\"> 1<\/span> <!DOCTYPE html>\n<span style=\"color: #008080\"> 2<\/span> <html>\n<span style=\"color: #008080\"> 3<\/span> <head><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<\/span> html,body{height:100%;margin:0;padding:0<span style=\"color: #000000\">}\n<\/span><span style=\"color: #008080\"> 8<\/span> ul,li{text-indent:0;text-decoration:none;margin:0;padding:0<span style=\"color: #000000\">}\n<\/span><span style=\"color: #008080\"> 9<\/span> img{border:0<span style=\"color: #000000\">}\n<\/span><span style=\"color: #008080\"> 10<\/span> body{background-color:#000;color:#999;font:100%\/18px helvetica, arial, sans-serif}\n<span style=\"color: #008080\"> 11<\/span> canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20<span style=\"color: #000000\">}\n<\/span><span style=\"color: #008080\"> 12<\/span> *<span style=\"color: #000000\">{\n<\/span><span style=\"color: #008080\"> 13<\/span> <span style=\"color: #000000\"> margin: 0px;\n<\/span><span style=\"color: #008080\"> 14<\/span> <span style=\"color: #000000\"> padding: 0px;\n<\/span><span style=\"color: #008080\"> 15<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\"> 16<\/span> <span style=\"color: #000000\"> #bg_Img{\n<\/span><span style=\"color: #008080\"> 17<\/span> <span style=\"color: #000000\"> width: 1920px;\n<\/span><span style=\"color: #008080\"> 18<\/span> <span style=\"color: #000000\"> height: 1500px;\n<\/span><span style=\"color: #008080\"> 19<\/span> <span style=\"color: #000000\"> border: 1px solid transparent;\n<\/span><span style=\"color: #008080\"> 20<\/span> background: url(\"start.gif\"<span style=\"color: #000000\">) repeat;\n<\/span><span style=\"color: #008080\"> 21<\/span> text-<span style=\"color: #000000\">align: center;\n<\/span><span style=\"color: #008080\"> 22<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\"> 23<\/span> <span style=\"color: #000000\"> ul{\n<\/span><span style=\"color: #008080\"> 24<\/span> <span style=\"color: #000000\"> width: 5555px;\n<\/span><span style=\"color: #008080\"> 25<\/span> <span style=\"color: #000000\"> height: 200px;\n<\/span><span style=\"color: #008080\"> 26<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\"> 27<\/span> <span style=\"color: #000000\"> li{\n<\/span><span style=\"color: #008080\"> 28<\/span> font: 120px\/190px \"楷体\";\n<span style=\"color: #008080\"> 29<\/span> <span style=\"color: #000000\"> color: white;\n<\/span><span style=\"color: #008080\"> 30<\/span> text-<span style=\"color: #000000\">shadow: 5px 10px 10px 10px;\n<\/span><span style=\"color: #008080\"> 31<\/span> list-<span style=\"color: #000000\">style: none;\n<\/span><span style=\"color: #008080\"> 32<\/span> <span style=\"color: #0000ff\">float<\/span><span style=\"color: #000000\">: left;\n<\/span><span style=\"color: #008080\"> 33<\/span> <span style=\"color: #000000\"> display: none;\n<\/span><span style=\"color: #008080\"> 34<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\"> 35<\/span> <span style=\"color: #000000\"> #text_bd{\n<\/span><span style=\"color: #008080\"> 36<\/span> <span style=\"color: #000000\"> width: 600px;\n<\/span><span style=\"color: #008080\"> 37<\/span> <span style=\"color: #000000\"> height: 200px;\n<\/span><span style=\"color: #008080\"> 38<\/span> <span style=\"color: #000000\"> border: 5px solid transparent;\n<\/span><span style=\"color: #008080\"> 39<\/span> margin-<span style=\"color: #000000\">left: 200px;\n<\/span><span style=\"color: #008080\"> 40<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\"> 41<\/span> <span style=\"color: #000000\"> #mouse_click{\n<\/span><span style=\"color: #008080\"> 42<\/span> <span style=\"color: #000000\"> margin: 0px auto;\n<\/span><span style=\"color: #008080\"> 43<\/span> text-<span style=\"color: #000000\">align: center;\n<\/span><span style=\"color: #008080\"> 44<\/span> <span style=\"color: #000000\"> color: white;\n<\/span><span style=\"color: #008080\"> 45<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\"> 46<\/span> <\/style>\n<span style=\"color: #008080\"> 47<\/span> \n<span style=\"color: #008080\"> 48<\/span> <\/head>\n<span style=\"color: #008080\"> 49<\/span> <body>\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> <span style=\"color: #0000ff\">var<\/span> aLi=document.querySelectorAll(\"li\"<span style=\"color: #000000\">);\n<\/span><span style=\"color: #008080\"> 69<\/span> setInterval(a,1000<span style=\"color: #000000\">);\n<\/span><span style=\"color: #008080\"> 70<\/span> setInterval(b,2000<span style=\"color: #000000\">);\n<\/span><span style=\"color: #008080\"> 71<\/span> setInterval(c,3000<span style=\"color: #000000\">);\n<\/span><span style=\"color: #008080\"> 72<\/span> setInterval(d,4000<span style=\"color: #000000\">);\n<\/span><span style=\"color: #008080\"> 73<\/span> setInterval(e,5000<span style=\"color: #000000\">);\n<\/span><span style=\"color: #008080\"> 74<\/span> setInterval(f,6000<span style=\"color: #000000\">);\n<\/span><span style=\"color: #008080\"> 75<\/span> setInterval(g,7000<span style=\"color: #000000\">);\n<\/span><span style=\"color: #008080\"> 76<\/span> setInterval(h,8000<span style=\"color: #000000\">);\n<\/span><span style=\"color: #008080\"> 77<\/span> <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\"> a() {\n<\/span><span style=\"color: #008080\"> 78<\/span> aLi[0].style.display = \"block\"\n<span style=\"color: #008080\"> 79<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\"> 80<\/span> <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\"> b() {\n<\/span><span style=\"color: #008080\"> 81<\/span> aLi[1].style.display = \"block\"\n<span style=\"color: #008080\"> 82<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\"> 83<\/span> <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\"> c() {\n<\/span><span style=\"color: #008080\"> 84<\/span> aLi[2].style.display = \"block\"\n<span style=\"color: #008080\"> 85<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\"> 86<\/span> <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\"> d() {\n<\/span><span style=\"color: #008080\"> 87<\/span> aLi[3].style.display = \"block\"\n<span style=\"color: #008080\"> 88<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\"> 89<\/span> <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\"> e() {\n<\/span><span style=\"color: #008080\"> 90<\/span> aLi[4].style.display = \"block\"\n<span style=\"color: #008080\"> 91<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\"> 92<\/span> <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\"> f() {\n<\/span><span style=\"color: #008080\"> 93<\/span> aLi[5].style.display = \"block\"\n<span style=\"color: #008080\"> 94<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\"> 95<\/span> <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\"> g() {\n<\/span><span style=\"color: #008080\"> 96<\/span> aLi[6].style.display = \"block\"\n<span style=\"color: #008080\"> 97<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\"> 98<\/span> <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\"> h() {\n<\/span><span style=\"color: #008080\"> 99<\/span> aLi[7].style.display = \"block\"\n<span style=\"color: #008080\">100<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\">101<\/span> $(<span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\">(){\n<\/span><span style=\"color: #008080\">102<\/span> <span style=\"color: #0000ff\">var<\/span> Fireworks = <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\">(){\n<\/span><span style=\"color: #008080\">103<\/span> <span style=\"color: #0000ff\">var<\/span> self = <span style=\"color: #0000ff\">this<\/span><span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">104<\/span> <span style=\"color: #0000ff\">var<\/span> rand = <span style=\"color: #0000ff\">function<\/span>(rMi, rMa){<span style=\"color: #0000ff\">return<\/span> ~~((Math.random()*(rMa-rMi+1))+<span style=\"color: #000000\">rMi);}\n<\/span><span style=\"color: #008080\">105<\/span> <span style=\"color: #0000ff\">var<\/span> hitTest = <span style=\"color: #0000ff\">function<\/span>(x1, y1, w1, h1, x2, y2, w2, h2){<span style=\"color: #0000ff\">return<\/span> !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 <<span style=\"color: #000000\"> y1);};\n<\/span><span style=\"color: #008080\">106<\/span> window.requestAnimFrame=<span style=\"color: #0000ff\">function<\/span>(){<span style=\"color: #0000ff\">return<\/span> window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||<span style=\"color: #0000ff\">function<\/span>(a){window.setTimeout(a,1E3\/60)}}();\n<span style=\"color: #008080\">107<\/span> \n<span style=\"color: #008080\">108<\/span> self.init = <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\">(){\n<\/span><span style=\"color: #008080\">109<\/span> self.canvas = document.createElement('canvas'<span style=\"color: #000000\">);\n<\/span><span style=\"color: #008080\">110<\/span> self.canvas.width = self.cw =<span style=\"color: #000000\"> $(window).innerWidth();\n<\/span><span style=\"color: #008080\">111<\/span> self.canvas.height = self.ch =<span style=\"color: #000000\"> $(window).innerHeight();\n<\/span><span style=\"color: #008080\">112<\/span> self.particles =<span style=\"color: #000000\"> [];\n<\/span><span style=\"color: #008080\">113<\/span> self.partCount = 150<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">114<\/span> self.fireworks =<span style=\"color: #000000\"> [];\n<\/span><span style=\"color: #008080\">115<\/span> self.mx = self.cw\/2;\n<span style=\"color: #008080\">116<\/span> self.my = self.ch\/2;\n<span style=\"color: #008080\">117<\/span> self.currentHue = 30<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">118<\/span> self.partSpeed = 5<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">119<\/span> self.partSpeedVariance = 10<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">120<\/span> self.partWind = 50<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">121<\/span> self.partFriction = 5<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">122<\/span> self.partGravity = 1<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">123<\/span> self.hueMin = 0<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">124<\/span> self.hueMax = 360<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">125<\/span> self.fworkSpeed = 4<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">126<\/span> self.fworkAccel = 10<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">127<\/span> self.hueVariance = 30<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">128<\/span> self.flickerDensity = 25<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">129<\/span> self.showShockwave = <span style=\"color: #0000ff\">true<\/span><span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">130<\/span> self.showTarget = <span style=\"color: #0000ff\">false<\/span><span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">131<\/span> self.clearAlpha = 25<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">132<\/span> \n<span style=\"color: #008080\">133<\/span> <span style=\"color: #000000\"> $(document.body).append(self.canvas);\n<\/span><span style=\"color: #008080\">134<\/span> self.ctx = self.canvas.getContext('2d'<span style=\"color: #000000\">);\n<\/span><span style=\"color: #008080\">135<\/span> self.ctx.lineCap = 'round'<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">136<\/span> self.ctx.lineJoin = 'round'<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">137<\/span> self.lineWidth = 1<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">138<\/span> <span style=\"color: #000000\"> self.bindEvents();\n<\/span><span style=\"color: #008080\">139<\/span> <span style=\"color: #000000\"> self.canvasLoop();\n<\/span><span style=\"color: #008080\">140<\/span> \n<span style=\"color: #008080\">141<\/span> self.canvas.onselectstart = <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\">() {\n<\/span><span style=\"color: #008080\">142<\/span> <span style=\"color: #0000ff\">return<\/span> <span style=\"color: #0000ff\">false<\/span><span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">143<\/span> <span style=\"color: #000000\"> };\n<\/span><span style=\"color: #008080\">144<\/span> <span style=\"color: #000000\"> };\n<\/span><span style=\"color: #008080\">145<\/span> \n<span style=\"color: #008080\">146<\/span> self.createParticles = <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\">(x,y, hue){\n<\/span><span style=\"color: #008080\">147<\/span> <span style=\"color: #0000ff\">var<\/span> countdown =<span style=\"color: #000000\"> self.partCount;\n<\/span><span style=\"color: #008080\">148<\/span> <span style=\"color: #0000ff\">while<\/span>(countdown--<span style=\"color: #000000\">){\n<\/span><span style=\"color: #008080\">149<\/span> <span style=\"color: #0000ff\">var<\/span> newParticle =<span style=\"color: #000000\"> {\n<\/span><span style=\"color: #008080\">150<\/span> <span style=\"color: #000000\"> x: x,\n<\/span><span style=\"color: #008080\">151<\/span> <span style=\"color: #000000\"> y: y,\n<\/span><span style=\"color: #008080\">152<\/span> <span style=\"color: #000000\"> coordLast: [\n<\/span><span style=\"color: #008080\">153<\/span> <span style=\"color: #000000\"> {x: x, y: y},\n<\/span><span style=\"color: #008080\">154<\/span> <span style=\"color: #000000\"> {x: x, y: y},\n<\/span><span style=\"color: #008080\">155<\/span> <span style=\"color: #000000\"> {x: x, y: y}\n<\/span><span style=\"color: #008080\">156<\/span> <span style=\"color: #000000\"> ],\n<\/span><span style=\"color: #008080\">157<\/span> angle: rand(0, 360<span style=\"color: #000000\">),\n<\/span><span style=\"color: #008080\">158<\/span> speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed +<span style=\"color: #000000\"> self.partSpeedVariance)),\n<\/span><span style=\"color: #008080\">159<\/span> friction: 1 - self.partFriction\/100,\n<span style=\"color: #008080\">160<\/span> gravity: self.partGravity\/2,\n<span style=\"color: #008080\">161<\/span> hue: rand(hue-self.hueVariance, hue+<span style=\"color: #000000\">self.hueVariance),\n<\/span><span style=\"color: #008080\">162<\/span> brightness: rand(50, 80<span style=\"color: #000000\">),\n<\/span><span style=\"color: #008080\">163<\/span> alpha: rand(40,100)\/100,\n<span style=\"color: #008080\">164<\/span> decay: rand(10, 50)\/1000,\n<span style=\"color: #008080\">165<\/span> wind: (rand(0, self.partWind) - (self.partWind\/2))\/25<span style=\"color: #000000\">,\n<\/span><span style=\"color: #008080\">166<\/span> <span style=\"color: #000000\"> lineWidth: self.lineWidth\n<\/span><span style=\"color: #008080\">167<\/span> <span style=\"color: #000000\"> };\n<\/span><span style=\"color: #008080\">168<\/span> <span style=\"color: #000000\"> self.particles.push(newParticle);\n<\/span><span style=\"color: #008080\">169<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\">170<\/span> <span style=\"color: #000000\"> };\n<\/span><span style=\"color: #008080\">171<\/span> \n<span style=\"color: #008080\">172<\/span> \n<span style=\"color: #008080\">173<\/span> self.updateParticles = <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\">(){\n<\/span><span style=\"color: #008080\">174<\/span> <span style=\"color: #0000ff\">var<\/span> i =<span style=\"color: #000000\"> self.particles.length;\n<\/span><span style=\"color: #008080\">175<\/span> <span style=\"color: #0000ff\">while<\/span>(i--<span style=\"color: #000000\">){\n<\/span><span style=\"color: #008080\">176<\/span> <span style=\"color: #0000ff\">var<\/span> p =<span style=\"color: #000000\"> self.particles[i];\n<\/span><span style=\"color: #008080\">177<\/span> <span style=\"color: #0000ff\">var<\/span> radians = p.angle * Math.PI \/ 180<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">178<\/span> <span style=\"color: #0000ff\">var<\/span> vx = Math.cos(radians) *<span style=\"color: #000000\"> p.speed;\n<\/span><span style=\"color: #008080\">179<\/span> <span style=\"color: #0000ff\">var<\/span> vy = Math.sin(radians) *<span style=\"color: #000000\"> p.speed;\n<\/span><span style=\"color: #008080\">180<\/span> p.speed *=<span style=\"color: #000000\"> p.friction;\n<\/span><span style=\"color: #008080\">181<\/span> \n<span style=\"color: #008080\">182<\/span> p.coordLast[2].x = p.coordLast[1<span style=\"color: #000000\">].x;\n<\/span><span style=\"color: #008080\">183<\/span> p.coordLast[2].y = p.coordLast[1<span style=\"color: #000000\">].y;\n<\/span><span style=\"color: #008080\">184<\/span> p.coordLast[1].x = p.coordLast[0<span style=\"color: #000000\">].x;\n<\/span><span style=\"color: #008080\">185<\/span> p.coordLast[1].y = p.coordLast[0<span style=\"color: #000000\">].y;\n<\/span><span style=\"color: #008080\">186<\/span> p.coordLast[0].x =<span style=\"color: #000000\"> p.x;\n<\/span><span style=\"color: #008080\">187<\/span> p.coordLast[0].y =<span style=\"color: #000000\"> p.y;\n<\/span><span style=\"color: #008080\">188<\/span> \n<span style=\"color: #008080\">189<\/span> p.x +=<span style=\"color: #000000\"> vx;\n<\/span><span style=\"color: #008080\">190<\/span> p.y +=<span style=\"color: #000000\"> vy;\n<\/span><span style=\"color: #008080\">191<\/span> p.y +=<span style=\"color: #000000\"> p.gravity;\n<\/span><span style=\"color: #008080\">192<\/span> \n<span style=\"color: #008080\">193<\/span> p.angle +=<span style=\"color: #000000\"> p.wind;\n<\/span><span style=\"color: #008080\">194<\/span> p.alpha -=<span style=\"color: #000000\"> p.decay;\n<\/span><span style=\"color: #008080\">195<\/span> \n<span style=\"color: #008080\">196<\/span> <span style=\"color: #0000ff\">if<\/span>(!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><span style=\"color: #008080\">197<\/span> self.particles.splice(i, 1<span style=\"color: #000000\">);\n<\/span><span style=\"color: #008080\">198<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\">199<\/span> <span style=\"color: #000000\"> };\n<\/span><span style=\"color: #008080\">200<\/span> <span style=\"color: #000000\"> };\n<\/span><span style=\"color: #008080\">201<\/span> \n<span style=\"color: #008080\">202<\/span> self.drawParticles = <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\">(){\n<\/span><span style=\"color: #008080\">203<\/span> <span style=\"color: #0000ff\">var<\/span> i =<span style=\"color: #000000\"> self.particles.length;\n<\/span><span style=\"color: #008080\">204<\/span> <span style=\"color: #0000ff\">while<\/span>(i--<span style=\"color: #000000\">){\n<\/span><span style=\"color: #008080\">205<\/span> <span style=\"color: #0000ff\">var<\/span> p =<span style=\"color: #000000\"> self.particles[i];\n<\/span><span style=\"color: #008080\">206<\/span> \n<span style=\"color: #008080\">207<\/span> <span style=\"color: #0000ff\">var<\/span> coordRand = (rand(1,3)-1<span style=\"color: #000000\">);\n<\/span><span style=\"color: #008080\">208<\/span> <span style=\"color: #000000\"> self.ctx.beginPath();\n<\/span><span style=\"color: #008080\">209<\/span> <span style=\"color: #000000\"> self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y));\n<\/span><span style=\"color: #008080\">210<\/span> <span style=\"color: #000000\"> self.ctx.lineTo(Math.round(p.x), Math.round(p.y));\n<\/span><span style=\"color: #008080\">211<\/span> <span style=\"color: #000000\"> self.ctx.closePath();\n<\/span><span style=\"color: #008080\">212<\/span> self.ctx.strokeStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')'<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">213<\/span> <span style=\"color: #000000\"> self.ctx.stroke();\n<\/span><span style=\"color: #008080\">214<\/span> \n<span style=\"color: #008080\">215<\/span> <span style=\"color: #0000ff\">if<\/span>(self.flickerDensity > 0<span style=\"color: #000000\">){\n<\/span><span style=\"color: #008080\">216<\/span> <span style=\"color: #0000ff\">var<\/span> inverseDensity = 50 -<span style=\"color: #000000\"> self.flickerDensity;\n<\/span><span style=\"color: #008080\">217<\/span> <span style=\"color: #0000ff\">if<\/span>(rand(0, inverseDensity) ===<span style=\"color: #000000\"> inverseDensity){\n<\/span><span style=\"color: #008080\">218<\/span> <span style=\"color: #000000\"> self.ctx.beginPath();\n<\/span><span style=\"color: #008080\">219<\/span> 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> <span style=\"color: #000000\"> self.ctx.closePath();\n<\/span><span style=\"color: #008080\">221<\/span> <span style=\"color: #0000ff\">var<\/span> randAlpha = rand(50,100)\/100;\n<span style=\"color: #008080\">222<\/span> self.ctx.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+randAlpha+')'<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">223<\/span> <span style=\"color: #000000\"> self.ctx.fill();\n<\/span><span style=\"color: #008080\">224<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\">225<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\">226<\/span> <span style=\"color: #000000\"> };\n<\/span><span style=\"color: #008080\">227<\/span> <span style=\"color: #000000\"> };\n<\/span><span style=\"color: #008080\">228<\/span> \n<span style=\"color: #008080\">229<\/span> \n<span style=\"color: #008080\">230<\/span> self.createFireworks = <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\">(startX, startY, targetX, targetY){\n<\/span><span style=\"color: #008080\">231<\/span> <span style=\"color: #0000ff\">var<\/span> newFirework =<span style=\"color: #000000\"> {\n<\/span><span style=\"color: #008080\">232<\/span> <span style=\"color: #000000\"> x: startX,\n<\/span><span style=\"color: #008080\">233<\/span> <span style=\"color: #000000\"> y: startY,\n<\/span><span style=\"color: #008080\">234<\/span> <span style=\"color: #000000\"> startX: startX,\n<\/span><span style=\"color: #008080\">235<\/span> <span style=\"color: #000000\"> startY: startY,\n<\/span><span style=\"color: #008080\">236<\/span> hitX: <span style=\"color: #0000ff\">false<\/span><span style=\"color: #000000\">,\n<\/span><span style=\"color: #008080\">237<\/span> hitY: <span style=\"color: #0000ff\">false<\/span><span style=\"color: #000000\">,\n<\/span><span style=\"color: #008080\">238<\/span> <span style=\"color: #000000\"> coordLast: [\n<\/span><span style=\"color: #008080\">239<\/span> <span style=\"color: #000000\"> {x: startX, y: startY},\n<\/span><span style=\"color: #008080\">240<\/span> <span style=\"color: #000000\"> {x: startX, y: startY},\n<\/span><span style=\"color: #008080\">241<\/span> <span style=\"color: #000000\"> {x: startX, y: startY}\n<\/span><span style=\"color: #008080\">242<\/span> <span style=\"color: #000000\"> ],\n<\/span><span style=\"color: #008080\">243<\/span> <span style=\"color: #000000\"> targetX: targetX,\n<\/span><span style=\"color: #008080\">244<\/span> <span style=\"color: #000000\"> targetY: targetY,\n<\/span><span style=\"color: #008080\">245<\/span> <span style=\"color: #000000\"> speed: self.fworkSpeed,\n<\/span><span style=\"color: #008080\">246<\/span> angle: Math.atan2(targetY - startY, targetX -<span style=\"color: #000000\"> startX),\n<\/span><span style=\"color: #008080\">247<\/span> shockwaveAngle: Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI\/180)),\n<span style=\"color: #008080\">248<\/span> acceleration: self.fworkAccel\/100,\n<span style=\"color: #008080\">249<\/span> <span style=\"color: #000000\"> hue: self.currentHue,\n<\/span><span style=\"color: #008080\">250<\/span> brightness: rand(50, 80<span style=\"color: #000000\">),\n<\/span><span style=\"color: #008080\">251<\/span> alpha: rand(50,100)\/100,\n<span style=\"color: #008080\">252<\/span> <span style=\"color: #000000\"> lineWidth: self.lineWidth\n<\/span><span style=\"color: #008080\">253<\/span> <span style=\"color: #000000\"> };\n<\/span><span style=\"color: #008080\">254<\/span> <span style=\"color: #000000\"> self.fireworks.push(newFirework);\n<\/span><span style=\"color: #008080\">255<\/span> \n<span style=\"color: #008080\">256<\/span> <span style=\"color: #000000\"> };\n<\/span><span style=\"color: #008080\">257<\/span> \n<span style=\"color: #008080\">258<\/span> \n<span style=\"color: #008080\">259<\/span> self.updateFireworks = <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\">(){\n<\/span><span style=\"color: #008080\">260<\/span> <span style=\"color: #0000ff\">var<\/span> i =<span style=\"color: #000000\"> self.fireworks.length;\n<\/span><span style=\"color: #008080\">261<\/span> \n<span style=\"color: #008080\">262<\/span> <span style=\"color: #0000ff\">while<\/span>(i--<span style=\"color: #000000\">){\n<\/span><span style=\"color: #008080\">263<\/span> <span style=\"color: #0000ff\">var<\/span> f =<span style=\"color: #000000\"> self.fireworks[i];\n<\/span><span style=\"color: #008080\">264<\/span> self.ctx.lineWidth =<span style=\"color: #000000\"> f.lineWidth;\n<\/span><span style=\"color: #008080\">265<\/span> \n<span style=\"color: #008080\">266<\/span> vx = Math.cos(f.angle) *<span style=\"color: #000000\"> f.speed,\n<\/span><span style=\"color: #008080\">267<\/span> vy = Math.sin(f.angle) *<span style=\"color: #000000\"> f.speed;\n<\/span><span style=\"color: #008080\">268<\/span> f.speed *= 1 +<span style=\"color: #000000\"> f.acceleration;\n<\/span><span style=\"color: #008080\">269<\/span> f.coordLast[2].x = f.coordLast[1<span style=\"color: #000000\">].x;\n<\/span><span style=\"color: #008080\">270<\/span> f.coordLast[2].y = f.coordLast[1<span style=\"color: #000000\">].y;\n<\/span><span style=\"color: #008080\">271<\/span> f.coordLast[1].x = f.coordLast[0<span style=\"color: #000000\">].x;\n<\/span><span style=\"color: #008080\">272<\/span> f.coordLast[1].y = f.coordLast[0<span style=\"color: #000000\">].y;\n<\/span><span style=\"color: #008080\">273<\/span> f.coordLast[0].x =<span style=\"color: #000000\"> f.x;\n<\/span><span style=\"color: #008080\">274<\/span> f.coordLast[0].y =<span style=\"color: #000000\"> f.y;\n<\/span><span style=\"color: #008080\">275<\/span> \n<span style=\"color: #008080\">276<\/span> <span style=\"color: #0000ff\">if<\/span>(f.startX >=<span style=\"color: #000000\"> f.targetX){\n<\/span><span style=\"color: #008080\">277<\/span> <span style=\"color: #0000ff\">if<\/span>(f.x + vx <=<span style=\"color: #000000\"> f.targetX){\n<\/span><span style=\"color: #008080\">278<\/span> f.x =<span style=\"color: #000000\"> f.targetX;\n<\/span><span style=\"color: #008080\">279<\/span> f.hitX = <span style=\"color: #0000ff\">true<\/span><span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">280<\/span> } <span style=\"color: #0000ff\">else<\/span><span style=\"color: #000000\"> {\n<\/span><span style=\"color: #008080\">281<\/span> f.x +=<span style=\"color: #000000\"> vx;\n<\/span><span style=\"color: #008080\">282<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\">283<\/span> } <span style=\"color: #0000ff\">else<\/span><span style=\"color: #000000\"> {\n<\/span><span style=\"color: #008080\">284<\/span> <span style=\"color: #0000ff\">if<\/span>(f.x + vx >=<span style=\"color: #000000\"> f.targetX){\n<\/span><span style=\"color: #008080\">285<\/span> f.x =<span style=\"color: #000000\"> f.targetX;\n<\/span><span style=\"color: #008080\">286<\/span> f.hitX = <span style=\"color: #0000ff\">true<\/span><span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">287<\/span> } <span style=\"color: #0000ff\">else<\/span><span style=\"color: #000000\"> {\n<\/span><span style=\"color: #008080\">288<\/span> f.x +=<span style=\"color: #000000\"> vx;\n<\/span><span style=\"color: #008080\">289<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\">290<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\">291<\/span> \n<span style=\"color: #008080\">292<\/span> <span style=\"color: #0000ff\">if<\/span>(f.startY >=<span style=\"color: #000000\"> f.targetY){\n<\/span><span style=\"color: #008080\">293<\/span> <span style=\"color: #0000ff\">if<\/span>(f.y + vy <=<span style=\"color: #000000\"> f.targetY){\n<\/span><span style=\"color: #008080\">294<\/span> f.y =<span style=\"color: #000000\"> f.targetY;\n<\/span><span style=\"color: #008080\">295<\/span> f.hitY = <span style=\"color: #0000ff\">true<\/span><span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">296<\/span> } <span style=\"color: #0000ff\">else<\/span><span style=\"color: #000000\"> {\n<\/span><span style=\"color: #008080\">297<\/span> f.y +=<span style=\"color: #000000\"> vy;\n<\/span><span style=\"color: #008080\">298<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\">299<\/span> } <span style=\"color: #0000ff\">else<\/span><span style=\"color: #000000\"> {\n<\/span><span style=\"color: #008080\">300<\/span> <span style=\"color: #0000ff\">if<\/span>(f.y + vy >=<span style=\"color: #000000\"> f.targetY){\n<\/span><span style=\"color: #008080\">301<\/span> f.y =<span style=\"color: #000000\"> f.targetY;\n<\/span><span style=\"color: #008080\">302<\/span> f.hitY = <span style=\"color: #0000ff\">true<\/span><span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">303<\/span> } <span style=\"color: #0000ff\">else<\/span><span style=\"color: #000000\"> {\n<\/span><span style=\"color: #008080\">304<\/span> f.y +=<span style=\"color: #000000\"> vy;\n<\/span><span style=\"color: #008080\">305<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\">306<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\">307<\/span> \n<span style=\"color: #008080\">308<\/span> <span style=\"color: #0000ff\">if<\/span>(f.hitX &&<span style=\"color: #000000\"> f.hitY){\n<\/span><span style=\"color: #008080\">309<\/span> <span style=\"color: #000000\"> self.createParticles(f.targetX, f.targetY, f.hue);\n<\/span><span style=\"color: #008080\">310<\/span> self.fireworks.splice(i, 1<span style=\"color: #000000\">);\n<\/span><span style=\"color: #008080\">311<\/span> \n<span style=\"color: #008080\">312<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\">313<\/span> <span style=\"color: #000000\"> };\n<\/span><span style=\"color: #008080\">314<\/span> <span style=\"color: #000000\"> };\n<\/span><span style=\"color: #008080\">315<\/span> \n<span style=\"color: #008080\">316<\/span> self.drawFireworks = <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\">(){\n<\/span><span style=\"color: #008080\">317<\/span> <span style=\"color: #0000ff\">var<\/span> i =<span style=\"color: #000000\"> self.fireworks.length;\n<\/span><span style=\"color: #008080\">318<\/span> self.ctx.globalCompositeOperation = 'lighter'<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">319<\/span> <span style=\"color: #0000ff\">while<\/span>(i--<span style=\"color: #000000\">){\n<\/span><span style=\"color: #008080\">320<\/span> <span style=\"color: #0000ff\">var<\/span> f =<span style=\"color: #000000\"> self.fireworks[i];\n<\/span><span style=\"color: #008080\">321<\/span> self.ctx.lineWidth =<span style=\"color: #000000\"> f.lineWidth;\n<\/span><span style=\"color: #008080\">322<\/span> \n<span style=\"color: #008080\">323<\/span> <span style=\"color: #0000ff\">var<\/span> coordRand = (rand(1,3)-1<span style=\"color: #000000\">);\n<\/span><span style=\"color: #008080\">324<\/span> <span style=\"color: #000000\"> self.ctx.beginPath();\n<\/span><span style=\"color: #008080\">325<\/span> <span style=\"color: #000000\"> self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));\n<\/span><span style=\"color: #008080\">326<\/span> <span style=\"color: #000000\"> self.ctx.lineTo(Math.round(f.x), Math.round(f.y));\n<\/span><span style=\"color: #008080\">327<\/span> <span style=\"color: #000000\"> self.ctx.closePath();\n<\/span><span style=\"color: #008080\">328<\/span> self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+f.alpha+')'<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">329<\/span> <span style=\"color: #000000\"> self.ctx.stroke();\n<\/span><span style=\"color: #008080\">330<\/span> \n<span style=\"color: #008080\">331<\/span> <span style=\"color: #0000ff\">if<\/span><span style=\"color: #000000\">(self.showTarget){\n<\/span><span style=\"color: #008080\">332<\/span> <span style=\"color: #000000\"> self.ctx.save();\n<\/span><span style=\"color: #008080\">333<\/span> <span style=\"color: #000000\"> self.ctx.beginPath();\n<\/span><span style=\"color: #008080\">334<\/span> self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, <span style=\"color: #0000ff\">false<\/span><span style=\"color: #000000\">)\n<\/span><span style=\"color: #008080\">335<\/span> <span style=\"color: #000000\"> self.ctx.closePath();\n<\/span><span style=\"color: #008080\">336<\/span> self.ctx.lineWidth = 1<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">337<\/span> <span style=\"color: #000000\"> self.ctx.stroke();\n<\/span><span style=\"color: #008080\">338<\/span> <span style=\"color: #000000\"> self.ctx.restore();\n<\/span><span style=\"color: #008080\">339<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\">340<\/span> \n<span style=\"color: #008080\">341<\/span> <span style=\"color: #0000ff\">if<\/span><span style=\"color: #000000\">(self.showShockwave){\n<\/span><span style=\"color: #008080\">342<\/span> <span style=\"color: #000000\"> self.ctx.save();\n<\/span><span style=\"color: #008080\">343<\/span> <span style=\"color: #000000\"> self.ctx.translate(Math.round(f.x), Math.round(f.y));\n<\/span><span style=\"color: #008080\">344<\/span> <span style=\"color: #000000\"> self.ctx.rotate(f.shockwaveAngle);\n<\/span><span style=\"color: #008080\">345<\/span> <span style=\"color: #000000\"> self.ctx.beginPath();\n<\/span><span style=\"color: #008080\">346<\/span> self.ctx.arc(0, 0, 1*(f.speed\/5), 0, Math.PI, true);\n<span style=\"color: #008080\">347<\/span> self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+rand(25, 60)\/100+')';\n<span style=\"color: #008080\">348<\/span> self.ctx.lineWidth =<span style=\"color: #000000\"> f.lineWidth;\n<\/span><span style=\"color: #008080\">349<\/span> <span style=\"color: #000000\"> self.ctx.stroke();\n<\/span><span style=\"color: #008080\">350<\/span> <span style=\"color: #000000\"> self.ctx.restore();\n<\/span><span style=\"color: #008080\">351<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\">352<\/span> <span style=\"color: #000000\"> };\n<\/span><span style=\"color: #008080\">353<\/span> <span style=\"color: #000000\"> };\n<\/span><span style=\"color: #008080\">354<\/span> \n<span style=\"color: #008080\">355<\/span> self.bindEvents = <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\">(){\n<\/span><span style=\"color: #008080\">356<\/span> $(window).on('resize', <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\">(){\n<\/span><span style=\"color: #008080\">357<\/span> <span style=\"color: #000000\"> clearTimeout(self.timeout);\n<\/span><span style=\"color: #008080\">358<\/span> self.timeout = setTimeout(<span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\">() {\n<\/span><span style=\"color: #008080\">359<\/span> self.canvas.width = self.cw =<span style=\"color: #000000\"> $(window).innerWidth();\n<\/span><span style=\"color: #008080\">360<\/span> self.canvas.height = self.ch =<span style=\"color: #000000\"> $(window).innerHeight();\n<\/span><span style=\"color: #008080\">361<\/span> self.ctx.lineCap = 'round'<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">362<\/span> self.ctx.lineJoin = 'round'<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">363<\/span> }, 100<span style=\"color: #000000\">);\n<\/span><span style=\"color: #008080\">364<\/span> <span style=\"color: #000000\"> });\n<\/span><span style=\"color: #008080\">365<\/span> \n<span style=\"color: #008080\">366<\/span> $(self.canvas).on('mousedown', <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\">(e){\n<\/span><span style=\"color: #008080\">367<\/span> self.mx = e.pageX -<span style=\"color: #000000\"> self.canvas.offsetLeft;\n<\/span><span style=\"color: #008080\">368<\/span> self.my = e.pageY -<span style=\"color: #000000\"> self.canvas.offsetTop;\n<\/span><span style=\"color: #008080\">369<\/span> self.currentHue =<span style=\"color: #000000\"> rand(self.hueMin, self.hueMax);\n<\/span><span style=\"color: #008080\">370<\/span> self.createFireworks(self.cw\/2, self.ch, self.mx, self.my);\n<span style=\"color: #008080\">371<\/span> \n<span style=\"color: #008080\">372<\/span> $(self.canvas).on('mousemove.fireworks', <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\">(e){\n<\/span><span style=\"color: #008080\">373<\/span> self.mx = e.pageX -<span style=\"color: #000000\"> self.canvas.offsetLeft;\n<\/span><span style=\"color: #008080\">374<\/span> self.my = e.pageY -<span style=\"color: #000000\"> self.canvas.offsetTop;\n<\/span><span style=\"color: #008080\">375<\/span> self.currentHue =<span style=\"color: #000000\"> rand(self.hueMin, self.hueMax);\n<\/span><span style=\"color: #008080\">376<\/span> self.createFireworks(self.cw\/2, self.ch, self.mx, self.my);\n<span style=\"color: #008080\">377<\/span> <span style=\"color: #000000\"> });\n<\/span><span style=\"color: #008080\">378<\/span> <span style=\"color: #000000\"> });\n<\/span><span style=\"color: #008080\">379<\/span> \n<span style=\"color: #008080\">380<\/span> $(self.canvas).on('mouseup', <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\">(e){\n<\/span><span style=\"color: #008080\">381<\/span> $(self.canvas).off('mousemove.fireworks'<span style=\"color: #000000\">);\n<\/span><span style=\"color: #008080\">382<\/span> <span style=\"color: #000000\"> });\n<\/span><span style=\"color: #008080\">383<\/span> \n<span style=\"color: #008080\">384<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\">385<\/span> \n<span style=\"color: #008080\">386<\/span> self.clear = <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\">(){\n<\/span><span style=\"color: #008080\">387<\/span> self.particles =<span style=\"color: #000000\"> [];\n<\/span><span style=\"color: #008080\">388<\/span> self.fireworks =<span style=\"color: #000000\"> [];\n<\/span><span style=\"color: #008080\">389<\/span> self.ctx.clearRect(0, 0<span style=\"color: #000000\">, self.cw, self.ch);\n<\/span><span style=\"color: #008080\">390<\/span> <span style=\"color: #000000\"> };\n<\/span><span style=\"color: #008080\">391<\/span> \n<span style=\"color: #008080\">392<\/span> \n<span style=\"color: #008080\">393<\/span> self.canvasLoop = <span style=\"color: #0000ff\">function<\/span><span style=\"color: #000000\">(){\n<\/span><span style=\"color: #008080\">394<\/span> <span style=\"color: #000000\"> requestAnimFrame(self.canvasLoop, self.canvas);\n<\/span><span style=\"color: #008080\">395<\/span> self.ctx.globalCompositeOperation = 'destination-out'<span style=\"color: #000000\">;\n<\/span><span style=\"color: #008080\">396<\/span> self.ctx.fillStyle = 'rgba(0,0,0,'+self.clearAlpha\/100+')';\n<span style=\"color: #008080\">397<\/span> self.ctx.fillRect(0,0<span style=\"color: #000000\">,self.cw,self.ch);\n<\/span><span style=\"color: #008080\">398<\/span> <span style=\"color: #000000\"> self.updateFireworks();\n<\/span><span style=\"color: #008080\">399<\/span> <span style=\"color: #000000\"> self.updateParticles();\n<\/span><span style=\"color: #008080\">400<\/span> <span style=\"color: #000000\"> self.drawFireworks();\n<\/span><span style=\"color: #008080\">401<\/span> <span style=\"color: #000000\"> self.drawParticles();\n<\/span><span style=\"color: #008080\">402<\/span> \n<span style=\"color: #008080\">403<\/span> <span style=\"color: #000000\"> };\n<\/span><span style=\"color: #008080\">404<\/span> \n<span style=\"color: #008080\">405<\/span> <span style=\"color: #000000\"> self.init();\n<\/span><span style=\"color: #008080\">406<\/span> \n<span style=\"color: #008080\">407<\/span> <span style=\"color: #000000\"> }\n<\/span><span style=\"color: #008080\">408<\/span> <span style=\"color: #0000ff\">var<\/span> fworks = <span style=\"color: #0000ff\">new<\/span><span style=\"color: #000000\"> Fireworks();\n<\/span><span style=\"color: #008080\">409<\/span> \n<span style=\"color: #008080\">410<\/span> <span style=\"color: #000000\"> });\n<\/span><span style=\"color: #008080\">411<\/span> \n<span style=\"color: #008080\">412<\/span> <\/script>\n<span style=\"color: #008080\">413<\/span> \n<span style=\"color: #008080\">414<\/span> <\/body>\n<span style=\"color: #008080\">415<\/span> <\/html><\/pre>\n<\/div>\n<p> Liebe Internetnutzer! Da ich einige Dinge nicht verstehe, hinterlassen Sie einfach eine Nachricht! Ich werde zu meinem ehemaligen Lehrer gehen und Ask fragen, auch wenn er schon lange im Ruhestand ist!!<\/p>"}</script><script type="application/ld+json"> [ { "@context":"https://schema.org", "@type":"BreadcrumbList", "itemListElement":[ { "@type":"ListItem", "position":1, "item":{"@id":"http://m.php.cn/de/", "name":"Heim"} } ,{ "@type":"ListItem", "position":2, "item":{"@id":"http://m.php.cn/de/article.html", "name":"Technische Artikel"} } ,{ "@type":"ListItem", "position":3, "item":{"@id":"http://m.php.cn/web-designer.html", "name":"Web-Frontend"} } ,{ "@type":"ListItem", "position":4, "item":{"@id":"http://m.php.cn/de/faq/369620.html", "name":"JQuery und HTML+CSS implementieren einen Mausklick, um ein Feuerwerk auszulösen"} } ] } ] </script></head><body><div class="bodyBg"><link rel="stylesheet" type="text/css" href="/static/csshwm/m_stylehw.css"><header><div class="head"><div class="haed_left"><div class="haed_logo"><a href="http://m.php.cn/de/" title="Chinesische PHP-Website" class="haed_logo_a"><img src="/static/imghwm/logo.png" alt="Chinesische PHP-Website" 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('de')"/><a onclick="searchs('de')" href="javascript:;" title="suchen"><img onerror="this.onerror=''; this.src='static/imghwm/default1.png'" src="/static/imghwm/find.png" alt="suchen"></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">Gemeinschaft<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="http://m.php.cn/de/article.html" title="Artikel">Artikel</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/de/faq/zt" title="Themen">Themen</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/de/wenda.html" title="Fragen und Antworten">Fragen und Antworten</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">Lernen<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="http://m.php.cn/de/course.html" title="Kurs">Kurs</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/de/dic/" title="Programmierwörterbuch">Programmierwörterbuch</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-Bibliothek<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="http://m.php.cn/toolset/development-tools" title="Entwicklungswerkzeuge">Entwicklungswerkzeuge</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/toolset/website-source-code" title="Quellcode der Website">Quellcode der Website</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/de/toolset/php-libraries" title="PHP-Bibliotheken">PHP-Bibliotheken</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/de/toolset/js-special-effects" title="JS-Spezialeffekte">JS-Spezialeffekte</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/de/toolset/website-materials" title="Website-Materialien">Website-Materialien</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/de/toolset/extension-plug-ins" title="Erweiterungs-Plug-Ins">Erweiterungs-Plug-Ins</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">Freizeit<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="http://m.php.cn/de/game" title="Spiel-Download">Spiel-Download</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="http://m.php.cn/de/mobile-game-tutorial/" title="Spiel-Tutorials">Spiel-Tutorials</a></div></li></ul></li><li class="layui-menu-item-divider"></li></ul></div><!-- <div class="m_menu_button">--><!-- <a href="javascript:;" title="singup">Create an account</a>--><!-- </div>--><div class="m_menu_button m_menu_button_login"><a href="http://m.php.cn/de/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">Deutsch<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:setlang('en');" 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:;" 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><div class="bodyMain"><!--所在位置--><div class="nphpSize"><div class="nphpSizeIn"><b></b><p><a href="http://m.php.cn/de/" title="Heim" class="bBlack">Heim</a>  >  <a href="http://m.php.cn/de/article.html" title="Artikel" class="bBlack">Artikel</a>  >  <a href="http://m.php.cn/web-designer.html" class="cBlack">Web-Frontend</a>  >  JQuery und HTML+CSS implementieren einen Mausklick, um ein Feuerwerk auszulösen</p><!-- <p><a href="http://m.php.cn/de/article.html" class="cBlack">Technische Artikel</a>  >  <a href="http://m.php.cn/web-designer.html" class="cBlack">Web-Frontend</a> > <a href="http://m.php.cn/de/js-tutorial.html" class="cBlack">js-Tutorial</a> > JQuery und HTML+CSS implementieren einen Mausklick, um ein Feuerwerk auszulösen</p> --><div class="clear"></div></div></div><div class="nphpQianBox"><div class="nphpQianTitle"><h1>JQuery und HTML+CSS implementieren einen Mausklick, um ein Feuerwerk auszulösen</h1><div class="nphpQianTitleIn"><span><img data-src="https://img.php.cn/upload/avatar/000/000/001/6251028808086368.png" alt="PHP中文网" class="lazyload" src="/static/front/mobimages/moren/moren.png" /></span><dl><dt><em>PHP中文网</em><i class='bg1'>Original</i><div class="clear"></div></dt><dd><em>2017-06-20 09:36:00</em><i>1517Durchsuche</i><div class="clear"></div></dd></dl><div class="clear"></div></div></div><div class="nphpQianCont wenda-list"><div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><span style="color: #008080"> 1</span> <!DOCTYPE html> <span style="color: #008080"> 2</span> <html> <span style="color: #008080"> 3</span> <head><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</span> html,body{height:100%;margin:0;padding:0<span style="color: #000000">} </span><span style="color: #008080"> 8</span> ul,li{text-indent:0;text-decoration:none;margin:0;padding:0<span style="color: #000000">} </span><span style="color: #008080"> 9</span> img{border:0<span style="color: #000000">} </span><span style="color: #008080"> 10</span> body{background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif} <span style="color: #008080"> 11</span> canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20<span style="color: #000000">} </span><span style="color: #008080"> 12</span> *<span style="color: #000000">{ </span><span style="color: #008080"> 13</span> <span style="color: #000000"> margin: 0px; </span><span style="color: #008080"> 14</span> <span style="color: #000000"> padding: 0px; </span><span style="color: #008080"> 15</span> <span style="color: #000000"> } </span><span style="color: #008080"> 16</span> <span style="color: #000000"> #bg_Img{ </span><span style="color: #008080"> 17</span> <span style="color: #000000"> width: 1920px; </span><span style="color: #008080"> 18</span> <span style="color: #000000"> height: 1500px; </span><span style="color: #008080"> 19</span> <span style="color: #000000"> border: 1px solid transparent; </span><span style="color: #008080"> 20</span> background: url("start.gif"<span style="color: #000000">) repeat; </span><span style="color: #008080"> 21</span> text-<span style="color: #000000">align: center; </span><span style="color: #008080"> 22</span> <span style="color: #000000"> } </span><span style="color: #008080"> 23</span> <span style="color: #000000"> ul{ </span><span style="color: #008080"> 24</span> <span style="color: #000000"> width: 5555px; </span><span style="color: #008080"> 25</span> <span style="color: #000000"> height: 200px; </span><span style="color: #008080"> 26</span> <span style="color: #000000"> } </span><span style="color: #008080"> 27</span> <span style="color: #000000"> li{ </span><span style="color: #008080"> 28</span> font: 120px/190px "楷体"; <span style="color: #008080"> 29</span> <span style="color: #000000"> color: white; </span><span style="color: #008080"> 30</span> text-<span style="color: #000000">shadow: 5px 10px 10px 10px; </span><span style="color: #008080"> 31</span> list-<span style="color: #000000">style: none; </span><span style="color: #008080"> 32</span> <span style="color: #0000ff">float</span><span style="color: #000000">: left; </span><span style="color: #008080"> 33</span> <span style="color: #000000"> display: none; </span><span style="color: #008080"> 34</span> <span style="color: #000000"> } </span><span style="color: #008080"> 35</span> <span style="color: #000000"> #text_bd{ </span><span style="color: #008080"> 36</span> <span style="color: #000000"> width: 600px; </span><span style="color: #008080"> 37</span> <span style="color: #000000"> height: 200px; </span><span style="color: #008080"> 38</span> <span style="color: #000000"> border: 5px solid transparent; </span><span style="color: #008080"> 39</span> margin-<span style="color: #000000">left: 200px; </span><span style="color: #008080"> 40</span> <span style="color: #000000"> } </span><span style="color: #008080"> 41</span> <span style="color: #000000"> #mouse_click{ </span><span style="color: #008080"> 42</span> <span style="color: #000000"> margin: 0px auto; </span><span style="color: #008080"> 43</span> text-<span style="color: #000000">align: center; </span><span style="color: #008080"> 44</span> <span style="color: #000000"> color: white; </span><span style="color: #008080"> 45</span> <span style="color: #000000"> } </span><span style="color: #008080"> 46</span> </style> <span style="color: #008080"> 47</span> <span style="color: #008080"> 48</span> </head> <span style="color: #008080"> 49</span> <body> <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> <span style="color: #0000ff">var</span> aLi=document.querySelectorAll("li"<span style="color: #000000">); </span><span style="color: #008080"> 69</span> setInterval(a,1000<span style="color: #000000">); </span><span style="color: #008080"> 70</span> setInterval(b,2000<span style="color: #000000">); </span><span style="color: #008080"> 71</span> setInterval(c,3000<span style="color: #000000">); </span><span style="color: #008080"> 72</span> setInterval(d,4000<span style="color: #000000">); </span><span style="color: #008080"> 73</span> setInterval(e,5000<span style="color: #000000">); </span><span style="color: #008080"> 74</span> setInterval(f,6000<span style="color: #000000">); </span><span style="color: #008080"> 75</span> setInterval(g,7000<span style="color: #000000">); </span><span style="color: #008080"> 76</span> setInterval(h,8000<span style="color: #000000">); </span><span style="color: #008080"> 77</span> <span style="color: #0000ff">function</span><span style="color: #000000"> a() { </span><span style="color: #008080"> 78</span> aLi[0].style.display = "block" <span style="color: #008080"> 79</span> <span style="color: #000000"> } </span><span style="color: #008080"> 80</span> <span style="color: #0000ff">function</span><span style="color: #000000"> b() { </span><span style="color: #008080"> 81</span> aLi[1].style.display = "block" <span style="color: #008080"> 82</span> <span style="color: #000000"> } </span><span style="color: #008080"> 83</span> <span style="color: #0000ff">function</span><span style="color: #000000"> c() { </span><span style="color: #008080"> 84</span> aLi[2].style.display = "block" <span style="color: #008080"> 85</span> <span style="color: #000000"> } </span><span style="color: #008080"> 86</span> <span style="color: #0000ff">function</span><span style="color: #000000"> d() { </span><span style="color: #008080"> 87</span> aLi[3].style.display = "block" <span style="color: #008080"> 88</span> <span style="color: #000000"> } </span><span style="color: #008080"> 89</span> <span style="color: #0000ff">function</span><span style="color: #000000"> e() { </span><span style="color: #008080"> 90</span> aLi[4].style.display = "block" <span style="color: #008080"> 91</span> <span style="color: #000000"> } </span><span style="color: #008080"> 92</span> <span style="color: #0000ff">function</span><span style="color: #000000"> f() { </span><span style="color: #008080"> 93</span> aLi[5].style.display = "block" <span style="color: #008080"> 94</span> <span style="color: #000000"> } </span><span style="color: #008080"> 95</span> <span style="color: #0000ff">function</span><span style="color: #000000"> g() { </span><span style="color: #008080"> 96</span> aLi[6].style.display = "block" <span style="color: #008080"> 97</span> <span style="color: #000000"> } </span><span style="color: #008080"> 98</span> <span style="color: #0000ff">function</span><span style="color: #000000"> h() { </span><span style="color: #008080"> 99</span> aLi[7].style.display = "block" <span style="color: #008080">100</span> <span style="color: #000000"> } </span><span style="color: #008080">101</span> $(<span style="color: #0000ff">function</span><span style="color: #000000">(){ </span><span style="color: #008080">102</span> <span style="color: #0000ff">var</span> Fireworks = <span style="color: #0000ff">function</span><span style="color: #000000">(){ </span><span style="color: #008080">103</span> <span style="color: #0000ff">var</span> self = <span style="color: #0000ff">this</span><span style="color: #000000">; </span><span style="color: #008080">104</span> <span style="color: #0000ff">var</span> rand = <span style="color: #0000ff">function</span>(rMi, rMa){<span style="color: #0000ff">return</span> ~~((Math.random()*(rMa-rMi+1))+<span style="color: #000000">rMi);} </span><span style="color: #008080">105</span> <span style="color: #0000ff">var</span> hitTest = <span style="color: #0000ff">function</span>(x1, y1, w1, h1, x2, y2, w2, h2){<span style="color: #0000ff">return</span> !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 <<span style="color: #000000"> y1);}; </span><span style="color: #008080">106</span> window.requestAnimFrame=<span style="color: #0000ff">function</span>(){<span style="color: #0000ff">return</span> window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||<span style="color: #0000ff">function</span>(a){window.setTimeout(a,1E3/60)}}(); <span style="color: #008080">107</span> <span style="color: #008080">108</span> self.init = <span style="color: #0000ff">function</span><span style="color: #000000">(){ </span><span style="color: #008080">109</span> self.canvas = document.createElement('canvas'<span style="color: #000000">); </span><span style="color: #008080">110</span> self.canvas.width = self.cw =<span style="color: #000000"> $(window).innerWidth(); </span><span style="color: #008080">111</span> self.canvas.height = self.ch =<span style="color: #000000"> $(window).innerHeight(); </span><span style="color: #008080">112</span> self.particles =<span style="color: #000000"> []; </span><span style="color: #008080">113</span> self.partCount = 150<span style="color: #000000">; </span><span style="color: #008080">114</span> self.fireworks =<span style="color: #000000"> []; </span><span style="color: #008080">115</span> self.mx = self.cw/2; <span style="color: #008080">116</span> self.my = self.ch/2; <span style="color: #008080">117</span> self.currentHue = 30<span style="color: #000000">; </span><span style="color: #008080">118</span> self.partSpeed = 5<span style="color: #000000">; </span><span style="color: #008080">119</span> self.partSpeedVariance = 10<span style="color: #000000">; </span><span style="color: #008080">120</span> self.partWind = 50<span style="color: #000000">; </span><span style="color: #008080">121</span> self.partFriction = 5<span style="color: #000000">; </span><span style="color: #008080">122</span> self.partGravity = 1<span style="color: #000000">; </span><span style="color: #008080">123</span> self.hueMin = 0<span style="color: #000000">; </span><span style="color: #008080">124</span> self.hueMax = 360<span style="color: #000000">; </span><span style="color: #008080">125</span> self.fworkSpeed = 4<span style="color: #000000">; </span><span style="color: #008080">126</span> self.fworkAccel = 10<span style="color: #000000">; </span><span style="color: #008080">127</span> self.hueVariance = 30<span style="color: #000000">; </span><span style="color: #008080">128</span> self.flickerDensity = 25<span style="color: #000000">; </span><span style="color: #008080">129</span> self.showShockwave = <span style="color: #0000ff">true</span><span style="color: #000000">; </span><span style="color: #008080">130</span> self.showTarget = <span style="color: #0000ff">false</span><span style="color: #000000">; </span><span style="color: #008080">131</span> self.clearAlpha = 25<span style="color: #000000">; </span><span style="color: #008080">132</span> <span style="color: #008080">133</span> <span style="color: #000000"> $(document.body).append(self.canvas); </span><span style="color: #008080">134</span> self.ctx = self.canvas.getContext('2d'<span style="color: #000000">); </span><span style="color: #008080">135</span> self.ctx.lineCap = 'round'<span style="color: #000000">; </span><span style="color: #008080">136</span> self.ctx.lineJoin = 'round'<span style="color: #000000">; </span><span style="color: #008080">137</span> self.lineWidth = 1<span style="color: #000000">; </span><span style="color: #008080">138</span> <span style="color: #000000"> self.bindEvents(); </span><span style="color: #008080">139</span> <span style="color: #000000"> self.canvasLoop(); </span><span style="color: #008080">140</span> <span style="color: #008080">141</span> self.canvas.onselectstart = <span style="color: #0000ff">function</span><span style="color: #000000">() { </span><span style="color: #008080">142</span> <span style="color: #0000ff">return</span> <span style="color: #0000ff">false</span><span style="color: #000000">; </span><span style="color: #008080">143</span> <span style="color: #000000"> }; </span><span style="color: #008080">144</span> <span style="color: #000000"> }; </span><span style="color: #008080">145</span> <span style="color: #008080">146</span> self.createParticles = <span style="color: #0000ff">function</span><span style="color: #000000">(x,y, hue){ </span><span style="color: #008080">147</span> <span style="color: #0000ff">var</span> countdown =<span style="color: #000000"> self.partCount; </span><span style="color: #008080">148</span> <span style="color: #0000ff">while</span>(countdown--<span style="color: #000000">){ </span><span style="color: #008080">149</span> <span style="color: #0000ff">var</span> newParticle =<span style="color: #000000"> { </span><span style="color: #008080">150</span> <span style="color: #000000"> x: x, </span><span style="color: #008080">151</span> <span style="color: #000000"> y: y, </span><span style="color: #008080">152</span> <span style="color: #000000"> coordLast: [ </span><span style="color: #008080">153</span> <span style="color: #000000"> {x: x, y: y}, </span><span style="color: #008080">154</span> <span style="color: #000000"> {x: x, y: y}, </span><span style="color: #008080">155</span> <span style="color: #000000"> {x: x, y: y} </span><span style="color: #008080">156</span> <span style="color: #000000"> ], </span><span style="color: #008080">157</span> angle: rand(0, 360<span style="color: #000000">), </span><span style="color: #008080">158</span> speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed +<span style="color: #000000"> self.partSpeedVariance)), </span><span style="color: #008080">159</span> friction: 1 - self.partFriction/100, <span style="color: #008080">160</span> gravity: self.partGravity/2, <span style="color: #008080">161</span> hue: rand(hue-self.hueVariance, hue+<span style="color: #000000">self.hueVariance), </span><span style="color: #008080">162</span> brightness: rand(50, 80<span style="color: #000000">), </span><span style="color: #008080">163</span> alpha: rand(40,100)/100, <span style="color: #008080">164</span> decay: rand(10, 50)/1000, <span style="color: #008080">165</span> wind: (rand(0, self.partWind) - (self.partWind/2))/25<span style="color: #000000">, </span><span style="color: #008080">166</span> <span style="color: #000000"> lineWidth: self.lineWidth </span><span style="color: #008080">167</span> <span style="color: #000000"> }; </span><span style="color: #008080">168</span> <span style="color: #000000"> self.particles.push(newParticle); </span><span style="color: #008080">169</span> <span style="color: #000000"> } </span><span style="color: #008080">170</span> <span style="color: #000000"> }; </span><span style="color: #008080">171</span> <span style="color: #008080">172</span> <span style="color: #008080">173</span> self.updateParticles = <span style="color: #0000ff">function</span><span style="color: #000000">(){ </span><span style="color: #008080">174</span> <span style="color: #0000ff">var</span> i =<span style="color: #000000"> self.particles.length; </span><span style="color: #008080">175</span> <span style="color: #0000ff">while</span>(i--<span style="color: #000000">){ </span><span style="color: #008080">176</span> <span style="color: #0000ff">var</span> p =<span style="color: #000000"> self.particles[i]; </span><span style="color: #008080">177</span> <span style="color: #0000ff">var</span> radians = p.angle * Math.PI / 180<span style="color: #000000">; </span><span style="color: #008080">178</span> <span style="color: #0000ff">var</span> vx = Math.cos(radians) *<span style="color: #000000"> p.speed; </span><span style="color: #008080">179</span> <span style="color: #0000ff">var</span> vy = Math.sin(radians) *<span style="color: #000000"> p.speed; </span><span style="color: #008080">180</span> p.speed *=<span style="color: #000000"> p.friction; </span><span style="color: #008080">181</span> <span style="color: #008080">182</span> p.coordLast[2].x = p.coordLast[1<span style="color: #000000">].x; </span><span style="color: #008080">183</span> p.coordLast[2].y = p.coordLast[1<span style="color: #000000">].y; </span><span style="color: #008080">184</span> p.coordLast[1].x = p.coordLast[0<span style="color: #000000">].x; </span><span style="color: #008080">185</span> p.coordLast[1].y = p.coordLast[0<span style="color: #000000">].y; </span><span style="color: #008080">186</span> p.coordLast[0].x =<span style="color: #000000"> p.x; </span><span style="color: #008080">187</span> p.coordLast[0].y =<span style="color: #000000"> p.y; </span><span style="color: #008080">188</span> <span style="color: #008080">189</span> p.x +=<span style="color: #000000"> vx; </span><span style="color: #008080">190</span> p.y +=<span style="color: #000000"> vy; </span><span style="color: #008080">191</span> p.y +=<span style="color: #000000"> p.gravity; </span><span style="color: #008080">192</span> <span style="color: #008080">193</span> p.angle +=<span style="color: #000000"> p.wind; </span><span style="color: #008080">194</span> p.alpha -=<span style="color: #000000"> p.decay; </span><span style="color: #008080">195</span> <span style="color: #008080">196</span> <span style="color: #0000ff">if</span>(!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><span style="color: #008080">197</span> self.particles.splice(i, 1<span style="color: #000000">); </span><span style="color: #008080">198</span> <span style="color: #000000"> } </span><span style="color: #008080">199</span> <span style="color: #000000"> }; </span><span style="color: #008080">200</span> <span style="color: #000000"> }; </span><span style="color: #008080">201</span> <span style="color: #008080">202</span> self.drawParticles = <span style="color: #0000ff">function</span><span style="color: #000000">(){ </span><span style="color: #008080">203</span> <span style="color: #0000ff">var</span> i =<span style="color: #000000"> self.particles.length; </span><span style="color: #008080">204</span> <span style="color: #0000ff">while</span>(i--<span style="color: #000000">){ </span><span style="color: #008080">205</span> <span style="color: #0000ff">var</span> p =<span style="color: #000000"> self.particles[i]; </span><span style="color: #008080">206</span> <span style="color: #008080">207</span> <span style="color: #0000ff">var</span> coordRand = (rand(1,3)-1<span style="color: #000000">); </span><span style="color: #008080">208</span> <span style="color: #000000"> self.ctx.beginPath(); </span><span style="color: #008080">209</span> <span style="color: #000000"> self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y)); </span><span style="color: #008080">210</span> <span style="color: #000000"> self.ctx.lineTo(Math.round(p.x), Math.round(p.y)); </span><span style="color: #008080">211</span> <span style="color: #000000"> self.ctx.closePath(); </span><span style="color: #008080">212</span> self.ctx.strokeStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')'<span style="color: #000000">; </span><span style="color: #008080">213</span> <span style="color: #000000"> self.ctx.stroke(); </span><span style="color: #008080">214</span> <span style="color: #008080">215</span> <span style="color: #0000ff">if</span>(self.flickerDensity > 0<span style="color: #000000">){ </span><span style="color: #008080">216</span> <span style="color: #0000ff">var</span> inverseDensity = 50 -<span style="color: #000000"> self.flickerDensity; </span><span style="color: #008080">217</span> <span style="color: #0000ff">if</span>(rand(0, inverseDensity) ===<span style="color: #000000"> inverseDensity){ </span><span style="color: #008080">218</span> <span style="color: #000000"> self.ctx.beginPath(); </span><span style="color: #008080">219</span> 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> <span style="color: #000000"> self.ctx.closePath(); </span><span style="color: #008080">221</span> <span style="color: #0000ff">var</span> randAlpha = rand(50,100)/100; <span style="color: #008080">222</span> self.ctx.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+randAlpha+')'<span style="color: #000000">; </span><span style="color: #008080">223</span> <span style="color: #000000"> self.ctx.fill(); </span><span style="color: #008080">224</span> <span style="color: #000000"> } </span><span style="color: #008080">225</span> <span style="color: #000000"> } </span><span style="color: #008080">226</span> <span style="color: #000000"> }; </span><span style="color: #008080">227</span> <span style="color: #000000"> }; </span><span style="color: #008080">228</span> <span style="color: #008080">229</span> <span style="color: #008080">230</span> self.createFireworks = <span style="color: #0000ff">function</span><span style="color: #000000">(startX, startY, targetX, targetY){ </span><span style="color: #008080">231</span> <span style="color: #0000ff">var</span> newFirework =<span style="color: #000000"> { </span><span style="color: #008080">232</span> <span style="color: #000000"> x: startX, </span><span style="color: #008080">233</span> <span style="color: #000000"> y: startY, </span><span style="color: #008080">234</span> <span style="color: #000000"> startX: startX, </span><span style="color: #008080">235</span> <span style="color: #000000"> startY: startY, </span><span style="color: #008080">236</span> hitX: <span style="color: #0000ff">false</span><span style="color: #000000">, </span><span style="color: #008080">237</span> hitY: <span style="color: #0000ff">false</span><span style="color: #000000">, </span><span style="color: #008080">238</span> <span style="color: #000000"> coordLast: [ </span><span style="color: #008080">239</span> <span style="color: #000000"> {x: startX, y: startY}, </span><span style="color: #008080">240</span> <span style="color: #000000"> {x: startX, y: startY}, </span><span style="color: #008080">241</span> <span style="color: #000000"> {x: startX, y: startY} </span><span style="color: #008080">242</span> <span style="color: #000000"> ], </span><span style="color: #008080">243</span> <span style="color: #000000"> targetX: targetX, </span><span style="color: #008080">244</span> <span style="color: #000000"> targetY: targetY, </span><span style="color: #008080">245</span> <span style="color: #000000"> speed: self.fworkSpeed, </span><span style="color: #008080">246</span> angle: Math.atan2(targetY - startY, targetX -<span style="color: #000000"> startX), </span><span style="color: #008080">247</span> shockwaveAngle: Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI/180)), <span style="color: #008080">248</span> acceleration: self.fworkAccel/100, <span style="color: #008080">249</span> <span style="color: #000000"> hue: self.currentHue, </span><span style="color: #008080">250</span> brightness: rand(50, 80<span style="color: #000000">), </span><span style="color: #008080">251</span> alpha: rand(50,100)/100, <span style="color: #008080">252</span> <span style="color: #000000"> lineWidth: self.lineWidth </span><span style="color: #008080">253</span> <span style="color: #000000"> }; </span><span style="color: #008080">254</span> <span style="color: #000000"> self.fireworks.push(newFirework); </span><span style="color: #008080">255</span> <span style="color: #008080">256</span> <span style="color: #000000"> }; </span><span style="color: #008080">257</span> <span style="color: #008080">258</span> <span style="color: #008080">259</span> self.updateFireworks = <span style="color: #0000ff">function</span><span style="color: #000000">(){ </span><span style="color: #008080">260</span> <span style="color: #0000ff">var</span> i =<span style="color: #000000"> self.fireworks.length; </span><span style="color: #008080">261</span> <span style="color: #008080">262</span> <span style="color: #0000ff">while</span>(i--<span style="color: #000000">){ </span><span style="color: #008080">263</span> <span style="color: #0000ff">var</span> f =<span style="color: #000000"> self.fireworks[i]; </span><span style="color: #008080">264</span> self.ctx.lineWidth =<span style="color: #000000"> f.lineWidth; </span><span style="color: #008080">265</span> <span style="color: #008080">266</span> vx = Math.cos(f.angle) *<span style="color: #000000"> f.speed, </span><span style="color: #008080">267</span> vy = Math.sin(f.angle) *<span style="color: #000000"> f.speed; </span><span style="color: #008080">268</span> f.speed *= 1 +<span style="color: #000000"> f.acceleration; </span><span style="color: #008080">269</span> f.coordLast[2].x = f.coordLast[1<span style="color: #000000">].x; </span><span style="color: #008080">270</span> f.coordLast[2].y = f.coordLast[1<span style="color: #000000">].y; </span><span style="color: #008080">271</span> f.coordLast[1].x = f.coordLast[0<span style="color: #000000">].x; </span><span style="color: #008080">272</span> f.coordLast[1].y = f.coordLast[0<span style="color: #000000">].y; </span><span style="color: #008080">273</span> f.coordLast[0].x =<span style="color: #000000"> f.x; </span><span style="color: #008080">274</span> f.coordLast[0].y =<span style="color: #000000"> f.y; </span><span style="color: #008080">275</span> <span style="color: #008080">276</span> <span style="color: #0000ff">if</span>(f.startX >=<span style="color: #000000"> f.targetX){ </span><span style="color: #008080">277</span> <span style="color: #0000ff">if</span>(f.x + vx <=<span style="color: #000000"> f.targetX){ </span><span style="color: #008080">278</span> f.x =<span style="color: #000000"> f.targetX; </span><span style="color: #008080">279</span> f.hitX = <span style="color: #0000ff">true</span><span style="color: #000000">; </span><span style="color: #008080">280</span> } <span style="color: #0000ff">else</span><span style="color: #000000"> { </span><span style="color: #008080">281</span> f.x +=<span style="color: #000000"> vx; </span><span style="color: #008080">282</span> <span style="color: #000000"> } </span><span style="color: #008080">283</span> } <span style="color: #0000ff">else</span><span style="color: #000000"> { </span><span style="color: #008080">284</span> <span style="color: #0000ff">if</span>(f.x + vx >=<span style="color: #000000"> f.targetX){ </span><span style="color: #008080">285</span> f.x =<span style="color: #000000"> f.targetX; </span><span style="color: #008080">286</span> f.hitX = <span style="color: #0000ff">true</span><span style="color: #000000">; </span><span style="color: #008080">287</span> } <span style="color: #0000ff">else</span><span style="color: #000000"> { </span><span style="color: #008080">288</span> f.x +=<span style="color: #000000"> vx; </span><span style="color: #008080">289</span> <span style="color: #000000"> } </span><span style="color: #008080">290</span> <span style="color: #000000"> } </span><span style="color: #008080">291</span> <span style="color: #008080">292</span> <span style="color: #0000ff">if</span>(f.startY >=<span style="color: #000000"> f.targetY){ </span><span style="color: #008080">293</span> <span style="color: #0000ff">if</span>(f.y + vy <=<span style="color: #000000"> f.targetY){ </span><span style="color: #008080">294</span> f.y =<span style="color: #000000"> f.targetY; </span><span style="color: #008080">295</span> f.hitY = <span style="color: #0000ff">true</span><span style="color: #000000">; </span><span style="color: #008080">296</span> } <span style="color: #0000ff">else</span><span style="color: #000000"> { </span><span style="color: #008080">297</span> f.y +=<span style="color: #000000"> vy; </span><span style="color: #008080">298</span> <span style="color: #000000"> } </span><span style="color: #008080">299</span> } <span style="color: #0000ff">else</span><span style="color: #000000"> { </span><span style="color: #008080">300</span> <span style="color: #0000ff">if</span>(f.y + vy >=<span style="color: #000000"> f.targetY){ </span><span style="color: #008080">301</span> f.y =<span style="color: #000000"> f.targetY; </span><span style="color: #008080">302</span> f.hitY = <span style="color: #0000ff">true</span><span style="color: #000000">; </span><span style="color: #008080">303</span> } <span style="color: #0000ff">else</span><span style="color: #000000"> { </span><span style="color: #008080">304</span> f.y +=<span style="color: #000000"> vy; </span><span style="color: #008080">305</span> <span style="color: #000000"> } </span><span style="color: #008080">306</span> <span style="color: #000000"> } </span><span style="color: #008080">307</span> <span style="color: #008080">308</span> <span style="color: #0000ff">if</span>(f.hitX &&<span style="color: #000000"> f.hitY){ </span><span style="color: #008080">309</span> <span style="color: #000000"> self.createParticles(f.targetX, f.targetY, f.hue); </span><span style="color: #008080">310</span> self.fireworks.splice(i, 1<span style="color: #000000">); </span><span style="color: #008080">311</span> <span style="color: #008080">312</span> <span style="color: #000000"> } </span><span style="color: #008080">313</span> <span style="color: #000000"> }; </span><span style="color: #008080">314</span> <span style="color: #000000"> }; </span><span style="color: #008080">315</span> <span style="color: #008080">316</span> self.drawFireworks = <span style="color: #0000ff">function</span><span style="color: #000000">(){ </span><span style="color: #008080">317</span> <span style="color: #0000ff">var</span> i =<span style="color: #000000"> self.fireworks.length; </span><span style="color: #008080">318</span> self.ctx.globalCompositeOperation = 'lighter'<span style="color: #000000">; </span><span style="color: #008080">319</span> <span style="color: #0000ff">while</span>(i--<span style="color: #000000">){ </span><span style="color: #008080">320</span> <span style="color: #0000ff">var</span> f =<span style="color: #000000"> self.fireworks[i]; </span><span style="color: #008080">321</span> self.ctx.lineWidth =<span style="color: #000000"> f.lineWidth; </span><span style="color: #008080">322</span> <span style="color: #008080">323</span> <span style="color: #0000ff">var</span> coordRand = (rand(1,3)-1<span style="color: #000000">); </span><span style="color: #008080">324</span> <span style="color: #000000"> self.ctx.beginPath(); </span><span style="color: #008080">325</span> <span style="color: #000000"> self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y)); </span><span style="color: #008080">326</span> <span style="color: #000000"> self.ctx.lineTo(Math.round(f.x), Math.round(f.y)); </span><span style="color: #008080">327</span> <span style="color: #000000"> self.ctx.closePath(); </span><span style="color: #008080">328</span> self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+f.alpha+')'<span style="color: #000000">; </span><span style="color: #008080">329</span> <span style="color: #000000"> self.ctx.stroke(); </span><span style="color: #008080">330</span> <span style="color: #008080">331</span> <span style="color: #0000ff">if</span><span style="color: #000000">(self.showTarget){ </span><span style="color: #008080">332</span> <span style="color: #000000"> self.ctx.save(); </span><span style="color: #008080">333</span> <span style="color: #000000"> self.ctx.beginPath(); </span><span style="color: #008080">334</span> self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, <span style="color: #0000ff">false</span><span style="color: #000000">) </span><span style="color: #008080">335</span> <span style="color: #000000"> self.ctx.closePath(); </span><span style="color: #008080">336</span> self.ctx.lineWidth = 1<span style="color: #000000">; </span><span style="color: #008080">337</span> <span style="color: #000000"> self.ctx.stroke(); </span><span style="color: #008080">338</span> <span style="color: #000000"> self.ctx.restore(); </span><span style="color: #008080">339</span> <span style="color: #000000"> } </span><span style="color: #008080">340</span> <span style="color: #008080">341</span> <span style="color: #0000ff">if</span><span style="color: #000000">(self.showShockwave){ </span><span style="color: #008080">342</span> <span style="color: #000000"> self.ctx.save(); </span><span style="color: #008080">343</span> <span style="color: #000000"> self.ctx.translate(Math.round(f.x), Math.round(f.y)); </span><span style="color: #008080">344</span> <span style="color: #000000"> self.ctx.rotate(f.shockwaveAngle); </span><span style="color: #008080">345</span> <span style="color: #000000"> self.ctx.beginPath(); </span><span style="color: #008080">346</span> self.ctx.arc(0, 0, 1*(f.speed/5), 0, Math.PI, true); <span style="color: #008080">347</span> self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+rand(25, 60)/100+')'; <span style="color: #008080">348</span> self.ctx.lineWidth =<span style="color: #000000"> f.lineWidth; </span><span style="color: #008080">349</span> <span style="color: #000000"> self.ctx.stroke(); </span><span style="color: #008080">350</span> <span style="color: #000000"> self.ctx.restore(); </span><span style="color: #008080">351</span> <span style="color: #000000"> } </span><span style="color: #008080">352</span> <span style="color: #000000"> }; </span><span style="color: #008080">353</span> <span style="color: #000000"> }; </span><span style="color: #008080">354</span> <span style="color: #008080">355</span> self.bindEvents = <span style="color: #0000ff">function</span><span style="color: #000000">(){ </span><span style="color: #008080">356</span> $(window).on('resize', <span style="color: #0000ff">function</span><span style="color: #000000">(){ </span><span style="color: #008080">357</span> <span style="color: #000000"> clearTimeout(self.timeout); </span><span style="color: #008080">358</span> self.timeout = setTimeout(<span style="color: #0000ff">function</span><span style="color: #000000">() { </span><span style="color: #008080">359</span> self.canvas.width = self.cw =<span style="color: #000000"> $(window).innerWidth(); </span><span style="color: #008080">360</span> self.canvas.height = self.ch =<span style="color: #000000"> $(window).innerHeight(); </span><span style="color: #008080">361</span> self.ctx.lineCap = 'round'<span style="color: #000000">; </span><span style="color: #008080">362</span> self.ctx.lineJoin = 'round'<span style="color: #000000">; </span><span style="color: #008080">363</span> }, 100<span style="color: #000000">); </span><span style="color: #008080">364</span> <span style="color: #000000"> }); </span><span style="color: #008080">365</span> <span style="color: #008080">366</span> $(self.canvas).on('mousedown', <span style="color: #0000ff">function</span><span style="color: #000000">(e){ </span><span style="color: #008080">367</span> self.mx = e.pageX -<span style="color: #000000"> self.canvas.offsetLeft; </span><span style="color: #008080">368</span> self.my = e.pageY -<span style="color: #000000"> self.canvas.offsetTop; </span><span style="color: #008080">369</span> self.currentHue =<span style="color: #000000"> rand(self.hueMin, self.hueMax); </span><span style="color: #008080">370</span> self.createFireworks(self.cw/2, self.ch, self.mx, self.my); <span style="color: #008080">371</span> <span style="color: #008080">372</span> $(self.canvas).on('mousemove.fireworks', <span style="color: #0000ff">function</span><span style="color: #000000">(e){ </span><span style="color: #008080">373</span> self.mx = e.pageX -<span style="color: #000000"> self.canvas.offsetLeft; </span><span style="color: #008080">374</span> self.my = e.pageY -<span style="color: #000000"> self.canvas.offsetTop; </span><span style="color: #008080">375</span> self.currentHue =<span style="color: #000000"> rand(self.hueMin, self.hueMax); </span><span style="color: #008080">376</span> self.createFireworks(self.cw/2, self.ch, self.mx, self.my); <span style="color: #008080">377</span> <span style="color: #000000"> }); </span><span style="color: #008080">378</span> <span style="color: #000000"> }); </span><span style="color: #008080">379</span> <span style="color: #008080">380</span> $(self.canvas).on('mouseup', <span style="color: #0000ff">function</span><span style="color: #000000">(e){ </span><span style="color: #008080">381</span> $(self.canvas).off('mousemove.fireworks'<span style="color: #000000">); </span><span style="color: #008080">382</span> <span style="color: #000000"> }); </span><span style="color: #008080">383</span> <span style="color: #008080">384</span> <span style="color: #000000"> } </span><span style="color: #008080">385</span> <span style="color: #008080">386</span> self.clear = <span style="color: #0000ff">function</span><span style="color: #000000">(){ </span><span style="color: #008080">387</span> self.particles =<span style="color: #000000"> []; </span><span style="color: #008080">388</span> self.fireworks =<span style="color: #000000"> []; </span><span style="color: #008080">389</span> self.ctx.clearRect(0, 0<span style="color: #000000">, self.cw, self.ch); </span><span style="color: #008080">390</span> <span style="color: #000000"> }; </span><span style="color: #008080">391</span> <span style="color: #008080">392</span> <span style="color: #008080">393</span> self.canvasLoop = <span style="color: #0000ff">function</span><span style="color: #000000">(){ </span><span style="color: #008080">394</span> <span style="color: #000000"> requestAnimFrame(self.canvasLoop, self.canvas); </span><span style="color: #008080">395</span> self.ctx.globalCompositeOperation = 'destination-out'<span style="color: #000000">; </span><span style="color: #008080">396</span> self.ctx.fillStyle = 'rgba(0,0,0,'+self.clearAlpha/100+')'; <span style="color: #008080">397</span> self.ctx.fillRect(0,0<span style="color: #000000">,self.cw,self.ch); </span><span style="color: #008080">398</span> <span style="color: #000000"> self.updateFireworks(); </span><span style="color: #008080">399</span> <span style="color: #000000"> self.updateParticles(); </span><span style="color: #008080">400</span> <span style="color: #000000"> self.drawFireworks(); </span><span style="color: #008080">401</span> <span style="color: #000000"> self.drawParticles(); </span><span style="color: #008080">402</span> <span style="color: #008080">403</span> <span style="color: #000000"> }; </span><span style="color: #008080">404</span> <span style="color: #008080">405</span> <span style="color: #000000"> self.init(); </span><span style="color: #008080">406</span> <span style="color: #008080">407</span> <span style="color: #000000"> } </span><span style="color: #008080">408</span> <span style="color: #0000ff">var</span> fworks = <span style="color: #0000ff">new</span><span style="color: #000000"> Fireworks(); </span><span style="color: #008080">409</span> <span style="color: #008080">410</span> <span style="color: #000000"> }); </span><span style="color: #008080">411</span> <span style="color: #008080">412</span> </script> <span style="color: #008080">413</span> <span style="color: #008080">414</span> </body> <span style="color: #008080">415</span> </html></pre> </div> <p> Liebe Internetnutzer! Da ich einige Dinge nicht verstehe, hinterlassen Sie einfach eine Nachricht! Ich werde zu meinem ehemaligen Lehrer gehen und Ask fragen, auch wenn er schon lange im Ruhestand ist!!</p><p>Das obige ist der detaillierte Inhalt vonJQuery und HTML+CSS implementieren einen Mausklick, um ein Feuerwerk auszulösen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme:</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel:<a class="dBlack" title="So verwenden Sie die JavaScript-Ereignisbindung" href="http://m.php.cn/de/faq/369618.html">So verwenden Sie die JavaScript-Ereignisbindung</a></span><span>Nächster Artikel:<a class="dBlack" title="So verwenden Sie die JavaScript-Ereignisbindung" href="http://m.php.cn/de/faq/369622.html">So verwenden Sie die JavaScript-Ereignisbindung</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/de/faq/1609.html" title="Eine eingehende Analyse der Bootstrap-Listengruppenkomponente" class="aBlack">Eine eingehende Analyse der Bootstrap-Listengruppenkomponente</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1640.html" title="Detaillierte Erläuterung des JavaScript-Funktions-Curryings" class="aBlack">Detaillierte Erläuterung des JavaScript-Funktions-Curryings</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1949.html" title="Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)" class="aBlack">Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2248.html" title="Angularjs integriert WeChat UI (weui)" class="aBlack">Angularjs integriert WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2351.html" title="Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse" class="aBlack">Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!</p></div><div class="footermid"><a href="http://m.php.cn/de/about/us.html">Über uns</a><a href="http://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="http://m.php.cn/de/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></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<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></body></html>