├── .gitignore ├── Dom0级事件处理程序 └── index.html ├── README.md ├── addEventListener事件 └── index.html ├── javaScript中创建对象的三种方式 └── index.html ├── 使用javaScript创建a标签 └── index.html ├── 兼容IE浏览器的事件处理程序 └── index.html ├── 地图 ├── echarts.min.js ├── index.html ├── jiangxi.json └── jquery.min.js ├── 增加表格与删除表格 └── index.html ├── 扇形图 ├── echarts.js └── index.html ├── 折线图 ├── echarts.js └── index.html ├── 抛出异常 └── index.html ├── 拖拽效果 ├── go.js ├── images │ ├── apple.png │ ├── meat.png │ ├── peach.png │ └── potato.png ├── index.css └── index.html ├── 捕获异常 └── index.html ├── 暂无数据的饼图 ├── echarts.js └── index.html ├── 查看浏览器的型号 └── index.html ├── 柱状图 ├── echarts.js └── index.html ├── 简单的计算器 └── index.html ├── 缩放及位移工具条 ├── index.css └── index.html ├── 自动触发饼图 ├── echarts.js └── index.html ├── 获取浏览器的信息 └── index.html ├── 获得事件的类型和目标 └── index.html ├── 获得节点的信息 └── index.html ├── 阻止事件冒泡 └── index.html ├── 阻止事件的行为 └── index.html ├── 饼图 ├── echarts.js └── index.html └── 高级扇形图 ├── echarts.js └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Example user template template 3 | ### Example user template 4 | 5 | # IntelliJ project files 6 | .idea 7 | *.iml 8 | out 9 | gen 10 | -------------------------------------------------------------------------------- /Dom0级事件处理程序/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Dom0级事件处理程序 6 | 7 | 8 | 9 | 15 | 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScriptDemo 2 | 3 | ### 一些平时学习JavaScript的案例 4 | 5 | ## 项目列表 6 | 7 | - **[Dom0级事件处理程序](https://meishadevs.github.io/JavaScriptDemo/Dom0级事件处理程序)** 8 | - **[addEventListener事件](https://meishadevs.github.io/JavaScriptDemo/addEventListener事件)** 9 | - **[javaScript中创建对象的三种方式](https://meishadevs.github.io/JavaScriptDemo/javaScript中创建对象的三种方式)** 10 | - **[使用javaScript创建a标签](https://meishadevs.github.io/JavaScriptDemo/使用javaScript创建a标签)** 11 | - **[兼容IE浏览器的事件处理程序](https://meishadevs.github.io/JavaScriptDemo/兼容IE浏览器的事件处理程序)** 12 | - **[增加表格与删除表格](https://meishadevs.github.io/JavaScriptDemo/增加表格与删除表格)** 13 | - **[抛出异常](https://meishadevs.github.io/JavaScriptDemo/抛出异常)** 14 | - **[捕获异常](https://meishadevs.github.io/JavaScriptDemo/捕获异常)** 15 | - **[查看浏览器的型号](https://meishadevs.github.io/JavaScriptDemo/查看浏览器的型号)** 16 | - **[简单的计算器](https://meishadevs.github.io/JavaScriptDemo/简单的计算器)** 17 | - **[获取浏览器的信息](https://meishadevs.github.io/JavaScriptDemo/获取浏览器的信息)** 18 | - **[获得事件的类型和目标](https://meishadevs.github.io/JavaScriptDemo/获得事件的类型和目标)** 19 | - **[获得节点的信息](https://meishadevs.github.io/JavaScriptDemo/获得节点的信息)** 20 | - **[阻止事件冒泡](https://meishadevs.github.io/JavaScriptDemo/阻止事件冒泡)** 21 | - **[电商网](https://meishadevs.github.io/dswz/index.html#/)** 22 | - **[中行数钱](https://meishadevs.github.io/CountMoney/#/)** 23 | - **[博雅互动](https://meishadevs.github.io/boyaa/)** 24 | - **[五子棋](https://meishadevs.github.io/gomoku/)** 25 | - **[西游矿工](https://meishadevs.github.io/GoldMiner/html5/)** 26 | - **[雷霆战机](https://meishadevs.github.io/HtmlDemo/plan/)** 27 | - **[消除的乐趣](https://meishadevs.github.io/HtmlDemo/fruit/)** 28 | - **[打地鼠](https://meishadevs.github.io/HtmlDemo/mouse/)** 29 | - **[超威兔宝宝打地鼠](https://meishadevs.github.io/HtmlDemo/hamster/)** 30 | - **[拖拽效果](https://meishadevs.github.io/JavaScriptDemo/%E6%8B%96%E6%8B%BD%E6%95%88%E6%9E%9C)** 31 | - **[缩放及位移工具条](https://meishadevs.github.io/JavaScriptDemo/%E7%BC%A9%E6%94%BE%E5%8F%8A%E4%BD%8D%E7%A7%BB%E5%B7%A5%E5%85%B7%E6%9D%A1/)** 32 | - **[饼图](https://meishadevs.github.io/JavaScriptDemo/%E9%A5%BC%E5%9B%BE/)** 33 | - **[折线图](https://meishadevs.github.io/JavaScriptDemo/%E6%8A%98%E7%BA%BF%E5%9B%BE/)** 34 | - **[自动触发饼图](https://meishadevs.github.io/JavaScriptDemo/%E8%87%AA%E5%8A%A8%E8%A7%A6%E5%8F%91%E9%A5%BC%E5%9B%BE/)** 35 | - **[暂无数据的饼图](https://meishadevs.github.io/JavaScriptDemo/%E6%9A%82%E6%97%A0%E6%95%B0%E6%8D%AE%E7%9A%84%E9%A5%BC%E5%9B%BE/)** 36 | - **[扇形图](https://meishadevs.github.io/JavaScriptDemo/%E6%89%87%E5%BD%A2%E5%9B%BE/)** 37 | - **[高级扇形图](https://meishadevs.github.io/JavaScriptDemo/%E9%AB%98%E7%BA%A7%E6%89%87%E5%BD%A2%E5%9B%BE/)** 38 | - **[地图](https://meishadevs.github.io/JavaScriptDemo/%E5%9C%B0%E5%9B%BE/)** 39 | -------------------------------------------------------------------------------- /addEventListener事件/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | addEventListener事件 6 | 7 | 8 | 9 | 29 | 30 | -------------------------------------------------------------------------------- /javaScript中创建对象的三种方式/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | javaScript中创建对象的三种方式 6 | 7 | 8 | 33 | 34 | -------------------------------------------------------------------------------- /使用javaScript创建a标签/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 使用javaScript创建a标签 6 | 7 | 8 | 34 | 35 | -------------------------------------------------------------------------------- /兼容IE浏览器的事件处理程序/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 兼容IE浏览器的事件处理程序 6 | 7 | 8 | 9 | 35 | 36 | -------------------------------------------------------------------------------- /地图/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 地图 7 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
手机品牌分布地图
31 |
32 |
33 | 327 | 328 | 329 | -------------------------------------------------------------------------------- /地图/jquery.min.js: -------------------------------------------------------------------------------- 1 | /*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.org/license */ 2 | !function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType&&"function"!=typeof e.item},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.6.0",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(p.childNodes),p.childNodes),t[p.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&(T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!N[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&(U.test(t)||z.test(t))){(f=ee.test(t)&&ye(e.parentNode)||e)===e&&d.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=S)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+xe(l[o]);c=l.join(",")}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){N(t,!0)}finally{s===S&&e.removeAttribute("id")}}}return g(t.replace($,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[S]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e&&e.namespaceURI,n=e&&(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:p;return r!=C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),p!=C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.scope=ce(function(e){return a.appendChild(e).appendChild(C.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=S,!C.getElementsByName||!C.getElementsByName(S).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+S+"-]").length||v.push("~="),(t=C.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||v.push("\\["+M+"*name"+M+"*="+M+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+S+"+*").length||v.push(".#.+[+~]"),e.querySelectorAll("\\\f"),v.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",F)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},j=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e==C||e.ownerDocument==p&&y(p,e)?-1:t==C||t.ownerDocument==p&&y(p,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==C?-1:t==C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]==p?-1:s[r]==p?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(T(e),d.matchesSelector&&E&&!N[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){N(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,n,r){return m(n)?S.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?S.grep(e,function(e){return e===n!==r}):"string"!=typeof n?S.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(S.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||D,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof S?t[0]:t,S.merge(this,S.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),N.test(r[1])&&S.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(S):S.makeArray(e,this)}).prototype=S.fn,D=S(E);var L=/^(?:parents|prev(?:Until|All))/,H={children:!0,contents:!0,next:!0,prev:!0};function O(e,t){while((e=e[t])&&1!==e.nodeType);return e}S.fn.extend({has:function(e){var t=S(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i;ce=E.createDocumentFragment().appendChild(E.createElement("div")),(fe=E.createElement("input")).setAttribute("type","radio"),fe.setAttribute("checked","checked"),fe.setAttribute("name","t"),ce.appendChild(fe),y.checkClone=ce.cloneNode(!0).cloneNode(!0).lastChild.checked,ce.innerHTML="",y.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML="",y.option=!!ce.lastChild;var ge={thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?S.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;n",""]);var me=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d\s*$/g;function je(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function De(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function qe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Le(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var _t,zt=[],Ut=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=zt.pop()||S.expando+"_"+wt.guid++;return this[e]=!0,e}}),S.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Ut.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Ut.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Ut,"$1"+r):!1!==e.jsonp&&(e.url+=(Tt.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||S.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?S(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,zt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((_t=E.implementation.createHTMLDocument("").body).innerHTML="
",2===_t.childNodes.length),S.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(S.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},S.expr.pseudos.animated=function(t){return S.grep(S.timers,function(e){return t===e.elem}).length},S.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=S.css(e,"position"),c=S(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=S.css(e,"top"),u=S.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,S.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},S.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){S.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===S.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===S.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=S(e).offset()).top+=S.css(e,"borderTopWidth",!0),i.left+=S.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-S.css(r,"marginTop",!0),left:t.left-i.left-S.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===S.css(e,"position"))e=e.offsetParent;return e||re})}}),S.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;S.fn[t]=function(e){return $(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),S.each(["top","left"],function(e,n){S.cssHooks[n]=Fe(y.pixelPosition,function(e,t){if(t)return t=We(e,n),Pe.test(t)?S(e).position()[n]+"px":t})}),S.each({Height:"height",Width:"width"},function(a,s){S.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){S.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return $(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?S.css(e,t,i):S.style(e,t,n,i)},s,n?e:void 0,n)}})}),S.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){S.fn[t]=function(e){return this.on(t,e)}}),S.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),S.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){S.fn[n]=function(e,t){return 0 2 | 3 | 4 | new document 5 | 6 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 |
学号姓名操作
xh001王小明删除
xh002刘小芳删除
144 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /扇形图/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 饼图 7 | 13 | 14 | 15 | 16 | 17 |
18 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /折线图/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 折线图 6 | 12 | 13 | 14 | 15 |
16 | 84 | 85 | -------------------------------------------------------------------------------- /抛出异常/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 抛出异常 6 | 7 | 8 |
9 | 10 | 11 |
12 | 30 | 31 | -------------------------------------------------------------------------------- /拖拽效果/images/apple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meishadevs/JavaScriptDemo/63677cf3c1efc4ef639a5610556596c3973003aa/拖拽效果/images/apple.png -------------------------------------------------------------------------------- /拖拽效果/images/meat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meishadevs/JavaScriptDemo/63677cf3c1efc4ef639a5610556596c3973003aa/拖拽效果/images/meat.png -------------------------------------------------------------------------------- /拖拽效果/images/peach.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meishadevs/JavaScriptDemo/63677cf3c1efc4ef639a5610556596c3973003aa/拖拽效果/images/peach.png -------------------------------------------------------------------------------- /拖拽效果/images/potato.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meishadevs/JavaScriptDemo/63677cf3c1efc4ef639a5610556596c3973003aa/拖拽效果/images/potato.png -------------------------------------------------------------------------------- /拖拽效果/index.css: -------------------------------------------------------------------------------- 1 | 2 | body, 3 | h3, 4 | h4, 5 | div, 6 | ul, 7 | li { 8 | padding: 0; 9 | margin: 0; 10 | } 11 | 12 | ul, 13 | li { 14 | list-style: none; 15 | } 16 | 17 | canvas { 18 | outline: none; 19 | } 20 | 21 | .clearfix:before, 22 | .clearfix:after { 23 | content: ""; 24 | display: table; 25 | } 26 | 27 | .clearfix:after { 28 | clear: both; 29 | } 30 | 31 | .clearfix { 32 | *zoom: 1; /*IE/7/6*/ 33 | } 34 | 35 | .dialog { 36 | width: 1014px; 37 | margin: 0 auto; 38 | background-color: #EEEEEE; 39 | } 40 | 41 | .dialog-title { 42 | height: 42px; 43 | line-height: 42px; 44 | font-size: 18px; 45 | font-weight: normal; 46 | background-color: #fff; 47 | } 48 | 49 | .content { 50 | padding: 10px; 51 | } 52 | 53 | .left-menu { 54 | width: 112px; 55 | margin-right: 10px; 56 | background-color: #fff; 57 | float: left; 58 | } 59 | 60 | .left-menu .menu-title { 61 | height: 36px; 62 | line-height: 36px; 63 | background-color: #FAFAFA; 64 | text-align: center; 65 | font-weight: normal; 66 | font-size: 14px; 67 | border-bottom: solid 1px #CCCCCC; 68 | } -------------------------------------------------------------------------------- /拖拽效果/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 拖拽效果 6 | 7 | 8 | 769 | 770 | 771 |
772 |
773 |

食物分类

774 |
775 |
776 | 794 |
795 |
796 |
797 |
798 | 799 | Selected Part:
800 |
801 |
802 |
803 | 804 | 805 | Diagram Model saved in JSON format: 806 |
807 |
808 | 825 |
826 | 827 | 828 | -------------------------------------------------------------------------------- /捕获异常/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 捕获异常 6 | 7 | 8 | 16 | 17 | -------------------------------------------------------------------------------- /暂无数据的饼图/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 暂无数据的饼图 6 | 12 | 13 | 14 | 15 |
16 | 62 | 63 | -------------------------------------------------------------------------------- /查看浏览器的型号/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 查看浏览器的版本 6 | 29 | 30 | 31 |
32 | 33 |
34 | 35 | -------------------------------------------------------------------------------- /柱状图/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 饼图 7 | 13 | 14 | 15 | 16 | 17 |
18 | 148 | 149 | 150 | -------------------------------------------------------------------------------- /简单的计算器/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 事件 5 | 54 | 55 | 56 | 57 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /缩放及位移工具条/index.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | body, 4 | h3, 5 | h4, 6 | div, 7 | ul, 8 | li { 9 | padding: 0; 10 | margin: 0; 11 | } 12 | 13 | ul, 14 | li { 15 | list-style: none; 16 | } 17 | 18 | .clearfix:before, 19 | .clearfix:after { 20 | content: ""; 21 | display: table; 22 | } 23 | 24 | .clearfix:after { 25 | clear: both; 26 | } 27 | 28 | .clearfix { 29 | *zoom: 1; /*IE/7/6*/ 30 | } 31 | 32 | button, 33 | input, 34 | select, 35 | textarea { 36 | margin: 0; 37 | font-family: inherit; 38 | font-size: 100%; 39 | } 40 | 41 | button, 42 | input { 43 | line-height: normal; 44 | } 45 | 46 | button, 47 | select { 48 | text-transform: none; 49 | } 50 | 51 | button, 52 | html 53 | input[type="button"], 54 | input[type="reset"], 55 | input[type="submit"] { 56 | cursor: pointer; 57 | -webkit-appearance: button; 58 | } 59 | 60 | .btn { 61 | display: inline-block; 62 | padding: 6px 12px; 63 | margin-bottom: 0; 64 | font-size: 14px; 65 | font-weight: normal; 66 | line-height: 1.428571429; 67 | text-align: center; 68 | white-space: nowrap; 69 | vertical-align: middle; 70 | cursor: pointer; 71 | background-image: none; 72 | border: 1px solid transparent; 73 | border-radius: 4px; 74 | -webkit-user-select: none; 75 | -moz-user-select: none; 76 | -ms-user-select: none; 77 | -o-user-select: none; 78 | user-select: none; 79 | } 80 | 81 | .btn-default { 82 | color: #333333; 83 | background-color: #ffffff; 84 | border-color: #cccccc; 85 | } 86 | 87 | .container { 88 | position: relative; 89 | } 90 | 91 | .parent { 92 | width: 1000px; 93 | height: 600px; 94 | margin: 10px; 95 | border: solid 1px #0f0; 96 | position: relative; 97 | } 98 | 99 | .parent .child { 100 | width: 100px; 101 | height: 100px; 102 | line-height: 100px; 103 | text-align: center; 104 | font-size: 20px; 105 | background-color: #f00; 106 | color: #000; 107 | transform: scale(1); 108 | position: absolute; 109 | left: 450px; 110 | top: 250px; 111 | } 112 | 113 | 114 | .progress { 115 | height: 20px; 116 | overflow: hidden; 117 | background-color: #f5f5f5; 118 | border-radius: 4px; 119 | -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 120 | box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 121 | } 122 | 123 | .scaleController { 124 | width: 80px; 125 | padding: 0px; 126 | z-index: 100; 127 | position: absolute; 128 | right: 310px; 129 | top: 20px; 130 | } 131 | 132 | .scaleController .scaleController-wheel { 133 | padding: 0px; 134 | margin: 0 auto; 135 | position: relative; 136 | border: 1px #eee solid; 137 | border-radius: 50%; 138 | width: 80px; 139 | height: 80px; 140 | box-shadow: 0px 0px 15px #888888; 141 | background: white; 142 | margin-bottom: 10px; 143 | } 144 | 145 | .scaleController .scaleController-wheel .scaleController-wheel-top { 146 | width: 40px; 147 | height: 40px; 148 | line-height: 40px; 149 | background-color: white; 150 | border-radius: 100px 0 0; 151 | transform: rotate(45deg); 152 | cursor: pointer; 153 | box-shadow: 0px 0px 5px #888888; 154 | position: absolute; 155 | top: -10px; 156 | left: 20px; 157 | } 158 | 159 | .scaleController .scaleController-wheel .scaleController-wheel-left { 160 | width: 40px; 161 | height: 40px; 162 | line-height: 40px; 163 | background-color: white; 164 | border-radius: 100px 0 0; 165 | transform: rotate(-45deg); 166 | cursor: pointer; 167 | box-shadow: 0px 0px 5px #888888; 168 | position: absolute; 169 | top: 20px; 170 | left: -10px; 171 | } 172 | 173 | .scaleController .scaleController-wheel .scaleController-wheel-right { 174 | width: 40px; 175 | height: 40px; 176 | line-height: 40px; 177 | background-color: white; 178 | border-radius: 100px 0 0; 179 | transform: rotate(135deg); 180 | cursor: pointer; 181 | box-shadow: 0px 0px 5px #888888; 182 | position: absolute; 183 | top: 20px; 184 | left: 50px; 185 | } 186 | 187 | .scaleController .scaleController-wheel .scaleController-wheel-bottom { 188 | width: 40px; 189 | height: 40px; 190 | line-height: 40px; 191 | background-color: white; 192 | border-radius: 100px 0 0; 193 | transform: rotate(225deg); 194 | cursor: pointer; 195 | box-shadow: 0px 0px 5px #888888; 196 | position: absolute; 197 | top: 50px; 198 | left: 20px; 199 | } 200 | 201 | .scaleController .scaleController-wheel .scaleController-wheel-center { 202 | width: 30px; 203 | height: 30px; 204 | border-radius: 50%; 205 | box-shadow: 0px 0px 5px #888888; 206 | border: 5px solid #eee; 207 | background: white; 208 | cursor: -webkit-grab; 209 | position: relative; 210 | top: 20px; 211 | left: 20px; 212 | } 213 | 214 | .scaleController .scaleController-zoomIn { 215 | margin-bottom: 6px; 216 | position: relative; 217 | left: 22px; 218 | } 219 | 220 | .scaleController .scaleController-zoomIn .btn { 221 | padding: 4px 14px; 222 | border-radius: 4px; 223 | background: white; 224 | height: 28px; 225 | box-shadow: 0px 0px 5px #888888; 226 | } 227 | 228 | .scaleController .progress-container { 229 | width: 10px; 230 | margin: 0 auto; 231 | position: relative; 232 | } 233 | 234 | .scaleController .progress-container .progress { 235 | width: 10px; 236 | height: 116px; 237 | box-shadow: 0px 0px 10px #888888; 238 | position: relative; 239 | } 240 | 241 | .progress-bar { 242 | width: 10px; 243 | height: 50px; 244 | font-size: 12px; 245 | color: #ffffff; 246 | text-align: center; 247 | background-color: #428bca; 248 | -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); 249 | box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); 250 | -webkit-transition: width 0.6s ease; 251 | transition: width 0.6s ease; 252 | float: left; 253 | } 254 | 255 | .scaleController .progress-container .slide-block { 256 | width: 25px; 257 | height: 16px; 258 | line-height: 16px; 259 | text-align: center; 260 | background: white; 261 | border-radius: 4px; 262 | box-shadow: 0px 0px 10px #888888; 263 | cursor: ns-resize; 264 | position: absolute; 265 | left: -7px; 266 | top: 50px; 267 | } 268 | 269 | .scaleController .progress-container .slide-marker-max { 270 | font-size: 14px; 271 | position: absolute; 272 | top: 0px; 273 | left: 20px; 274 | } 275 | 276 | .scaleController .progress-container .slide-marker-origin { 277 | font-size: 14px; 278 | position: absolute; 279 | top: 50px; 280 | left: 20px; 281 | } 282 | 283 | .scaleController .progress-container .slide-marker-min { 284 | font-size: 14px; 285 | position: absolute; 286 | top: 100px; 287 | left: 20px; 288 | } 289 | 290 | .scaleController .scaleController-zoomOut { 291 | margin-top: 6px; 292 | position: relative; 293 | left: 23px; 294 | } 295 | 296 | .scaleController .scaleController-zoomOut .btn { 297 | padding: 4px 14px; 298 | border-radius: 4px; 299 | background: white; 300 | height: 28px; 301 | box-shadow: 0px 0px 5px #888888; 302 | } 303 | 304 | .scaleController-wheel-top:active, 305 | .scaleController-wheel-right:active, 306 | .scaleController-wheel-bottom:active, 307 | .scaleController-wheel-left:active, 308 | .scaleController-wheel-center:active { 309 | background: #eee; 310 | box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important; 311 | } 312 | 313 | #myOverviewDiv { 314 | width:200px; 315 | height:100px; 316 | border: solid 1px darkgrey; 317 | background-color: #fff; 318 | z-index: 300; 319 | position: absolute; 320 | right: 0; 321 | bottom: 0; 322 | } 323 | 324 | .noselect { 325 | -webkit-touch-callout: none; 326 | -webkit-user-select: none; 327 | -khtml-user-select: none; 328 | -moz-user-select: none; 329 | -ms-user-select: none; 330 | user-select: none; 331 | } -------------------------------------------------------------------------------- /缩放及位移工具条/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 缩放及位移工具条 6 | 7 | 8 | 187 | 188 | 189 |
190 |
191 |
box
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 | 203 |
204 |
205 |
206 |
207 |
208 |
-
209 |
3x
210 |
1x
211 |
0.1x
212 |
213 |
214 | 215 |
216 |
217 |
218 | 219 | -------------------------------------------------------------------------------- /自动触发饼图/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 自动触发饼图 6 | 12 | 13 | 14 | 15 |
16 | 145 | 146 | -------------------------------------------------------------------------------- /获取浏览器的信息/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 无标题文档 6 | 7 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /获得事件的类型和目标/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 获得事件的类型和目标 6 | 7 | 8 |
9 | 10 |
11 | 21 | 22 | -------------------------------------------------------------------------------- /获得节点的信息/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 获得节点的信息 6 | 7 | 8 |
9 |

javascript

10 |
jQuery
11 |
PHP
12 |
13 | 38 | 39 | -------------------------------------------------------------------------------- /阻止事件冒泡/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 阻止事件冒泡 6 | 7 | 8 |
9 | 10 |
11 | 33 | 34 | -------------------------------------------------------------------------------- /阻止事件的行为/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 阻止事件的默认行为 6 | 7 | 8 | 百度一下 9 | 19 | 20 | -------------------------------------------------------------------------------- /饼图/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 饼图 6 | 12 | 13 | 14 | 15 |
16 | 119 | 120 | -------------------------------------------------------------------------------- /高级扇形图/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 饼图 7 | 13 | 14 | 15 | 16 | 17 |
18 | 77 | 78 | 79 | --------------------------------------------------------------------------------