博客园-文字互动插件

代码有点乱，，，哈哈哈

灵感来自文字游戏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 /* 滚动 */