zoukankan html css js c++ java

博客园-文字互动插件

代码有点乱，，，哈哈哈

灵感来自文字游戏Lifeline，实际上我改过很多个版本！

这个版本是修改自最近折腾的 HTML - Trial Error （https://i.iblackly.com/tryerr/index.html）

使用方法：

复制以下代码到博客后台-页面定制-博客侧边栏公告即可

支持的语法：

 1 /* :: Start , 跳跃点 */
 2 :: Start
 3 
 4 /* >img img_name.jpg 图 */
 5 >img img.jpg
 6 
 7 /* 文本 */
 8 开头是文本
 9 
10 /* >bu , 单个按钮*/
11 >but 按钮文本|jumpname
12 >but (.+)|(.+)
13 
14 
15 /* >buts , 两个按钮 */
16 >buts 按钮文本|jumpname 按钮2文本|jump2name
17 >buts (.+)|(.+) (.+)|(.+)
18 
19 /* >link */
20 >link 超链接|linkefilename.html
21 >link (.+)|(.+)
22 
23 /* >dlink */
24 >dlink Start
25 
26 
27 /* >code  */
28 >code waytag
29 <html>
30     <head>
31         <title>Try Err</title>
32     </head>
33     <body>
34         <p>Try Err 0000</p>
35     </body>
36 </html>
37 >/code waytag
38 
39 (?<=>code waytag
)(.*
)+(?=>/code waytag)
40 GetPoint[0].match("(?<=>code "+CodesType[1]+"
)(.*
)+(?=>/code "+CodesType[1]+")");

逻辑：

大致如下

读取 id StoryData 内的指定内容

各种判断，各种分割之后输出到指定的位置

最重要的时故事要好~

可惜不会写故事~~~~~

舞台

 1 <h1>测试公告栏代码</h1>
 2 
 3 <!-- 舞台 -->
 4 <div id="Story" onclick="Clickd()"></div>
 5 
 6 <!-- 故事数据 -->
 7 <div id="StoryData" hidden>
 8 :: Version
 9 cnblog 文字互动
10 2019年10月26日23点29分
11 >but 开始|Start
12 
13 :: Start
14 这是一个cnblog的文字互动插件？
15 灵感来自以前很火的文字游戏LifeLine
16 文字游戏有他的魅力
17 能让人在脑海中构建出一个只属于自己的世界
18 >buts 唔，有啥功能？|youshagongneng 在哪里下载？|zainalixiazai
19 
20 :: youshagongneng
21 可以输出文字！
22 哈哈哈~开玩笑的~
23 你想输出啥都行
24 只需要就该js就行了~
25 >but 好吧，哪里下载？|zainalixiazai
26 
27 :: zainalixiazai
28 >delay 2s xiazaiyemian
29 
30 :: xiazaiyemian
31 >link 点击前往下载详情页面|https://www.cnblogs.com/iblackly/p/11745769.html
32 >but 信息|Version
33 
34 </div>
35 
36 <!-- 动画舞台-->
37 <wait><div class="wait la-2x"><div></div><div></div></div></wait>

