-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjs.html
41 lines (40 loc) · 34 KB
/
js.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="description" content="js网页代码总结"><meta name="keywords" content="script"><meta name="author" content="YUGE,undefined"><meta name="copyright" content="YUGE"><title>js网页代码总结 | YUGE'S BLOG</title><link rel="shortcut icon" href="/LOGO.jpg"><link rel="stylesheet" href="/css/index.css?version=1.5.6"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css?version=1.5.6"><link rel="dns-prefetch" href="https://cdn.staticfile.org"><link rel="dns-prefetch" href="https://cdn.bootcss.com"><link rel="dns-prefetch" href="https://creativecommons.org"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.css"><script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.js" defer></script><link rel="dns-prefetch" href="https://hm.baidu.com"><script>var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?0b7b6a1778946c7e74d54e40cfb566d6";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();</script><link rel="dns-prefetch" href="https://www.google-analytics.com"><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-116093450-2', 'auto');
ga('send', 'pageview');</script><link rel="dns-prefetch" href="http://ta.qq.com"><script>(function() {
var hm = document.createElement("script");
hm.src = "https://tajs.qq.com/stats?sId=65938413";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();</script><script>var GLOBAL_CONFIG = {
root: '/',
algolia: {"appId":"DOGPG1DV6S","apiKey":"d007baa5d412a92465a445c6ec1832ea","indexName":"MYBLOG","hits":{"per_page":10},"languages":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}.","hits_stats":"${hits} results found in ${time} ms"}},
localSearch: undefined,
copy: {
success: 'Copy successfully',
error: 'Copy error',
noSupport: 'The browser does not support'
}
} </script></head><body><i class="fa fa-arrow-right" id="toggle-sidebar" aria-hidden="true"></i><div id="sidebar"><div class="toggle-sidebar-info text-center"><span data-toggle="Toggle article">Toggle site</span><hr></div><div class="sidebar-toc"><div class="sidebar-toc__title">Catalog</div><div class="sidebar-toc__progress"><span class="progress-notice">You've read</span><span class="progress-num">0</span><span class="progress-percentage">%</span><div class="sidebar-toc__progress-bar"></div></div><div class="sidebar-toc__content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#js网页代码总结"><span class="toc-number">1.</span> <span class="toc-text">js网页代码总结</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#为什么写"><span class="toc-number">1.1.</span> <span class="toc-text">为什么写</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#代码区域"><span class="toc-number">1.2.</span> <span class="toc-text">代码区域</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#标题栏切换特效"><span class="toc-number">1.2.1.</span> <span class="toc-text">标题栏切换特效</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#给复制内容增加版权信息"><span class="toc-number">1.2.2.</span> <span class="toc-text">给复制内容增加版权信息</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#鼠标点击出现随机数字"><span class="toc-number">1.2.3.</span> <span class="toc-text">鼠标点击出现随机数字</span></a></li></ol></li></ol></li></ol></div></div><div class="author-info hide"><div class="author-info__avatar text-center"><img src="/img/avatar.png"></div><div class="author-info__name text-center">YUGE</div><div class="author-info__description text-center">THIS IS YUGE'S BLOG.</div><div class="follow-button"><a href="https://github.com/yugepower" target="_blank">Follow Me</a></div><hr><div class="author-info-articles"><a class="author-info-articles__archives article-meta" href="/archives"><span class="pull-left">Articles</span><span class="pull-right">9</span></a><a class="author-info-articles__tags article-meta" href="/tags"><span class="pull-left">Tags</span><span class="pull-right">6</span></a></div><hr><div class="author-info-links"><div class="author-info-links__title text-center">Links</div><a class="author-info-links__name text-center" href="https://www.yugepower.com" target="_blank">YUGE</a></div></div></div><div id="content-outer"><div id="top-container" style="background-image: url(https://yugepic-1253731526.cos.ap-beijing.myqcloud.com/star-bgi.png)"><div id="page-header"><span class="pull-left"> <a id="site-name" href="/">YUGE'S BLOG</a></span><i class="fa fa-bars toggle-menu pull-right" aria-hidden="true"></i><span class="pull-right menus"><a class="site-page social-icon search"><i class="fa fa-search"></i><span> Search</span></a><a class="site-page" href="/">Home</a><a class="site-page" href="/about">About</a><a class="site-page" href="/archives">Archives</a><a class="site-page" href="/tags">Tags</a><a class="site-page" href="/categories">Categories</a><a class="site-page" href="/links">links</a></span></div><div id="post-info"><div id="post-title">js网页代码总结</div><div id="post-meta"><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2018-07-28</time><span class="post-meta__separator">|</span><i class="fa fa-comment-o post-meta__icon" aria-hidden="true"></i><a href="/js.html#disqus_thread"><span class="disqus-comment-count" data-disqus-identifier="js.html"></span></a><div class="post-meta-wordcount"><span>Word count: </span><span class="word-count">949</span><span class="post-meta__separator">|</span><span>Reading time: 5 min</span></div></div></div></div><div class="layout" id="content-inner"><article id="post"><div class="article-container" id="post-content"><h1 id="js网页代码总结"><a href="#js网页代码总结" class="headerlink" title="js网页代码总结"></a>js网页代码总结</h1><h2 id="为什么写"><a href="#为什么写" class="headerlink" title="为什么写"></a>为什么写</h2><p> 当下的网页js有很多，但是总结起来的非常的少，于是乎此文就是为总结js网页代码的一片文章。</p>
<h2 id="代码区域"><a href="#代码区域" class="headerlink" title="代码区域"></a>代码区域</h2><h3 id="标题栏切换特效"><a href="#标题栏切换特效" class="headerlink" title="标题栏切换特效"></a>标题栏切换特效</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><!--标题栏切换特效 start--></span><br><span class="line"><script type=<span class="string">"text/javascript"</span>></span><br><span class="line"><span class="keyword">var</span> OriginTitile = <span class="built_in">document</span>.title;</span><br><span class="line"><span class="keyword">var</span> titleTime;</span><br><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">'visibilitychange'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"><span class="keyword">if</span> (<span class="built_in">document</span>.hidden) {</span><br><span class="line">$(<span class="string">'[rel="shortcut icon"]'</span>).attr(<span class="string">'href'</span>, <span class="string">"//www.hzv5.cn/logo.jpg"</span>);</span><br><span class="line"><span class="built_in">document</span>.title = <span class="string">'(⊙_⊙) 哎呀！崩溃啦~ •'</span> + OriginTitile;</span><br><span class="line">clearTimeout(titleTime);</span><br><span class="line">}</span><br><span class="line"><span class="keyword">else</span> {</span><br><span class="line">$(<span class="string">'[rel="shortcut icon"]'</span>).attr(<span class="string">'href'</span>, <span class="string">"//hzv5.cn/logo.jpg"</span>);</span><br><span class="line"><span class="built_in">document</span>.title = <span class="string">'๑乛◡乛๑ 又好啦，嘿嘿~ •'</span> + OriginTitile;</span><br><span class="line">titleTime = setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"><span class="built_in">document</span>.title = OriginTitile;</span><br><span class="line">}, <span class="number">1500</span>);</span><br><span class="line">}</span><br><span class="line">});</span><br><span class="line"><<span class="regexp">/script></span></span><br><span class="line"><span class="regexp"><!--标题栏切换特效 end--></span></span><br></pre></td></tr></table></figure>
<h3 id="给复制内容增加版权信息"><a href="#给复制内容增加版权信息" class="headerlink" title="给复制内容增加版权信息"></a>给复制内容增加版权信息</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><!--给复制内容增加版权信息 start--></span><br><span class="line"><script></span><br><span class="line"> $(<span class="string">"body"</span>).on(<span class="string">'copy'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">window</span>.getSelection == <span class="string">"undefined"</span>) <span class="keyword">return</span>;</span><br><span class="line"> <span class="keyword">var</span> body_element = <span class="built_in">document</span>.getElementsByTagName(<span class="string">'body'</span>)[<span class="number">0</span>];</span><br><span class="line"> <span class="keyword">var</span> selection = <span class="built_in">window</span>.getSelection();</span><br><span class="line"> <span class="keyword">if</span> ((<span class="string">""</span> + selection).length < <span class="number">30</span>) <span class="keyword">return</span>;</span><br><span class="line"> <span class="keyword">var</span> newdiv = <span class="built_in">document</span>.createElement(<span class="string">'div'</span>);</span><br><span class="line"> newdiv.style.position = <span class="string">'absolute'</span>;</span><br><span class="line"> newdiv.style.left = <span class="string">'-99999px'</span>;</span><br><span class="line"> body_element.appendChild(newdiv);</span><br><span class="line"> newdiv.appendChild(selection.getRangeAt(<span class="number">0</span>).cloneContents());</span><br><span class="line"> <span class="comment">//提示复制成功代码start</span></span><br><span class="line"> <span class="keyword">if</span>(<span class="built_in">window</span>.getSelection){</span><br><span class="line"> selection = <span class="built_in">window</span>.getSelection();</span><br><span class="line"> alert(<span class="string">"复制成功~\n若转载请注明出处："</span>+<span class="built_in">document</span>.location.href);</span><br><span class="line"> <span class="comment">//document.write("复制成功~\n转载请注明出处："+document.location.href);</span></span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(<span class="built_in">document</span>.getSelection){<span class="comment">//IE10</span></span><br><span class="line"> selection= <span class="built_in">document</span>.getSelection();</span><br><span class="line"> alert(<span class="string">"复制成功~\n若转载请注明出处："</span>+<span class="built_in">document</span>.location.href);</span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(<span class="built_in">document</span>.selection){<span class="comment">//IE6+10-</span></span><br><span class="line"> selection= <span class="built_in">document</span>.selection.createRange().text;</span><br><span class="line"> alert(<span class="string">"复制成功~\n若转载请注明出处："</span>+<span class="built_in">document</span>.location.href);</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> selection= <span class="string">""</span>;</span><br><span class="line"> alert(<span class="string">"浏览器兼容问题导致复制失败！"</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//提示复制成功代码end</span></span><br><span class="line"> <span class="keyword">if</span> (selection.getRangeAt(<span class="number">0</span>).commonAncestorContainer.nodeName == <span class="string">"PRE"</span>) {</span><br><span class="line"> newdiv.innerHTML = <span class="string">"<pre>"</span> + newdiv.innerHTML + <span class="string">"</pre>"</span>;</span><br><span class="line"> }</span><br><span class="line"> newdiv.innerHTML += <span class="string">"</br></br>若转载请注明出处: <a href='"</span> + <span class="built_in">document</span>.location.href + <span class="string">"'>"</span> + <span class="built_in">document</span>.location.href + <span class="string">"</a> &copy; hzv5.cn"</span>;</span><br><span class="line"> selection.selectAllChildren(newdiv);</span><br><span class="line"> <span class="built_in">window</span>.setTimeout(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{ body_element.removeChild(newdiv); }, <span class="number">200</span>);</span><br><span class="line">});</span><br><span class="line"><<span class="regexp">/script></span></span><br><span class="line"><span class="regexp"><!--给复制内容增加版权信息 end--></span></span><br></pre></td></tr></table></figure>
<h3 id="鼠标点击出现随机数字"><a href="#鼠标点击出现随机数字" class="headerlink" title="鼠标点击出现随机数字"></a>鼠标点击出现随机数字</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br></pre></td><td class="code"><pre><span class="line"><!--鼠标点击出现随机数字 start--></span><br><span class="line"><script type=<span class="string">"text/javascript"</span>></span><br><span class="line"><span class="keyword">var</span> a_idx = <span class="number">0</span>;</span><br><span class="line">jQuery(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params">$</span>) </span>{</span><br><span class="line"> $(<span class="string">"body"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> a = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="string">"天真"</span>,<span class="string">"富强"</span>, <span class="string">"民主"</span>, <span class="string">"文明"</span>, <span class="string">"和谐"</span>, <span class="string">"自由"</span>, <span class="string">"平等"</span>, <span class="string">"公正"</span> ,<span class="string">"法治"</span>, <span class="string">"爱国"</span>, <span class="string">"敬业"</span>, <span class="string">"诚信"</span>, <span class="string">"友善"</span>);</span><br><span class="line"> <span class="keyword">var</span> $i = $(<span class="string">"<span/>"</span>).text(a[a_idx]);</span><br><span class="line"> a_idx = (a_idx + <span class="number">1</span>) % a.length;</span><br><span class="line"> <span class="keyword">var</span> x = e.pageX,</span><br><span class="line"> y = e.pageY;</span><br><span class="line"> $i.css({</span><br><span class="line"> <span class="string">"z-index"</span>: <span class="number">99999</span>,</span><br><span class="line"> <span class="string">"top"</span>: y - <span class="number">20</span>,</span><br><span class="line"> <span class="string">"left"</span>: x,</span><br><span class="line"> <span class="string">"position"</span>: <span class="string">"absolute"</span>,</span><br><span class="line"> <span class="string">"font-weight"</span>: <span class="string">"bold"</span>,</span><br><span class="line"> <span class="string">"color"</span>: <span class="string">"#ff0000"</span></span><br><span class="line"> });</span><br><span class="line"> $(<span class="string">"body"</span>).append($i);</span><br><span class="line"> $i.animate({</span><br><span class="line"> <span class="string">"top"</span>: y - <span class="number">180</span>,</span><br><span class="line"> <span class="string">"opacity"</span>: <span class="number">0</span></span><br><span class="line"> },</span><br><span class="line"> <span class="number">1800</span>,</span><br><span class="line"> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $i.remove();</span><br><span class="line"> });</span><br><span class="line"> });</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params">window, document, undefined</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> hearts = [];</span><br><span class="line"> <span class="built_in">window</span>.requestAnimationFrame = (<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">window</span>.requestAnimationFrame || <span class="built_in">window</span>.webkitRequestAnimationFrame || <span class="built_in">window</span>.mozRequestAnimationFrame || <span class="built_in">window</span>.oRequestAnimationFrame || <span class="built_in">window</span>.msRequestAnimationFrame ||</span><br><span class="line"> <span class="function"><span class="keyword">function</span>(<span class="params">callback</span>) </span>{</span><br><span class="line"> setTimeout(callback, <span class="number">1000</span> / <span class="number">60</span>);</span><br><span class="line"> }</span><br><span class="line"> })();</span><br><span class="line"> init();</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">init</span>(<span class="params"></span>) </span>{</span><br><span class="line"> css(<span class="string">".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"</span>);</span><br><span class="line"> attachEvent();</span><br><span class="line"> gameloop();</span><br><span class="line"> }</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">gameloop</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < hearts.length; i++) {</span><br><span class="line"> <span class="keyword">if</span> (hearts[i].alpha <= <span class="number">0</span>) {</span><br><span class="line"> <span class="built_in">document</span>.body.removeChild(hearts[i].el);</span><br><span class="line"> hearts.splice(i, <span class="number">1</span>);</span><br><span class="line"> <span class="keyword">continue</span>;</span><br><span class="line"> }</span><br><span class="line"> hearts[i].y-= <span class="number">1.6</span>;</span><br><span class="line"> hearts[i].scale += <span class="number">0.01</span>;</span><br><span class="line"> hearts[i].alpha -= <span class="number">0.01</span>;</span><br><span class="line"> hearts[i].el.style.cssText = <span class="string">"left:"</span> + hearts[i].x + <span class="string">"px;top:"</span> + hearts[i].y + <span class="string">"px;opacity:"</span> + hearts[i].alpha + <span class="string">";transform:scale("</span> + hearts[i].scale + <span class="string">","</span> + hearts[i].scale + <span class="string">") rotate(45deg);background:"</span> + hearts[i].color;</span><br><span class="line"> }</span><br><span class="line"> requestAnimationFrame(gameloop);</span><br><span class="line"> }</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">attachEvent</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> old = <span class="keyword">typeof</span> <span class="built_in">window</span>.onclick === <span class="string">"function"</span> && <span class="built_in">window</span>.onclick;</span><br><span class="line"> <span class="built_in">window</span>.onclick = <span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>{</span><br><span class="line"> old && old();</span><br><span class="line"> createHeart(event);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">createHeart</span>(<span class="params">event</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> d = <span class="built_in">document</span>.createElement(<span class="string">"div"</span>);</span><br><span class="line"> d.className = <span class="string">"heart"</span>;</span><br><span class="line"> hearts.push({</span><br><span class="line"> el: d,</span><br><span class="line"> x: event.clientX - <span class="number">2</span>,</span><br><span class="line"> y: event.clientY - <span class="number">2</span>,</span><br><span class="line"> scale: <span class="number">1</span>,</span><br><span class="line"> alpha: <span class="number">1</span>,</span><br><span class="line"> color: randomColor()</span><br><span class="line"> });</span><br><span class="line"> <span class="built_in">document</span>.body.appendChild(d);</span><br><span class="line"> }</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">css</span>(<span class="params">css</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> style = <span class="built_in">document</span>.createElement(<span class="string">"style"</span>);</span><br><span class="line"> style.type = <span class="string">"text/css"</span>;</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> style.appendChild(<span class="built_in">document</span>.createTextNode(css));</span><br><span class="line"> } <span class="keyword">catch</span> (ex) {</span><br><span class="line"> style.styleSheet.cssText = css;</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">document</span>.getElementsByTagName(<span class="string">'head'</span>)[<span class="number">0</span>].appendChild(style);</span><br><span class="line"> }</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">randomColor</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="string">"rgb("</span> + (~~ (<span class="built_in">Math</span>.random() * <span class="number">255</span>)) + <span class="string">","</span> + (~~ (<span class="built_in">Math</span>.random() * <span class="number">255</span>)) + <span class="string">","</span> + (~~ (<span class="built_in">Math</span>.random() * <span class="number">255</span>)) + <span class="string">")"</span>;</span><br><span class="line"> }</span><br><span class="line">})(<span class="built_in">window</span>, <span class="built_in">document</span>);</span><br><span class="line"><<span class="regexp">/script></span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp"><!--鼠标点击出现随机数字 end--></span></span><br></pre></td></tr></table></figure>
<p>来源: <a href="http://www.hzv5.cn" target="_blank" rel="noopener">http://www.hzv5.cn</a> 的源代码</p>
</div></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">Author: </span><span class="post-copyright-info"><a href="mailto:undefined">YUGE</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">Link: </span><span class="post-copyright-info"><a href="https://www.yugepower.com/js.html">https://www.yugepower.com/js.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">Copyright Notice: </span><span class="post-copyright-info">All articles in this blog are licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> unless stating additionally.</span></div></div><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/script/">script</a></div><nav id="pagination"><div class="prev-post pull-left"><a href="/webatom.html"><i class="fa fa-chevron-left"> </i><span>网页素材</span></a></div><div class="next-post pull-right"><a href="/start.html"><span>博客起航</span><i class="fa fa-chevron-right"></i></a></div></nav><div id="disqus_thread"></div><script>var unused = null;
var disqus_config = function () {
this.page.url = 'https://www.yugepower.com/js.html';
this.page.identifier = 'js.html';
this.page.title = 'js网页代码总结';
}
var d = document, s = d.createElement('script');
s.src = "https://" + 'yugepw' +".disqus.com/embed.js";
s.setAttribute('data-timestamp', '' + +new Date());
(d.head || d.body).appendChild(s);</script><script id="dsq-count-src" src="https://yugepw.disqus.com/count.js" async></script></div></div><footer><div class="layout" id="footer"><div class="copyright">©2017 - 2018 By YUGE</div><div class="framework-info"><span>Driven - </span><a href="http://hexo.io"><span>Hexo</span></a><span class="footer-separator">|</span><span>Theme - </span><a href="https://github.com/Molunerfinn/hexo-theme-melody"><span>Melody</span></a></div><div class="footer_custom_text">Hosted by <a href="https://pages.coding.me" style="font-weight:bold" rel="nofollow">Coding Pages</a></div><div class="busuanzi"><script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script><span id="busuanzi_container_page_pv"><i class="fa fa-file-o"></i><span id="busuanzi_value_page_pv"></span><span></span></span></div></div></footer><i class="fa fa-arrow-up" id="go-up" aria-hidden="true"></i><script src="/js/third-party/anime.min.js"></script><script src="/js/third-party/jquery.min.js"></script><script src="/js/third-party/jquery.fancybox.min.js"></script><script src="/js/third-party/velocity.min.js"></script><script src="/js/third-party/velocity.ui.min.js"></script><script src="/js/utils.js?version=1.5.6"></script><script src="/js/fancybox.js?version=1.5.6"></script><script src="/js/sidebar.js?version=1.5.6"></script><script src="/js/copy.js?version=1.5.6"></script><script src="/js/fireworks.js?version=1.5.6"></script><script src="/js/transition.js?version=1.5.6"></script><script src="/js/scroll.js?version=1.5.6"></script><script src="/js/head.js?version=1.5.6"></script><script src="/js/search/algolia.js"></script><div class="search-dialog" id="algolia-search"><div class="search-dialog__title" id="algolia-search-title">Algolia</div><div id="algolia-input-panel"><div id="algolia-search-input"></div></div><hr><div id="algolia-search-results"><div id="algolia-hits"></div><div id="algolia-pagination"></div><div id="algolia-stats"></div></div><span class="search-close-button"><i class="fa fa-times"></i></span></div><div class="search-mask"></div></body></html>