-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
502 lines (302 loc) · 13.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MyukiDanMu演示</title>
<link rel="stylesheet" href="./css/MyukiDanMu.css" />
<script type="text/javascript" src="./js/MyukiDanMu.js"></script>
</head>
<style>
body {
/* background-color: #c8d6e5; */
display: flex;
align-items: center;
justify-content: center;
}
.form-box {
display: flex;
flex-direction: column;
margin-top: 32px;
width: 100%;
}
.form-box textarea {
padding: 16px;
margin-bottom: 12px;
outline: none;
border-radius: 16px;
font-size: 24px;
height: 50px;
border: none;
box-shadow: inset 0px 0px 8px #576574;
}
.form-box #tucao {
padding: 8px;
outline: none;
cursor: pointer;
background-color: #576574;
border-radius: 8px;
font-size: 24px;
color: white;
font-weight: bold;
text-align: center;
transition: all .35s ease;
}
#tucao:hover {
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
}
.AwesomeDanMu {
height: 250px;
width: 100%;
}
.container {
width: 80%;
height: 100%;
}
h1 {
text-align: center;
line-height: 1;
padding: 32px;
}
</style>
<body>
<div class="container">
<h1>MyukiDanMu测试</h1>
<div class="AwesomeDanMu"></div>
<div class="form-box">
<textarea name="" id="tucaotext" cols="30" rows="10"></textarea>
<div id="tucao">吐槽一下</div>
</div>
</div>
<script>
const LISAO = `帝高阳之苗裔兮，朕皇考曰伯庸。
摄提贞于孟陬兮，惟庚寅吾以降。
皇览揆余初度兮，肇锡余以嘉名：
名余曰正则兮，字余曰灵均。
纷吾既有此内美兮，又重之以修能。
扈江离与辟芷兮，纫秋兰以为佩。
汩余若将不及兮，恐年岁之不吾与。
朝搴阰之木兰兮，夕揽洲之宿莽。
日月忽其不淹兮，春与秋其代序。
惟草木之零落兮，恐美人之迟暮。
不抚壮而弃秽兮，何不改乎此度?
乘骐骥以驰骋兮，来吾道夫先路！
昔三后之纯粹兮，固众芳之所在。
杂申椒与菌桂兮，岂惟纫夫蕙茝！
彼尧、舜之耿介兮，既遵道而得路。
何桀纣之猖披兮，夫惟捷径以窘步。
惟夫党人之偷乐兮，路幽昧以险隘。
岂余身之殚殃兮，恐皇舆之败绩！
忽奔走以先后兮，及前王之踵武。
荃不查余之中情兮，反信谗而齌怒。
余固知謇謇之为患兮，忍而不能舍也。
指九天以为正兮，夫惟灵修之故也。
曰黄昏以为期兮，羌中道而改路！
初既与余成言兮，后悔遁而有他。
余既不难夫离别兮，伤灵修之数化。
余既滋兰之九畹兮，又树蕙之百亩。
畦留夷与揭车兮，杂杜衡与芳芷。
冀枝叶之峻茂兮，愿俟时乎吾将刈。
虽萎绝其亦何伤兮，哀众芳之芜秽。
众皆竞进以贪婪兮，凭不厌乎求索。
羌内恕己以量人兮，各兴心而嫉妒。
忽驰骛以追逐兮，非余心之所急。
老冉冉其将至兮，恐修名之不立。
朝饮木兰之坠露兮，夕餐秋菊之落英。
苟余情其信姱以练要兮，长顑颔亦何伤。
掔木根以结茝兮，贯薜荔之落蕊。
矫菌桂以纫蕙兮，索胡绳之纚纚。
謇吾法夫前修兮，非世俗之所服。
虽不周于今之人兮，愿依彭咸之遗则。
长太息以掩涕兮，哀民生之多艰。
余虽好修姱以鞿羁兮，謇朝谇而夕替。
既替余以蕙纕兮，又申之以揽茝。
亦余心之所善兮，虽九死其犹未悔。
怨灵修之浩荡兮，终不察夫民心。
众女嫉余之蛾眉兮，谣诼谓余以善淫。
固时俗之工巧兮，偭规矩而改错。
背绳墨以追曲兮，竞周容以为度。
忳郁邑余侘傺兮，吾独穷困乎此时也。
宁溘死以流亡兮，余不忍为此态也。
鸷鸟之不群兮，自前世而固然。
何方圜之能周兮，夫孰异道而相安？
屈心而抑志兮，忍尤而攘诟。
伏清白以死直兮，固前圣之所厚。
悔相道之不察兮，延伫乎吾将反。
回朕车以复路兮，及行迷之未远。
步余马于兰皋兮，驰椒丘且焉止息。
进不入以离尤兮，退将复修吾初服。
制芰荷以为衣兮，集芙蓉以为裳。
不吾知其亦已兮，苟余情其信芳。
高余冠之岌岌兮，长余佩之陆离。
芳与泽其杂糅兮，唯昭质其犹未亏。
忽反顾以游目兮，将往观乎四荒。
佩缤纷其繁饰兮，芳菲菲其弥章。
民生各有所乐兮，余独好修以为常。
虽体解吾犹未变兮，岂余心之可惩。
女嬃之婵媛兮，申申其詈予，曰：
「鲧婞直以亡身兮，终然夭乎羽之野。
汝何博謇而好修兮，纷独有此姱节？
薋菉葹以盈室兮，判独离而不服。」
众不可户说兮，孰云察余之中情？
世并举而好朋兮，夫何茕独而不予听？
依前圣以节中兮，喟凭心而历兹。
济沅、湘以南征兮，就重华而敶词：
启《九辩》与《九歌》兮，夏康娱以自纵。
不顾难以图后兮，五子用失乎家衖。
羿淫游以佚畋兮，又好射夫封狐。
固乱流其鲜终兮，浞又贪夫厥家。
浇身被服强圉兮，纵欲而不忍。
日康娱而自忘兮，厥首用夫颠陨。
夏桀之常违兮，乃遂焉而逢殃。
后辛之菹醢兮，殷宗用而不长。
汤、禹俨而祗敬兮，周论道而莫差。
举贤才而授能兮，循绳墨而不颇。
皇天无私阿兮，览民德焉错辅。
夫维圣哲以茂行兮，苟得用此下土。
瞻前而顾后兮，相观民之计极。
夫孰非义而可用兮？孰非善而可服？
阽余身而危死兮，览余初其犹未悔。
不量凿而正枘兮，固前修以菹醢。
曾歔欷余郁邑兮，哀朕时之不当。
揽茹蕙以掩涕兮，沾余襟之浪浪。
跪敷衽以陈辞兮，耿吾既得此中正。
驷玉虬以桀鹥兮，溘埃风余上征。
朝发轫于苍梧兮，夕余至乎县圃。
欲少留此灵琐兮，日忽忽其将暮。
吾令羲和弭节兮，望崦嵫而勿迫。
路漫漫其修远兮，吾将上下而求索。
饮余马于咸池兮，总余辔乎扶桑。
折若木以拂日兮，聊逍遥以相羊。
前望舒使先驱兮，后飞廉使奔属。
鸾皇为余先戒兮，雷师告余以未具。
吾令凤鸟飞腾兮，继之以日夜。
飘风屯其相离兮，帅云霓而来御。
纷总总其离合兮，斑陆离其上下。
吾令帝阍开关兮，倚阊阖而望予。
时暧暧其将罢兮，结幽兰而延伫。
世溷浊而不分兮，好蔽美而嫉妒。
朝吾将济于白水兮，登阆风而绁马。
忽反顾以流涕兮，哀高丘之无女。
溘吾游此春宫兮，折琼枝以继佩。
及荣华之未落兮，相下女之可诒。
吾令丰隆乘云兮，求宓妃之所在。
解佩纕以结言兮，吾令謇修以为理。
纷总总其离合兮，忽纬繣其难迁。
夕归次于穷石兮，朝濯发乎洧盘。
保厥美以骄傲兮，日康娱以淫游。
虽信美而无礼兮，来违弃而改求。
览相观于四极兮，周流乎天余乃下。
望瑶台之偃蹇兮，见有娀之佚女。
吾令鸩为媒兮，鸩告余以不好。
雄鸠之鸣逝兮，余犹恶其佻巧。
心犹豫而狐疑兮，欲自适而不可。
凤皇既受诒兮，恐高辛之先我。
欲远集而无所止兮，聊浮游以逍遥。
及少康之未家兮，留有虞之二姚。
理弱而媒拙兮，恐导言之不固。
世溷浊而嫉贤兮，好蔽美而称恶。
闺中既以邃远兮，哲王又不寤。
怀朕情而不发兮，余焉能忍而与此终古？
索琼茅以筳篿兮，命灵氛为余占之。
曰：「两美其必合兮，孰信修而慕之？
思九州之博大兮，岂惟是其有女？」
曰：「勉远逝而无狐疑兮，孰求美而释女？
何所独无芳草兮，尔何怀乎故宇？」
世幽昧以昡曜兮，孰云察余之善恶？
民好恶其不同兮，惟此党人其独异！
户服艾以盈要兮，谓幽兰其不可佩。
览察草木其犹未得兮，岂珵美之能当？
苏粪壤以充祎兮，谓申椒其不芳。
欲从灵氛之吉占兮，心犹豫而狐疑。
巫咸将夕降兮，怀椒糈而要之。
百神翳其备降兮，九疑缤其并迎。
皇剡剡其扬灵兮，告余以吉故。
曰：「勉升降以上下兮，求矩矱之所同。
汤、禹俨而求合兮，挚、咎繇而能调。
苟中情其好修兮，又何必用夫行媒？
说操筑于傅岩兮，武丁用而不疑。
吕望之鼓刀兮，遭周文而得举。
宁戚之讴歌兮，齐桓闻以该辅。
及年岁之未晏兮，时亦犹其未央。
恐鹈鴃之先鸣兮，使夫百草为之不芳。」
何琼佩之偃蹇兮，众薆然而蔽之。
惟此党人之不谅兮，恐嫉妒而折之。
时缤纷其变易兮，又何可以淹留？
兰芷变而不芳兮，荃蕙化而为茅。
何昔日之芳草兮，今直为此萧艾也？
岂其有他故兮，莫好修之害也！
余以兰为可恃兮，羌无实而容长。
委厥美以从俗兮，苟得列乎众芳。
椒专佞以慢慆兮，樧又欲充夫佩帏。
既干进而务入兮，又何芳之能祗？
固时俗之流从兮，又孰能无变化？
览椒兰其若兹兮，又况揭车与江离？
惟兹佩之可贵兮，委厥美而历兹。
芳菲菲而难亏兮，芬至今犹未沬。
和调度以自娱兮，聊浮游而求女。
及余饰之方壮兮，周流观乎上下。
灵氛既告余以吉占兮，历吉日乎吾将行。
折琼枝以为羞兮，精琼爢以为粻。
为余驾飞龙兮，杂瑶象以为车。
何离心之可同兮？吾将远逝以自疏。
邅吾道夫昆仑兮，路修远以周流。
扬云霓之晻蔼兮，鸣玉鸾之啾啾。
朝发轫于天津兮，夕余至乎西极。
凤皇翼其承旗兮，高翱翔之翼翼。
忽吾行此流沙兮，遵赤水而容与。
麾蛟龙使梁津兮，诏西皇使涉予。
路修远以多艰兮，腾众车使径待。
路不周以左转兮，指西海以为期。
屯余车其千乘兮，齐玉轪而并驰。
驾八龙之婉婉兮，载云旗之委蛇。
抑志而弭节兮，神高驰之邈邈。
奏《九歌》而舞《韶》兮，聊假日以媮乐。
陟升皇之赫戏兮，忽临睨夫旧乡。
仆夫悲余马怀兮，蜷局顾而不行。
乱曰：已矣哉！
国无人莫我知兮，又何怀乎故都！
既莫足与为美政兮，吾将从彭咸之所居！`
let colors = ['#ff4757', '#ff7f50', '#eccc68', '#7bed9f', '#2ed573', '#1e90ff', '#5352ed', '#2f3542', '#fd79a8', '#6c5ce7', '#63cdda', '#2bcbba'];
let list = LISAO.split(/\s+/);
let avatars = ['./img/avatar1.jpg', './img/avatar2.png'];
let DanMuPool = [];
for (let i = 0; i < list.length; i++) {
let item = {
danmu: '我是一条弹幕',
color: colors[Math.floor(Math.random() * colors.length)],
href: '#' + new Date().getTime(),
avatar: './img/avatar1.jpg',
};
item.danmu = list[i];
item.color = colors[Math.floor(Math.random() * colors.length)];
item.href = '#' + new Date().getTime();
item.avatar = avatars[Math.floor(Math.random() * avatars.length)];
DanMuPool.push(item);
}
window.danmu = $MDM({
locate: '.AwesomeDanMu',
maxDanMuWidth: 300,
pool: DanMuPool,
curtain: 'url(./img/curtain.jpg)',
loop: true
})
;
// danmu.shotPool(DanMuPool);
document.getElementById('tucao').onclick = function () {
let tucao = document.getElementById('tucaotext').value;
// danmu.say(tucao);
document.getElementById('tucaotext').value = '';
danmu.shot({
avatar: './img/avatar.jpg',
danmu: tucao
})
}
document.getElementById('tucaotext').onkeyup = function () {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById('tucao').click();
}
}
</script>
</body>
</html>