-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.js
executable file
·376 lines (367 loc) · 19.4 KB
/
index.js
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
$(function() {
onload(function () {
var el = $('#player').get(0);
el.play();
el.onended = function () {
el.src = './love.mp3';
el.play();
}
});
var c = new Coder("style-text");
c.load("<p><div class='bef_comment writecode'>/**</div>");
c.load("<div class='bef_comment writecode'> *</div>");
c.load("<div class='bef_comment writecode'> *hi，吃货or宝宝也</div>");
c.load("<div class='bef_comment writecode'> *你的小詹已上线</div>");
c.load("<div class='bef_comment writecode'> *从今天开始</div>");
c.load("<div class='bef_comment writecode'> *吃货与小詹的爱的小站就正式成立了，o(￣▽￣)d</div>",2000);
c.load("<div class='bef_comment writecode'> *现在是<strong> " + format() + "</strong></div>");
c.load("<div class='bef_comment writecode'> *让我们来点实际的，看看小站能做点什么</div>");
c.load("<div class='bef_comment writecode'> */</div></p>");
c.load("<p><div class='bef_comment writecode'>/**</div>");
c.load("<div class='bef_comment writecode'> *让我们开始吧,我们先来让所有的变化都以动画的效果来显示</div>");
c.load("<div class='bef_comment writecode'> */</div></p>");
c.load("<p><div class='code writecode'><span class='bef_selector'>*</span> {</div>");
c.load("<div class='code writecode'> <span class='bef_key'>-webkit-transition</span>: <span class='bef_value'> all 1s</span>;</div>");
c.load("<div class='code writecode'>}</div></p>");
c.load("<p><div class='bef_comment writecode'>/**</div>");
c.load("<div class='bef_comment writecode'> *看起来似乎没什么变化，不要着急，接下来你就会看到</div>");
c.load("<div class='bef_comment writecode'> *你是不是厌倦了白底黑字</div>");
c.load("<div class='bef_comment writecode'> *那么让我来做一些改变</div>");
c.load("<div class='bef_comment writecode'> */</div></p>");
c.load("<p><div class='code writecode'><span class='bef_selector'>html</span> {</div>");
c.load("<div class='code writecode'> <span class='bef_key'>background</span>: <span class='bef_value'>rgb(63, 82, 99)</span>;</div>");
c.setClass("html", [{
"name": "background",
"val": "rgb(63, 82, 99)"
}]);
c.load("<div class='code writecode'>}</div></p>");
c.load("<p><div class='bef_comment writecode'>/**</div>");
c.load("<div class='bef_comment writecode'> *稍等，我来改变一下字体的颜色</div>");
c.load("<div class='bef_comment writecode'> */</div></p>");
c.load("<p><div class='code writecode'><span class='bef_selector'>pre,a</span> {</div>");
c.load("<div class='code writecode'> <span class='bef_key'>color</span>: <span class='bef_value'>white</span>;</div>");
c.setClass("pre,a", [{
"name": "color",
"val": "white"
}]);
c.load("<div class='code writecode'>}</div></p>");
c.load("<p><div class='bef_comment writecode'>/**</div>");
c.load("<div class='bef_comment writecode'> *现在看起来好多了</div>");
c.load("<div class='bef_comment writecode'> *在这整个页面里写代码让人有些不舒服</div>");
c.load("<div class='bef_comment writecode'> *我准备创建一个区域来更好的显示我的代码</div>");
c.load("<div class='bef_comment writecode'> */</div></p>");
c.load("<p><div class='code writecode'><span class='bef_selector'>pre</span><span class='bef_key'>:not(:empty)</span> {</div>");
c.load("<div class='code writecode'> <span class='bef_key'>overflow</span>: <span class='bef_value'>hidden</span>;</div>");
c.setClass("pre:not(:empty)", [{
"name": "overflow",
"val": "hidden"
}]);
c.load("<div class='code writecode'> <span class='bef_key'>background</span>: <span class='bef_value'>rgb(48, 48, 48)</span>;</div>");
c.setClass("pre:not(:empty)", [{
"name": "background",
"val": "rgb(48, 48, 48)"
}]);
c.load("<div class='code writecode'> <span class='bef_key'>border</span>: <span class='bef_value'>1px solid #ccc</span>;</div>");
c.setClass("pre:not(:empty)", [{
"name": "border",
"val": "1px solid #ccc"
}]);
c.load("<div class='code writecode'> <span class='bef_key'>max-height</span>: <span class='bef_value'>44.6%</span>;</div>");
c.setClass("pre:not(:empty)", [{
"name": "max-height",
"val": "44.6%"
}]);
c.load("<div class='code writecode'> <span class='bef_key'>width</span>: <span class='bef_value'>49%</span>;</div>");
c.setClass("pre:not(:empty)", [{
"name": "width",
"val": "49%"
}]);
$('#pre:not(:empty)').addClass("toarea");
c.load("<div class='code writecode'> <span class='bef_key'>font-size</span>: <span class='bef_value'>14<span class='bef_px'>px</span></span>;</div>");
c.setClass("pre:not(:empty)", [{
"name": "font-size",
"val": "14px"
}]);
c.load("<div class='code writecode'> <span class='bef_key'>font-family</span>: <span class='bef_value'>monospace</span>;</div>");
c.setClass("pre:not(:empty)", [{
"name": "font-family",
"val": "monospace"
}]);
c.load("<div class='code writecode'> <span class='bef_key'>padding</span>: <span class='bef_value'>10<span class='bef_px'>px</span> 10<span class='bef_px'>px</span> 20<span class='bef_px'>px</span></span>;</div>");
c.setClass("pre:not(:empty)", [{
"name": "padding",
"val": "10px 10px 20px"
}]);
c.load("<div class='code writecode'> <span class='bef_key'>box-shadow</span>: <span class='bef_value'>-4<span class='bef_px'>px</span> 4<span class='bef_px'>px</span> 2<span class='bef_px'>px</span> 0 rgba(0,0,0,0.3)</span>;</div>");
c.setClass("pre:not(:empty)", [{
"name": "box-shadow",
"val": "-4px 4px 2px 0 rgba(0,0,0,0.3)"
}]);
c.load("<div class='code writecode'> <span class='bef_key'>white-space</span>: <span class='bef_value'>pre-wrap</span>;</div>");
c.setClass("pre:not(:empty)", [{
"name": "white-space",
"val": "pre-wrap"
}]);
c.load("<div class='code writecode'> <span class='bef_key'>outline</span>: <span class='bef_value'>0</span>;</div>");
c.setClass("pre:not(:empty)", [{
"name": "outline",
"val": "0"
}]);
c.load("<div class='code writecode'>}</div></p>");
c.load("<p><div class='bef_comment writecode'>/**</div>");
c.load("<div class='bef_comment writecode'> *OK，现在让我来换一下位置</div>");
c.load("<div class='bef_comment writecode'> *让我准备来再做一些改变</div>");
c.load("<div class='bef_comment writecode'> */</div></p>");
c.load("<p><div class='code writecode'><span class='bef_selector'>#style-text</span> {</div>");
c.load("<div class='code writecode'> <span class='bef_key'>-webkit-transform</span>: <span class='bef_value'>translateX(95%)</span>;</div>");
c.setClass("#style-text", [{
"name": "-webkit-transform",
"val": "translateX(95%)"
}]);
c.load("<div class='code writecode'> <span class='bef_key'>position</span>: <span class='bef_value'>absolute</span>;</div>");
c.setClass("#style-text", [{
"name": "position",
"val": "absolute"
}]);
c.load("<div class='code writecode'>}</div></p>");
c.load("<p><div class='bef_comment writecode'>/**</div>");
c.load("<div class='bef_comment writecode'> *现在看起来好多了，但是所有的文字颜色都是白色的</div>");
c.load("<div class='bef_comment writecode'> *让我来让他的可读性更好一点吧</div>");
c.load("<div class='bef_comment writecode'> */</div></p>");
c.load("<p><div class='code writecode'><span class='bef_selector'>.comment</span> { <span class='bef_key'>color</span>: <span class='bef_value'>#857F6B</span>; <span class='bef_key'>font-style</span>: <span class='bef_value'>italic</span>; }</div>");
c.addClass(".bef_comment","comment");
c.load("<div class='code writecode'><span class='bef_selector'>.selector</span> { <span class='bef_key'>color</span>: <span class='bef_value'>#E69F0F</span>; }</div>");
c.addClass(".bef_selector","selector");
c.load("<div class='code writecode'><span class='selector'>.selector .key</span> { <span class='bef_key'>color</span>: <span class='bef_value'>#64D5EA</span>; }</div>");
c.addClass(".bef_key","key");
c.load("<div class='code writecode'><span class='selector'>.key</span> { <span class='key'>color</span>: <span class='bef_value'>#64D5EA</span>; }</div>");
c.load("<div class='code writecode'><span class='selector'>.value</span> { <span class='key'>color</span>: <span class='bef_value'>#BE84F2</span>; }</div>");
c.addClass(".bef_value","value");
c.load("<div class='code writecode'><span class='selector'>.value.px</span> { <span class='key'>color</span>: <span class='value'>#F92772</span>; }</div></p>");
c.addClass(".value .bef_px","px");
c.load("<p><div class='comment writecode'>/**</div>");
c.load("<div class='comment writecode'> *现在我们差不多都准备好了</div>");
c.load("<div class='comment writecode'> *让我们最后再来做一些3D旋转</div>");
c.load("<div class='comment writecode'> */</div></p>");
c.load("<p><div class='code writecode'><span class='selector'>#content</span> {</div>");
c.load("<div class='code writecode'> <span class='key'>-webkit-perspective</span>: <span class='value'>1000<span class='px'>px</span></span>;</div>");
c.setClass("#content", [{
"name": "-webkit-perspective",
"val": "1000px"
}]);
c.load("<div class='code writecode'>}</div></p>");
c.load("<p><div class='code writecode'><span class='selector'>#style-text</span> {</div>");
c.load("<div class='code writecode'> <span class='key'>-webkit-transform</span>: <span class='value'>translateX(98.5%) rotateY(-10deg)</span>;</div>");
c.setClass("#style-text", [{
"name": "-webkit-transform",
"val": "translateX(98.5%) rotateY(-10deg)"
}]);
c.load("<div class='code writecode'> <span class='key'>-webkit-transform-origin</span>: <span class='value'>right</span>;</div>");
c.setClass("#style-text", [{
"name": "-webkit-transform-origin",
"val": "right"
}]);
c.load("<div class='code writecode'> <span class='key'>max-height</span>: <span class='value'>94.5%</span>;</div>");
c.setClass("#style-text", [{
"name": "max-height",
"val": "94.5%"
}]);
c.load("<div class='code writecode'>}</div></p>");
c.load("<p><div class='comment writecode'>/**</div>");
c.load("<div class='comment writecode'> *现在我们差不多可以开始筑建我们爱的小站了</div>");
c.load("<div class='comment writecode'> *我相信你来这不只是为了看这些漂亮的颜色</div>");
c.load("<div class='comment writecode'> */</div></p>");
c.addClass("#work-text","pre_work-text");
c.load("<p><div class='code writecode'><span class='selector'>pre</span><span class='key'>:not(#style-text)</span> { </div>");
c.load("<div class='code writecode'> <span class='key'>-webkit-transform</span>: <span class='value'>rotateY(10deg)</span>;</div>");
c.load("<div class='code writecode'> <span class='key'>-webkit-transform-origin</span>: <span class='value'>left</span>;</div>");
c.load("<div class='code writecode'>}</div></p>");
var r = new Coder("work-text");
r.load("<div id='md'></div>");
var w = new Coder("md");
w.load("<h1 class='writecode'>时间线</h1>");
w.load("<p><div class='writecode'>邂逅，2015年10月2日</div>");
w.load("<div class='writecode'>相知，2016年</div>");
w.load("<div class='writecode'>相恋，2016年11月12日坦露心迹，12月4日以爱为名</div></p>");
w.load("<div class='writecode'>相守，彼时彼刻到此时此刻，无绝期</div></p>");
w.load("<h1 class='writecode'>足迹</h1>");
w.load("<ul>");
w.load("<li class='writecode'>15年10月2日于天津海河之滨，摩天轮下</li>");
w.load("<li class='writecode'>16年10月2日于重庆解放碑，洪崖洞畔</li>");
w.load("<li class='writecode'>17年1月1日于西子湖畔、乌镇水乡，万家灯火</li>");
w.load("<li class='writecode'>17年2月25日于恩施女儿城</li>");
w.load("<li class='writecode'>17年7月21日于赛里木湖畔、巴音布鲁克草原上</li>");
w.load("<li class='writecode'>17年8月26日于岳麓山下、喜见太平</li>");
w.load("<li class='writecode'>17年10月11日，秘言有好事相告</li>");
w.load("<li class='writecode'>惊喜原是——放弃西西弗工作，来武汉</li>");
w.load("<li class='writecode'>莫大感动！从此金风玉露，足迹遍布江城</li>");
w.load("</ul>");
w.load("<h1 class='writecode'>给宝宝</h1>");
w.load("<ul>");
w.load("<li class='writecode'>我爱你，春风拂面，杨柳依依</li>");
w.load("<li class='writecode'>我爱你，林深见鹿，切慕于溪</li>");
w.load("<li class='writecode'>我爱你，江城如画，千里流光</li>");
w.load("<li class='writecode'>我爱你，欲语还休，万里如霁</li>");
w.load("</ul>");
c.load("<p><div class='comment writecode'>/**</div>");
c.load("<div class='comment writecode'> *左面的文字看起来不是太令人满意，让我们先给他来点动态渲染</div>");
c.load("<div class='comment writecode'> */</div></p>");
c.load("<p><div class='code writecode'><span class='selector'>#work-text</span> { </div>");
c.load("<div class='code writecode'> <span class='key'>-webkit-transform</span>: <span class='value'>rotateX(0deg) rotateY(190deg) rotateZ(180deg)</span>;</div>");
c.load("<div class='code writecode'>}</div></p>");
c.load("<p><div class='code writecode'><span class='selector'>#work-text #md</span> { </div>");
c.load("<div class='code writecode'> <span class='key'>-webkit-transform</span>: <span class='value'>rotateY(190deg) rotateZ(180deg)</span>;</div>");
c.load("<div class='code writecode'>}</div></p>");
c.load("<p><div class='comment writecode'>/**</div>");
c.load("<div class='comment writecode'> *好了，让我们准备</div>");
c.load("<div class='comment writecode'> *</div>");
c.load("<div class='comment writecode'> *3....</div>");
c.load("<div class='comment writecode'> *2....</div>");
c.load("<div class='comment writecode'> *1....</div>");
c.load("<div class='comment writecode'> *</div>");
c.load("<div class='comment writecode'> *.</div>");
c.load("<div class='comment writecode'> *</div>");
c.load("<div class='comment writecode'> *差不多了，让我们爱的文字，动起来！</div>");
c.load("<div class='comment writecode'> */</div></p>");
c.setClass("#work-text", [{
"name": "-webkit-transform",
"val": "rotateX(0deg) rotateY(190deg) rotateZ(180deg)"
}, {
"name": "overflow",
"val": "auto"
}]);
c.setClass("#work-text #md", [{
"name": "-webkit-transform",
"val": "rotateY(190deg) rotateZ(180deg)"
}, {
"name": "overflow",
"val": "auto"
}]);
c.load("<p><div class='comment writecode'>/**</div>");
c.load("<div class='comment writecode'> *对于文本，我们可以再做一点微调</div>");
c.load("<div class='comment writecode'> */</div></p>");
c.load("<p><div class='code writecode'><span class='selector'>#md</span> { </div>");
c.load("<div class='code writecode'> <span class='key'>font-family</span>: <span class='value'>'Helvetica Neue', Helvetica, sans-serif</span>;</div>");
c.setClass("#md", [{
"name": "font-family",
"val": "'Helvetica Neue', Helvetica, sans-serif"
}]);
c.load("<div class='code writecode'>}</div></p>");
c.load("<p><div class='code writecode'><span class='selector'>#md h1</span> { </div>");
c.load("<div class='code writecode'> <span class='key'>border-bottom</span>: <span class='value'>1px solid #ccc</span>;</div>");
c.setClass("#md h1", [{
"name": "border-bottom",
"val": "1px solid #ccc"
}]);
c.load("<div class='code writecode'> <span class='key'>padding-bottom</span>: <span class='value'>5px</span>;</div>");
c.setClass("#md h1", [{
"name": "padding-bottom",
"val": "5px"
}]);
c.load("<div class='code writecode'>}</div></p>");
c.load("<p><div class='code writecode'><span class='selector'>#md li</span> { </div>");
c.load("<div class='code writecode'> <span class='key'>margin</span>: <span class='value'>5<span class='px'>px</span> 0</span>;</div>");
c.setClass("#md li", [{
"name": "margin",
"val": "5px 0"
}]);
c.load("<div class='code writecode'>}</div></p>");
c.load("<p><div class='code writecode'><span class='selector'>#md h1,#md ul</span> { </div>");
c.load("<div class='code writecode'> <span class='key'>margin</span>: <span class='value'>0</span>;</div>");
c.setClass("#md h1,#md ul", [{
"name": "margin",
"val": "0"
}]);
c.load("<div class='code writecode'>}</div></p>");
c.load("<p><div class='comment writecode'>/**</div>");
c.load("<div class='comment writecode'> *这样基本上就差不多了</div>");
c.load("<div class='comment writecode'> *");
c.load("<div class='comment writecode'> *如果你爱我</div>");
c.load("<div class='comment writecode'> *那么请你告诉我</div>");
c.load("<div class='comment writecode'> *我爱你多一点</div>");
c.load("<div class='comment writecode'> *汪小姐</div>");
c.load("<div class='comment writecode'> *余生请多指教</div>");
c.load("<div class='comment writecode'> */</div></p>");
c.setClass('.firework-grp', [{
"name": 'display',
"val": 'block'
}]);
});
var m = 0;
var Coder = function(dom) {
this._dom = dom;
};
Coder.prototype = {
constructor: Coder,
load: function(code, second) {
var dom = this._dom;
var o = this;
var _second = second ? second : 1000;
_second = m + _second;
setTimeout(function() {
$('#' + dom).scrollTop( $('#' + dom)[0].scrollHeight );
$("#" + dom).append(code);
}, _second);
m = _second;
},
setClass: function(dom, styles,second) {
var _second = second ? second : 0;
_second = m + _second;
for (var i in styles) {
setTimeout(function() {
$(dom).css(styles[i].name, styles[i].val);
}, _second);
}
m = _second;
},
addClass:function(dom,className){
var second = m;
setTimeout(function() {
$(dom).addClass(className);
}, second);
},
next: function (fn, timeout) {
setTimeout(fn, m + (timeout || 1000));
}
}
function onload (fn) {
if ( window.addEventListener ) {
window.addEventListener("load", fn, false);
} else if ( window.attachEvent ) {
window.attachEvent( "onload", fn);
} else if ( window.onload ) {
window.onload = fn;
}
if (/i(Phone|P(o|a)d)/.test(navigator.userAgent)) {
$(document).one('touchstart',
function(e) {
$('#player').get(0).touchstart = true;
$('#player').get(0).play();
return false;
});
}
}
function format(date, format) {
date = new Date();
format = 'yyyy年MM月dd日 h时m分s秒';
var map = {
"M+": date.getMonth() + 1,
"d+": date.getDate(),
"h+": date.getHours(),
"m+": date.getMinutes(),
"s+": date.getSeconds(),
"q+": Math.floor((date.getMonth() + 3) / 3),
"S+": date.getMilliseconds()
};
if (/(y+)/i.test(format)) {
format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
for (var k in map) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
map[k] : ("00" + map[k]).substr(("" + map[k]).length));
}
}
console.log(format);
return format;
}