脚本

  1 <!-- 脚本 -->
  2 <script>
  3 /* 载入故事然后开始 */
  4 window.onload = function(){
  5     /* 开始跳跃点名 */
  6     StartName = "Start";
  7     /* 感觉大部分时间都在想如何起个好听的名 = =！ */
  8     SayNumber = 0;
  9     /* 故事位置 */
 10     StoryData = document.getElementById("StoryData").firstChild.nodeValue;
 11     /* 启动ilearning */
 12     ilearning(StartName);
 13 }
 14 
 15 
 16 /* ilearning */
 17 function ilearning(GO){
 18     console.log(GO);
 19     /* 关闭延时动画 */
 20     //Wait('off');
 21 
 22     /* 跳转点内容 */
 23     GetPoint = StoryData.match(":{2} "+GO+"
(.+
)+");
 24     console.log("_> 跳转点内容
"+GetPoint[0]);
 25 
 26     /* 格式化？感动吗？ */
 27     var PointSplist = GetPoint[0].split(/
/);
 28     console.log("_> 跳转点内容.格式化
"+PointSplist);
 29 
 30     /* 仙人指路 */
 31     for(var i=0; i<PointSplist.length;i++){
 32         Compass(PointSplist[i]);
 33         console.log("_> 字符串长
"+PointSplist.length);
 34         console.log("_> 仙人指谁
"+PointSplist[i]);
 35     }
 36 }
 37 
 38 
 39 /* Compass 仙人指路 */
 40 function Compass(LINE){
 41     switch(true){
 42 
 43         /* :: Start , 跳跃点 */
 44         case /^:{2}/.test(LINE):
 45             console.log("_> 跳跃点
"+LINE);
 46             JumpPoint(LINE);
 47         break;
 48 
 49         /* TEXT 行头除了 [ < > : /  空格 换行 以外的就是普通文本了 */
 50         case /^[^[<>:/\n	 ]/.test(LINE):
 51             console.log("_> 普通文本
"+LINE);
 52             JumpText(LINE);
 53         break;
 54         
 55         /* >info 信息提示 */
 56         case /^>info/.test(LINE):
 57             console.log("_> 信息提示
"+LINE);
 58             InfoText(LINE);
 59         break;
 60 
 61         /* >buts , 两个按钮 */
 62         case /^>buts/.test(LINE):
 63             console.log("_> 两个按钮
"+LINE);
 64             Buttons(LINE);
 65         break;
 66 
 67         /* >but , 单个按钮 */
 68         case /^>but/.test(LINE):
 69             console.log("_> 单个按钮
"+LINE);
 70             Button(LINE);
 71         break;
 72 
 73         /* 链接 */
 74         case /^>link/.test(LINE):
 75             console.log("_> 链接
"+LINE);
 76             ALink(LINE);
 77         break;
 78 
 79         /* 代码 */
 80         case /^>code/.test(LINE):
 81             console.log("_> 代码
"+LINE);
 82             Codes(LINE);
 83         break;
 84 
 85         /* >img img_name.jpg 图 */
 86         case /^>img/.test(LINE):
 87             console.log("_> 图片
"+LINE);
 88             Imgs(LINE);
 89         break;
 90         
 91         /* >delay 10s Start 延时 */
 92         case /^>delay/.test(LINE):
 93             console.log("_> 延时
"+LINE);
 94             DelayGO(LINE);
 95         break;
 96         
 97         /* 音频 
 98         case /^>audio/.test(LINE):
 99             console.log(LINE);
100             Audios(LINE);
101         break;*/
102 
103         /* 视频 
104         case /^>video/.test(LINE):
105             console.log(LINE);
106             Videos(LINE);
107         break;*/
108 
109         /* 未匹配的 */
110         default:
111             console.log("_> 未知
"+LINE);
112     }
113 }
114 
115 
116 /* 跳跃点 */
117 function JumpPoint(LINE){
118     /* Sayid +1 */;
119     SayNumber++;
120     console.log("_> SAYID NUMBER
"+SayNumber);
121     console.log("_> 跳跃点
"+LINE);
122 
123     /* 剥离无用符号,为标签获取id名 */
124     var JumpID = LINE.replace(/^[:]{2}s/, "");
125     SAYID = JumpID+".SAY."+SayNumber;// xxx.SAY.123
126     BUTID = JumpID+".BUT."+SayNumber;// xxx.BUT.123
127     PREID = JumpID+".PRE."+SayNumber;
128     console.log("_> SAY ID
"+SAYID+"
_> BUT ID
"+BUTID);
129 
130     var JumpHTML = "<section id="+SAYID+"></section>";
131     var JumpDOM = document.getElementById("Story");
132     JumpDOM.insertAdjacentHTML("beforeEnd", JumpHTML);
133 }
134 
135 /* 普通文本 */
136 function JumpText(LINE){
137     console.log("_> 普通文本
"+LINE);
138     var TextDOM = document.getElementById(SAYID);
139     var TextHTML = "<p>"+LINE+"</p>";
140     TextDOM.insertAdjacentHTML("beforeEnd",TextHTML);
141     console.log("_> 普通文本
"+LINE);
142 }
143 
144 /* 信息提示 */
145 function InfoText(LINE){
146     console.log("_> 信息提示
"+LINE);
147     var RegExp = LINE.match(/>info (.*)/);
148     var DOM = document.getElementById(SAYID);
149     var HTML = "<h2>"+RegExp[1]+"</h2>";
150     DOM.insertAdjacentHTML("beforeEnd",HTML);
151     console.log("_> 信息提示
"+HTML);
152 }
153 
154 /* 两个按钮 */
155 function Buttons(LINE){
156     console.log("_> 两个按钮
"+LINE);
157     var GetData = LINE.match(/>buts (.+)|(.+) (.+)|(.+)/);
158     console.log("_> 两个按钮.正则
"+GetData[0]);
159     var ButtonsDOM = document.getElementById(SAYID);
160     var ButtonsHTML = "<span id="+BUTID+"><a class="bl" id=""+BUTID+".A"href="javascript:Selectd('"+BUTID+".A')" onclick="ilearning('"+GetData[2]+"')">"+GetData[1]+"</a><a class="br" id=""+BUTID+".B"href="javascript:Selectd('"+BUTID+".B')" onclick="ilearning('"+GetData[4]+"')">"+GetData[3]+"</a></span>";
161     ButtonsDOM.insertAdjacentHTML("beforeEnd",ButtonsHTML);
162 }
163 
164 /* 单个按钮 */
165 function Button(LINE){
166     console.log("_> 单个按钮
"+LINE);
167     var GetData = LINE.match(/>but (.+)|(.+)/);
168     console.log("_> 单个按钮.正则
"+GetData[0]);
169     var ButtonDOM = document.getElementById(SAYID);
170     var ButtonHTML = "<span id="+BUTID+"><a class="bc" id=""+BUTID+".A" href="javascript:Selectd('"+BUTID+".A')" onclick="ilearning('"+GetData[2]+"')">"+GetData[1]+"</a></span>";
171     ButtonDOM.insertAdjacentHTML("beforeEnd",ButtonHTML);
172 }
173 
174 /* 链接 */
175 function ALink(LINE){
176     console.log("_> 链接
"+LINE);
177     var GetData = LINE.match(/>link (.+)|(.+)/);
178     console.log(GetData[0]);
179     var ALinkHTML= "<span><a href=""+GetData[2]+"">"+GetData[1]+"</a></span";
180     console.log(ALinkHTML);
181     var ALinkDOM = document.getElementById(SAYID);
182     ALinkDOM.insertAdjacentHTML("beforeEnd",ALinkHTML);
183 }
184 
185 /* 代码块 */
186 function Codes(LINE){
187     console.log("_> 代码
"+LINE);
188 
189     /* 哪个代码块? */
190     var CodeTag = LINE.split(/>codes(S+)/);
191     console.log("_> 代码.标签
"+CodeTag[1]);
192 
193     /* 从跳转点获取代码块 */
194     GetData = GetPoint[0].match("(?<=>code "+CodeTag[1]+"
)(.*
)+(?=>/code "+CodeTag[1]+")");
195     console.log(GetData[0]);
196     
197     var CodeDOM = document.getElementById(SAYID);
198     var CodeHTML = "<pre class="html">"+encodeHtml(GetData[0])+"</pre>";
199     console.log(GetData[0]);
200     console.log(CodeHTML);
201     CodeDOM.insertAdjacentHTML("beforeEnd",CodeHTML);
202     /* 渲染 */
203     SyntaxHighlighter.highlight();
204 }
205 /* /代码块 */
206 
207 // HTML转义函数
208 function encodeHtml(s){
209     return s.replace(
210         /"|&|'|<|>|[x00-x20]|[x7F-xFF]|[u0100-u2700]/g,
211         function($0){
212             var c = $0.charCodeAt(0);
213             switch(c){
214             case 13: return "<br />";
215             case 32: return "&#160;";
216             default: return "&#"+c+";";
217             }
218         }
219     );
220 };
221 
222 /* 图片 */
223 function Imgs(LINE){
224     var ImgDOM = document.getElementById(SAYID);
225     /* 剥离无用符号*/
226     var ImgUrl = LINE.replace(/^>img /, "");
227     console.log(ImgUrl);
228     var ImgHTML = "<img src=""+ImgUrl+"">";
229     console.log(ImgHTML);
230     ImgDOM.insertAdjacentHTML("beforeEnd",ImgHTML);
231 }
232 
233 
234 /* 视频 */
235 function Videos(LINE){
236     console.log(LINE);
237 
238     /* 获取 */
239     GetVideo = LINE.match("[^>videos](.*)");
240     console.log(GetVideo[0]);
241 
242     var VideoDOM = document.getElementById(SAYID);
243     VideoDOM.insertAdjacentHTML("beforeEnd",GetVideo[0]);
244 
245     var AudioSrc = "<audio src=""+GetAudio[0]+""controls="controls">";
246     console.log(AudioSrc );
247     var AudioDOM = document.getElementById(SAYID);
248     AudioDOM.insertAdjacentHTML("beforeEnd",AudioSrc);
249 
250 }
251 
252 
253 /* 声音 音乐 */
254 function Audios(LINE){
255     console.log(LINE);
256 
257     /* 获取 */
258     GetAudio = LINE.match("[^>audios](.*)");
259     console.log(GetAudio[0]);
260 
261     var AudioSrc = "<audio src=""+GetAudio[0]+""controls="controls">";
262     console.log(AudioSrc);
263     var AudioDOM = document.getElementById(SAYID);
264     AudioDOM.insertAdjacentHTML("beforeEnd",AudioSrc);
265 }
266 
267 
268 
269 /* Time Delay */
270 function DelayGO(LINE){
271     console.log(">_ 延时
"+LINE);
272     var RegExp = LINE.match(/delay (d*)s (.*)/);
273     console.log(RegExp);
274     var DelayTime = RegExp[1]*1000;
275     console.log(">_ 延时时间
"+DelayTime);
276 
277     /* 延时执行 */
278     Wait('on');
279     setTimeout(function(){
280         ilearning(RegExp[2]);
281         Wait('off');
282     },DelayTime);
283 }
284 
285 
286 /* Wait 动画 */
287 function Wait(LINE){
288     var WaitDOM = document.getElementsByTagName("wait");
289     if (LINE == 'on'){
290         WaitDOM[0].style.display="block";
291     } else {
292         WaitDOM[0].style.display="none";
293     }
294 }
295 
296 
297 /* SelectMe And change color */
298 function Selectd(LINE){
299     console.log("_> SelectMe
" +LINE);
300     var RegExp = LINE.match(/(.*..*..*.)(.)/);
301     
302     var BUTSA = RegExp[1]+"A";
303     var BUTSB = RegExp[1]+"B";
304     console.log(BUTSA,BUTSB);
305     var DOMA = document.getElementById(BUTSA);
306     var DOMB = document.getElementById(BUTSB);
307 
308     console.log(RegExp[0]);
309     console.log(DOMB);
310   
311     if(RegExp[2]== 'A'){
312         console.log(">_ A")
313         DOMA.href = "javascript:void(0)";
314         DOMA.onclick = null;
315         DOMA.style.color = "#00000080";
316         DOMA.style.background = "#97e597c9";
317         
318         if(DOMB){
319             console.log("sssssssssssss");
320             DOMB.onclick = null;
321             DOMB.href = 'javascript:void(0)';
322             DOMB.style.color = "#00000080";
323         }
324     }else {
325         console.log(">_ B")
326         DOMB.href = 'javascript:void(0)';
327         DOMB.onclick = null;
328         DOMB.style.color = "#00000080";
329         DOMB.style.background = "#97e597c9";
330         
331         DOMA.href = 'javascript:void(0)';
332         DOMA.onclick = null;
333         DOMA.style.color = "#00000080";
334     }
335 }
336 
337 
338 //著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
339 //作者: DIYgod
340 //链接: https://www.anotherhome.net/2153
341 //来源: Anotherhome
342 var OriginTitile = document.title;
343 var titleTime;
344 document.addEventListener('visibilitychange', function() {
345   if(document.hidden) {
346     document.title = '(つェ⊂)我藏好了哦~ ' + OriginTitile;
347     clearTimeout(titleTime);
348   }
349   else {
350     document.title = '(*´∇｀*) 被你发现啦~ ' + OriginTitile;
351     titleTime = setTimeout(function() {
352     document.title = OriginTitile;
353     }, 2000);
354   }
355 });
356 
357 
358 function Clickd(){
359     console.log("TAP TAP");
360 }
361 </script>

样式

  1 html {
  2     margin: 5px;
  3     background-color: #f4f4f4;
  4 }
  5 
  6 body {
  7     color: #666;
  8     margin: 0 auto;
  9     //max-width: 700px;
 10     font-weight: normal;
 11     font-family: PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans;
 12 }
 13 
 14 a {
 15     color: #97e597;
 16     text-decoration: none;
 17     background: transparent;
 18 }
 19 
 20 ::selection {
 21     background: #97e597;
 22 }
 23 
 24 hr{
 25     background: #e0ffbf;
 26     border: none;
 27     height: 1px;
 28 }
 29 
 30 
 31 
 32 #navigator {
 33     text-align:center;
 34     //border-bottom: 1px solid #e3e3e3;
 35 }
 36 #navigator ul li a{
 37     margin:0;
 38     font-size:1.5rem;
 39     overflow:hidden;
 40     color: #aaa;
 41 }
 42 #navigator ul li{
 43     list-style-type:none;
 44 }
 45 
 46 
 47 
 48 
 49 /* header */
 50 #header {
 51     text-align: center;
 52     margin-bottom: 20px;
 53     -webkit-user-select: none;
 54     user-select: none;
 55 }
 56 
 57 #header a {
 58     margin: 0;
 59     font-size: 3rem;
 60     font-weight: 200;
 61     line-height: 1em;
 62     overflow: hidden;
 63 }
 64 
 65 #header p {
 66     margin: 0;
 67     font-size: 1.6rem;
 68     font-style: normal;
 69 }
 70 
 71 @media screen and (max- 670px) {
 72     #header a {
 73         font-size: 3rem;
 74     }
 75 
 76     #header p {
 77         font-size: 1.5rem;
 78     }
 79 }
 80 
 81 @media screen and (max- 600px) {
 82     #header a {
 83         font-size: 3rem;
 84     }
 85 
 86     #header p {
 87         font-size: 1.4rem;
 88     }
 89 }
 90 
 91 @media screen and (max- 500px) {
 92     #header a {
 93         font-size: 2.5rem;
 94     }
 95 
 96     #header p {
 97         font-size: 1.3rem;
 98     }
 99 }
100 
101 @media screen and (max- 400px) {
102     #header a {
103         font-size: 2rem;
104     }
105 
106     #header p {
107         font-size: 1.2rem;
108     }
109 }
110 
111 /* header */
112 
113 
114 
115 /* Story */
116 section{
117     text-align: center;
118     /* word-break: break-all; 
119     background-color: #ffffff;*/
120     border-radius: 3px;
121     padding-top: 1px;
122 }
123 
124 
125 section h2{
126     background-color: #e0f5a4;
127     font-size: 1.8em;    
128     font-weight: normal;
129     margin: 10px 0;
130     padding: 5px 0 1px 0;
131 }
132 
133 
134 section img,audio,embed{
135     width: 100%;
136 }
137 
138 pre{
139     text-align: left;
140     display: block;
141     font-size: 1.5em;
142     margin-block-start: 0.83em;
143     margin-block-end: 0.83em;
144     margin-inline-start: 0px;
145     margin-inline-end: 0px;
146     font-weight: bold;
147     border-radius: 5px;
148     padding: 10px;
149     background-color: #fafafa;
150 overflow:auto;
151 }
152 
153 /*section a{
154     padding: 10px;
155     margin: 5px;
156     color: #fff;
157     word-break: break-all;
158     font-weight: normal;
159     font-size: 1.6rem;
160     background-color: #51c75f;
161     display: inline-block;
162     border-radius: 5px;
163 }*/
164 
165 section span {
166     margin: 10px 0;
167     text-align: center;
168     display: flex;
169 }
170 
171 section a,section span a {
172     width: 100%;
173     padding: 5px;
174     margin: 2px;
175     color: #959595;
176     word-break: break-all;
177     font-weight: normal;
178     font-size: 0.8rem;
179     border-radius: 3px;
180     border: 1px solid #E6ECF1;
181     box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);
182 }
183 
184 section span a:hover {
185     color: #fff;
186     background-color: #97e597c9;
187 }
188 
189 .bl{
190     text-align: right;
191 }
192 
193 .br{
194     text-align: left;
195 }
196 /* Story */
197 
198 /* wait */
199 wait {
200     display: none;
201     padding-bottom: 30px;
202 }
203 
204 .wait,.wait>div {
205     position: relative;
206     -moz-box-sizing: border-box;
207     box-sizing: border-box
208 }
209 
210 .wait {
211     display: block;
212     font-size: 0;
213     color: #c6f693;
214 }
215 
216 .wait>div {
217     display: inline-block;
218     float: none;
219     background-color: currentColor;
220     border: 0 solid currentColor
221 }
222 
223 .wait {
224     width: 32px;
225     height: 32px
226 }
227 
228 .wait>div {
229     position: absolute;
230     top: 0;
231     left: 0;
232     width: 32px;
233     height: 32px;
234     border-radius: 100%;
235     opacity: 0;
236     -webkit-animation: ball-scale-multiple 1s 0s linear infinite;
237     -moz-animation: ball-scale-multiple 1s 0s linear infinite;
238     -o-animation: ball-scale-multiple 1s 0s linear infinite;
239     animation: ball-scale-multiple 1s 0s linear infinite
240 }
241 
242 .wait>div:nth-child(2) {
243     -webkit-animation-delay: .2s;
244     -moz-animation-delay: .2s;
245     -o-animation-delay: .2s;
246     animation-delay: .2s
247 }
248 
249 .wait.la-2x {
250     width: 64px;
251     height: 64px
252   text-align: center;
253     margin: 0 auto;
254     padding-bottom: 70px;
255 }
256 
257 .wait.la-2x>div {
258     width: 64px;
259     height: 64px
260 }
261 
262 @-webkit-keyframes ball-scale-multiple {
263     0% {
264         opacity: 0;
265         -webkit-transform: scale(0);
266         transform: scale(0)
267     }
268 
269     5% {
270         opacity: .75
271     }
272 
273     100% {
274         opacity: 0;
275         -webkit-transform: scale(1);
276         transform: scale(1)
277     }
278 }
279 
280 @-moz-keyframes ball-scale-multiple {
281     0% {
282         opacity: 0;
283         -moz-transform: scale(0);
284         transform: scale(0)
285     }
286 
287     5% {
288         opacity: .75
289     }
290 
291     100% {
292         opacity: 0;
293         -moz-transform: scale(1);
294         transform: scale(1)
295     }
296 }
297 
298 @-o-keyframes ball-scale-multiple {
299     0% {
300         opacity: 0;
301         -o-transform: scale(0);
302         transform: scale(0)
303     }
304 
305     5% {
306         opacity: .75
307     }
308 
309     100% {
310         opacity: 0;
311         -o-transform: scale(1);
312         transform: scale(1)
313     }
314 }
315 
316 @keyframes ball-scale-multiple {
317     0% {
318         opacity: 0;
319         -webkit-transform: scale(0);
320         -moz-transform: scale(0);
321         -o-transform: scale(0);
322         transform: scale(0)
323     }
324 
325     5% {
326         opacity: .75
327     }
328 
329     100% {
330         opacity: 0;
331         -webkit-transform: scale(1);
332         -moz-transform: scale(1);
333         -o-transform: scale(1);
334         transform: scale(1)
335     }
336 }
337 /* wait */
338 
339 footer{
340     text-align: center;
341 }
342 footer a{
343     color: #666;
344 }
345 
346 .iblackly{
347     width: 25px;
348     margin: 0px 2px -4px 2px;
349 }
350 
351 .coding{
352     width: 25px;
353     margin: 0px 2px -4px 2px;
354 }
355 
356 .chrome{
357     width: 22px;
358     margin: 0px 2px -5px 2px;
359 }
360 
361 /* 滚动 */
362 /* 整个滚动条 */
363 ::-webkit-scrollbar {
364   width: 3px;
365   height: 3px;
366 }
367 
368 /* 滚动条上的滚动滑 */
369 ::-webkit-scrollbar-thumb {
370   background: #b3d979; 
371   border-radius: 3px;
372 }
373 /* 滚动 */

查看全文

相关阅读:
leetcode Convert Sorted List to Binary Search Tree
leetcode Convert Sorted Array to Binary Search Tree
leetcode Binary Tree Level Order Traversal II
leetcode Construct Binary Tree from Preorder and Inorder Traversal
leetcode[105] Construct Binary Tree from Inorder and Postorder Traversal
证明中序遍历O(n)
leetcode Maximum Depth of Binary Tree
限制 button 在 3 秒内不可重复点击
 HTML 和 CSS 画三角形和画多边行基本原理及实践
 在线前端 JS 或 HTML 或 CSS 编写 Demo 处 JSbin 与 jsFiddle 比较

原文地址：https://www.cnblogs.com/iblackly/p/11745769.html