实现简易网易云音乐播放器_hbuilderx写音乐播放器代码

作者：羊村懒王 | 2024-03-16 05:55:26

踩

hbuilderx写音乐播放器代码

实现简易网易云音乐播放器

文章目录

实现简易网易云音乐播放器
前言
- 该功能实现了单机版，可以在浏览器上运行，满足了音乐播放器应有核心功能
一、需要材料
二、html部分
三、css部分
四、js代码
五、效果图

前言

该功能实现了单机版，可以在浏览器上运行，满足了音乐播放器应有核心功能

一、需要材料

HBuilder编辑器
jQuery库
图标素材，音乐素材

二、html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网易云音乐播放器</title>
		<link rel='stylesheet'href='css/网易云播放器.css'type='text/css'/>
		<script src='js/jquery3.5.1.min.js'></script>
		<script src='js/data.js'></script>
		<script src='js/网易云播放器.js'></script>
	</head>
	<body>	
		<div id='box'>
			<header>
				<ul>
					<li><img src='img/icon_c3uo4zcbvw9/wangyiyun.png'></li>
					<li><b>网易云音乐</b></li>
					<li id='seek'><input placeholder='搜索音乐'>
					    <ul>
					       
			        	</ul>
					</li>
					<li><img src='img/icon_c3uo4zcbvw9/denglu.png'></li>
					<li id='logIn'><b>登陆</b>
					     <ul id='logIn_ul'>
							 <li>个人中心</li>
							 <li>退出登陆</li>
						 </ul>
					</li>
					<li><b>皮肤</b></li>
					<li><img src='img/icon_c3uo4zcbvw9/pifu.png'></li>
					<li><input type='color' id='color'></li>
				</ul>
			</header>
            <article id='box_body'>
				<div id='box_body_1'>
					<h1>他不懂</h1>
					<ul class='body_ul_1'>
						<li>专辑：<span></span></li>
						<li>歌手：<span></span></li>
						<li>专辑：<span></span></li>
					</ul>
					<ul class='body_ul_2'>
						
					</ul>
				</div>
                <div id='box_body_2'>
					<img src='img/icon_c3uo4zcbvw9/zhuomian.png' id='picture'>
					<ul>
						<li><img src='img/灰心.jpg'>喜欢</li>
						<li><img src='img/收藏.jpg'>收藏</li>
						<li><img src='img/下载.jpg'>下载</li>
						<li><img src='img/分享.jpg'>分享</li>
					</ul>
				</div>
			    <div id='box_body_3'>
				    <hr>	
					<ul class="b3_ul">
						<li>听友评论<span id='span_1'>(已有<span id='span_2'>0</span>条评论)</span>
					    </li>
						<li>
							<input>
						</li>
						<li>
							<b>精彩评论</b>
						</li>
					</ul>
					<ul id='comment'>
						<li class='addLi'>
							<img src='"http://p1.music.126.net/mW53BkMgGy37I7yVrUg-aQ==/109951163117902077.jpg"'>
							<ul>
								<li><span>小柠檬：</span>听的也想哭老了你们还好吗</li>
								<li>2018-08-01 14:36:2</li>
								<li>回复</li>
								<li>|</li>
								<li>分享</li>
								<li>|</li>
								<li>点赞</li>
							</ul>
						</li>
						
					</ul>
				</div>
				
		
			</article>	
				
			<footer>
				<audio src='music/jn.mp3'></audio>
				<ul id='foot_ul'>
					<li><img src='img/icon_c3uo4zcbvw9/shangyiqu.png' class='togg' title='上一曲'></li>
					<li><img src='img/icon_c3uo4zcbvw9/bofang_1.png' id='playBack' title='播放'></li>
					<li><img src='img/icon_c3uo4zcbvw9/next.png' class='togg'title='下一曲'></li>
					<li><span>0:00</span></li>
					<li><input id='plan'type='range'min='0'max='0'value='0'style='width: 400px;'></li>
					<li><span>0:00</span></li>
					<li><img  id='trumpet'src='img/icon_c3uo4zcbvw9/bofang.png' title='音量:50%'></li>
					<li><input id='volume'type='range'min='0'max='1'step='0.01'></li>
					<li><img src='img/icon_c3uo4zcbvw9/shunxubofang.png'   id='random' title="顺序播放"></li>
					<li id='menus'><img src='img/icon_c3uo4zcbvw9/caidan.png' title="列表菜单"></li>
					<li><img src='img/icon_c3uo4zcbvw9/zhuomiangeci.png' id='img_zuomian'title='桌面歌词'></li>
				</ul>
			</footer>
			<div id='list'>
				<div>
					<div class='list_1_1'>
						<div>播放列表</div>
						<div>历史纪录</div>
					</div>
				</div>
				
				<p>总共<span></span>首 <span>清空</span></p>
				<ul class='list_ul_1'>
					
				</ul>
				<ul class='list_1_2'》					
				</ul>
			</div> 		
			<div id='masklayer'></div>
			<div class='adddiv'>
				<img src='img/关闭.jpg'>
				<ul class='add'>
					<li><b>用户登录</b></li>
					<li><input placeholder="用户名" ></li>
					<li><input placeholder="密码" type='password'></li>
                    <li><span id='hint'></span><span><input type='checkbox'id='check'>记住密码</span></li>
					<li>登陆</li>
				</ul>
				<ul id='hint_1'> 
					<li>edhsaiufhsjhf</li>
				</ul>
			</div>
		 <div id='remark'>
			 <img src='img/关闭.jpg'>
			 <p>歌曲：<span></span></p>
			 <textarea> 
			 </textarea>
			 <b>评论</b>
			 
		 </div>
		
		</div>	
		<div id='desktop'>
	    	好音乐用网易
	     	<img src='img/关闭.jpg'>
		</div>
		<div id='show'>
			
		</div>
		
	</body>
</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

三、css部分


*{
	margin:0;
	padding:0;
}
#box{
    width:1200px;
	height:750px;
	margin:0 auto;
	border:1px solid black;
	position:relative;
	z-index: 0;
}
#box header{
	width:100%;
	height:8.333%;
	background-color:#6699cc;
	line-height:62.5px;
	position:relative;
	
}
#box article{
	width:100%;
	height:83.333%;
	background-color:honeydew;
	overflow-y:scroll;
	z-index: 0;
	position:relative;
}
#box footer{
	width:100%;
	height:8.333%;
	background-color:#6699cc;
	font-size:16px;
}

#box header li {
	list-style:none;
	float:left;
	margin-right:10px;
	font-size:20px;
	height:30px;
	line-height:30px;
	text-align:center;
	margin-top:16.25px;
}
#box header li img{
	width:30px;
	height:30px;
	border-radius:3px;
}
#box header input{
	height:25px;
	border-radius:10px;
}
#box>header>ul>li:nth-child(1){
	margin-left:16.25px;
}
#box>header>ul>li:nth-child(2){
	color:white;
	margin-left:5px;
}
#box>header>ul>li:nth-child(3){
	margin-left:100px;
    position: relative;
}
#box>header>ul>li:nth-child(3) ul{
	position: absolute;
	z-index: 90;
	background-color: white;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	overflow:hidden;
	display:none;
    width:100%;
	
}
#box>header>ul>li:nth-child(3) ul li{
	clear: left;
	width: 100%;
	text-align: left;
}
#box>header>ul>li:nth-child(3) ul li:hover{
	width: 100%;
	background-color:cadetblue;
}
#box>header>ul>li:nth-child(4){
	margin-left:400px;
}
#box>header>ul>li:nth-child(5){
	position:relative;
}
#logIn{
	width:100px;
}
#box>header>ul>li:nth-child(5) ul{
	position:absolute;
	width:100px;
	z-index: 1;
	text-align: center;
	display: none;
	
}
#box>header>ul>li:nth-child(5) ul li{
	text-align: center;
	width:100%;
	
}
#box>header>ul>li:nth-child(5) ul li:hover{
	background-color: #DA70D6;
	
}
#box footer ul li{
	list-style: none;
	float:left;
	text-align: center;
	line-height:30px;
	margin-left:30px;
	margin-top:16px;
	height:30px;
}
#box footer ul li:nth-child(4){
	width:50px;
}
#box footer ul li img{
	width:30px;
	height:30px;
	border-radius:3px;
}

#box footer ul input:nth-child(2){
	width:100px;
}
#box_body_1{
	margin-top: 50px;
	width:45%;
	height:450px;
	float:right;
	margin-left:12%;
/* 	background-color:palegreen; */
	font-size:20px;
	margin-right:3%;
}
#box_body_2{
	width:30%;
	height:450px;
	/* background-color: aqua; */
	float:right;
	margin-top: 50px;
	position:relative;
	font-size:20px;
	text-align: center;
}
#box_body_2>img{
	width:200px;
	height:200px;
	margin:0 auto;
	border:60px solid black;
	border-radius:50%;
}
#box_body_2 ul{
	margin-top: 100px;
}
#box_body_2 ul li{
	list-style: none;
	float:left;
	border:1px solid gainsboro;
	
}
#box_body_2 ul li:nth-child(2){
	margin-left:24px;
	margin-right:24px;
}
#box_body_2 ul li:nth-child(3){
	margin-right:24px;
}
#box_body_2 ul li img{
	width:20px;
	height:20px;
}
.body_ul_1 li{
	float:left;
	width:33.333%;
	list-style:none;
	margin-top: 10px;
}
.body_ul_1 li span{
	color:blue;
}
.body_ul_2{
	margin-top:20px;
	width:540px;
	height:370px;
	overflow-y:scroll;
	font-size:20px;
}
.body_ul_2 li{
	height:50px;
	line-height: 50px;
	list-style: none;
    transition: all 1s linear;
}
.body_ul_2 li:hover{
	background-color: #ADFF2F;
	cursor:pointer;
}
#box_body_3{
	top:100px;
	position:relative;
	width:80%;
	margin:0 auto;
	/* border-top:1px solid gold; */
}
.b3_ul li{
	margin-top: 20px;
	list-style:none;
}
.b3_ul li:nth-child(1){
	font-size:25px;
}
.b3_ul li #span_1{
	font-size:14px;
}
.b3_ul li #span_2{
	color:lightgray;
} 
.b3_ul li input{
	width:100%;
	height:30px;
}
.b3_ul li:nth-child(3){
	font-size:16px;
	border-bottom: 1px dashed black;
}
.b3_ul_li{
	
}

#comment{
	width:100%;
	display:block;
	position:absolute;
}
#comment .addLi{
	list-style: none;
	position:relative;
}
.addLi{
	width:100%;
	height:60px;
}
.addLi img{
	width:50px;
	height:50px;
	border-radius:50%;
	float:left;
}
.addLi ul{
	font-size:14px;
	display: inline;
	list-style-type: none;
	float:left;
	margin-left:30px;
	width:90%;
}
.addLi li:nth-child(1) span{
	color:blue;
}
.addLi ul li{
	list-style:none;
	margin-top:5px;
}
.addLi ul li:nth-child(2){
	float:left;
	color:seagreen;
}
.addLi ul li:nth-of-type(n+3){
	float:right;
	color:seagreen;
}
#list{
	width:500px;
	height:500px;
	position:absolute;
	right: 0;
	top:190px;
    font-size:20px;	
	background-color:white;
	overflow:hidden;
	display: none;
}
#list p{
	font-size: 16px;;
}
#list>div{
	width:100%;
	height:60px;
	background-color: #D3D3D3;
	/* line-height: 60px;; */
	position:relative;
	top:0;
}
.list_1_1{
	float:left;
	width:200px;
	height:30px;
    margin-left:150px;
	margin-top: 15px;
	border-radius:15px;
	background-color: antiquewhite;
	overflow:hidden;
		
  }
 .list_1_1 div:nth-child(1){
	 background-color: antiquewhite;
 }
 .list_1_1 div:nth-child(2){
 	 background-color:white;
 }
.list_1_2{
	display: none;
	
}
.list_1_2 li:hover{
	background-color:indianred;
}
#list ul li{
	height:50px;
	line-height: 50px;
	list-style: none;
}
#list ul li:hover{
	background-color:pink;
	cursor:pointer;
}
#list>div>div>div{
	width:100px;
	height:30px;
	text-align: center;
	line-height: 30px;
	float:left;
}
#masklayer{
	position:absolute;
	width:100%;
	height:100%;
	background-color: #000000;
	opacity: 0.2;
	top:0;
	display:none;
}
.adddiv{
	width:400px;
	height:300px;
    background-color:greenyellow;
    position:absolute;
	top:50%;
	left:50%;
	margin-top:-150px;
	margin-left:-200px;
	display:none;
}
.adddiv img{
	width:20px;
	height:20px;
	float:right;
}
.adddiv .add{
	width:70%;
	margin:0 auto;
}
.adddiv .add li{
	list-style:none;
	height:50px;
	text-align: center;
	font-size:25px;
	width:280px;
	line-height: 50px;
}
.adddiv ul li:last-child{
	background-color: violet;
}
.adddiv ul li:nth-child(2) input{
	height:30px;
	width:100%;
}
.adddiv ul li:nth-child(3) input{
	height:30px;
	width:100%;
}
.adddiv ul li:nth-child(4) span{
	font-size:14px;
	float:right;
	top:18px;
}
#hint_1{
     position:absolute;
	 width:70%;
	 left:15%;
	 top:95px;
	 background-color:white;
	 display: none;
	 height:200px;
}

#hint_1 li{
	height:50px;
	line-height:50px;
	list-style: none;
	font-size: 20px;;
	background-color: white;
}
#hint_1 li:hover{
	color:red;
}
#hint{
	font-size:14px;
	float:left;
	top:18px;
	color:red;
}
.rotate{
	animation:xuanzhuan 10s linear infinite;
	
}
@keyframes xuanzhuan{
     0%{
		 transform: rotate(0deg);
	 }
	 50%{
		 transform: rotate(180deg);
	 }
	 100%{
		 transform:rotate(360deg);
	 }
}
.list_style{
	animation: ;
	background-color:#99ccff;
}
#desktop{
	width: 1200px;
	height:100px;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.4) 98%, #FFFFFF 100%); 
	position:absolute;
	top:80%;
	left:50%;
	margin-left:-600px;
	text-align:center;
	line-height:100px;
	font-size:60px;
	color:ghostwhite;
	display:none;
}
#desktop img{
	position:absolute;
	right:0;
	top:0;
	width:30px;
	height:30px;
	transition: all 1s linear;
}
/* #desktop{
    color: #5BA6DF;
    text-shadow: 1px 1px 10px #5BA6DF;
    background-image: -webkit-linear-gradient(left, #2EC7C9, #E6D205 25%, #2EC7C9 50%,         #E6D205 75%, #2EC7C9 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 4s infinite linear;
    font-family:Chaparral Pro Light;
	letter-spacing:2px;
	font-size:56px;
  }
 
 @keyframes masked-animation {
            0% {
                background-position: 0 0;   
            }
            100% {
                background-position: -100% 0;
            }
        }
 */
#remark{
	width:500px;
	height:350px;
	background-color:#FFC0CB;
	position:absolute;
	left:50%;
	top:50%;
	margin-top:-200px;
	margin-left:-250px;
	display: none
	}
#remark textarea{
	width:400px;
	height:200px;
	position:absolute;
	left:50px;
	font-size:20px;
}
#remark p{
	height:60px;
	font-size:30px;
	margin-left:30px;
	line-height:60px;
}
#remark b{
	width:60px;
	height:40px;
	position:absolute;
	right:50px;
	bottom:30px;
	font-size:30px;
	line-height:40px;
}
#remark img{
	width:30px;
	height:30px;
	position:absolute;
	right:0;
	top:0;
	c
}
#remark b:hover{
	cursor: pointer;
	color:darkred;
	background-color:deepskyblue;
}
#list p span:hover{
	background-color: #00BFFF;
}

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
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537

四、js代码

$(function(){
	var n=0;//全局变量
	var unde=[];//用来识别以播放的歌曲
	var degs=0;//旋转度数
	//获取音频标签
	var timess;
	var true_false=true;
	var monitor_rotate=false;//监听光盘是否转动
	var audio=$('#box footer audio').get(0);
	var temp_ss=[500];
	function deg(){
		degs++;
		$('#picture').css('transform','rotate('+degs+'deg)')
		monitor_rotate=true;
	}

	//1播放暂停按钮
	var setTime;
	$('#playBack').on('click',function(){
	    if(audio.paused){//paused值为真时表示暂停状态，为假时表示播放状态
			audio.play();//播放音频文件
			$('#playBack').attr('src','img/icon_c3uo4zcbvw9/zanting.png');
		    // $('#picture').addClass('rotate')
			if(monitor_rotate){
				clearInterval(setTime);
			}
		    setTime=setInterval(deg,20);
		}else{
			audio.pause();
			$('#playBack').attr('src','img/icon_c3uo4zcbvw9/bofang_1.png');
		    // $('#picture').removeClass();
            clearInterval(setTime);
			monitor_rotate=false;
		}		
	});
	// setInterval(function(){
	// 	console.log('我要相信自己');
	// },temp_ss[0]);
	//2获取音频长度
	function sum_time(){
		audio.oncanplay=function(){
			var t;
			t=audio.duration;
			// console.log(t);
			$('#plan').attr('max',t);
			// console.log($('#plan').attr('max'));
			t=parseInt(t/60)+':'+(parseInt(t%60)<9?'0'+parseInt(t%60):parseInt(t%60));//这里的长度是随歌曲固定的
			var temp=$('#foot_ul li').eq(5).text(t);		
		}	
	}
	//3当音量改变的时候
	audio.onvolumechange=function(){
		var m=audio.volume;
        $('#volume').val(m);
		// console.log('音量设置');
	}
	//4设置音量
	$('#volume').on('input',function(){
		var temp=$('#volume').val();
		var str=parseInt((temp/1)*100)+'%';
		if(temp==0){
			$('#trumpet').attr('src','img/icon_c3uo4zcbvw9/jingyin_1.png').attr('title','静音');
		}else{
		    $('#trumpet').attr('src','img/icon_c3uo4zcbvw9/bofang.png').attr('title','音量:'+str);
		
		}
		audio.volume=temp;
	});
	//5静音设置
	$('#trumpet').on('click',function(){
		if(audio.volume!=0){
			$('#trumpet').attr('src','img/icon_c3uo4zcbvw9/jingyin_1.png').attr('title','静音');
			audio.volume=0;
			$('#plan').val(0);
		}else{
			audio.volume=0.5;
			var str=(0.5/1)*100+'%';
			$('#trumpet').attr('src','img/icon_c3uo4zcbvw9/bofang.png').attr('title','音量:'+str);
		}
	});//对象.currentTime,获取当前音频播放时间，反过来就是设置播放时间；
	//6显示音频播放时间
	audio.ontimeupdate=function(){
		var time=parseInt(this.currentTime);
		$('#plan').val(time);
		time=(parseInt(time/60)>0?parseInt(time/60):'0')+':'+(parseInt(time%60)>9?parseInt(time%60):'0'+parseInt(time%60));
	    $('#foot_ul li').eq(3).text(time);
		// console.log(time);
	}
	//7通过滑动条设置播放时间
	var audio_change=0;//记录状态；
	$('#plan').on('input',function(){
		if(audio.paused){
			 
		}else{
			audio.pause();
			audio_change=1;
		}
		var t=$('#plan').val();
		audio.currentTime=t;
		t=(parseInt(t/60)>0?parseInt(t/60):'0')+':'+(parseInt(t%60)>9?parseInt(t%60):'0'+parseInt(t%60));
		$('#foot_ul li').eq(3).text(t);
	});
	$('#plan').on('mouseup',function(){
		if(audio_change==1){
			audio.play();
			audio_change=0;
		}
		
	});
	//8打开播放菜单
	$('#menus').on('click',function(){	
		var list=$('#list');
		if(list.is(':hidden')){
			list.show();
		}
		else{
			list.hide();
		}
	})
	
	//9显示播放列表
	$('.list_1_1>div').on('click',function(){
		var index=$(this).index();
		if(index==0){
			$('#list ul').hide();
			$('#list ul').eq(0).show();
			var t=musicData.length;
			$('#list p span').eq(0).text(t);
		}
		else{
			$('#list ul').hide();
			$('#list ul').eq(1).show();
			var t=$('.list_1_2 li').length;
			$('#list p span').eq(0).text(t);
		}
		$('.list_1_1 div').css('background-color','white');
		$(this).css('background-color','antiquewhite');
	})
	//10换皮肤颜色
	var replace='pink';
	$('#color').on('input',function(){
		var temp=$('#color').val();
		$('#box header').css('background-color',temp);
		$('#box footer').css('background-color',temp);
	 //    replace=temp;
		// var r=parseInt(temp.slice(1,3),16);
  //   	var g=parseInt(temp.slice(3,5),16);
  //   	var b=parseInt(temp.slice(5),16);
		// var r_1=parseInt(replace.slice(1,3),16);
		// var g_1=parseInt(replace.slice(3,5),16);
		// var b_1=parseInt(replace.slice(5),16);
		// $('#desktop').css('color','white').css('background-image','rgba('+r,g,b+')');
		// console.log(r,g,b);
	});
	//点击登陆会弹出一个登陆框
	$('#logIn').on('click',function(){
		var temp=$('#logIn b').text();
		if(temp=='登陆'){
			$('#masklayer').show();
			$('.adddiv').show();	
		}
		else{
			$('#logIn_ul').show();
		}
	})
	//11取消登录框
	$('.adddiv img').on('click',function(){
		$('#masklayer').hide();
		$('.adddiv').hide();
	});
	//12上一曲
	$('#foot_ul li:nth-child(1)').on('click',function(){
		n--;
		var temp=!audio.paused;;
		//上一首的播放状态；
		if(n<0){
			n=3;
		}
		$(audio).attr('src',musicData[n].url);
		// $('#playBack').attr('src','img/暂停.jpg');
	    fill(n);
		addList(n);
		if(temp){//为真时就接这播放，为假时就不播放
			audio.play();
		}
	});
	//将歌曲添加到历史纪录的函数
	function addList(n){
		var li=$('.list_ul_1 li').eq(n).clone();
		var ht=li.html();
		var ul_2=$('.list_1_2');
		var t=0;
		li.css('background-color','white');
		for(var i=0;i<unde.length;i++){
			if(unde[i].name[0].innerHTML==ht){
				t++;
			}
		}
		if(t===0&&unde.length<$('.list_ul_1 li').length){
			ul_2.append(li);
			var arr={
				  name:li,
				  id:n
			};
			unde.push(arr);//将当前数据保存在一个数组里
		}
		var log=$('.list_1_2 li').length;
		$('#list p span').eq(0).text(log);
	}
	//13下一曲
	$('#foot_ul li:nth-child(3)').on('click',function(){
		n++;
		var temp=!audio.paused;
		if(n>3){
			n=0;
		}
		$(audio).attr('src',musicData[n].url);
		// $('#playBack').attr('src','img/暂停.jpg');		
		fill(n);
		addList(n);
		if(temp){//为真时就接这播放，为假时就不播放
			audio.play();
		}
	});
	//14一个专门用来填充数据的函数
	fill(n);
	function fill(n){
		//切歌清空桌面歌词
		// $('#desktop').html('-----网易云音乐-----<img src="img/icon_c3uo4zcbvw9/zhuomiangeci_guanbi.png">');
		
		var temp=lrcs[n].lyric[0].lineLyric;
		var str="<img src='img/icon_c3uo4zcbvw9/zhuomiangeci_guanbi.png'>";
		for(var a=0;a<temp.length;a++){
		     str+='<span>'+temp[a]+'</span>'
		}
		$('#desktop').html(str); 
		//放大图片
		sum_time();
		$(audio).attr('src',musicData[n].url);
		$('#box_body_2>img').attr('src',musicData[n].cover);
		//专辑信息，歌词
		$('#box_body_1 h1').text(musicData[n].song);
		$('#box_body_1 li:nth-child(1) span').text(musicData[n].album);//专辑
		$('#box_body_1 li:nth-child(2) span').text(musicData[n].singer);//歌手
		$('#box_body_1 li:nth-child(3) span').text(musicData[n].source);//专辑
		
		$('.body_ul_2').html('');//清空歌词列表
		for(var i=0;i<lrcs[n].lyric.length;i++){
			var temp=lrcs[n].lyric[i].lineLyric;
			$("<li>"+temp+"</li>").appendTo($('.body_ul_2'));
		}//放歌词
		//放评论
		$('#comment').html('');
		for(var i=0;i<musicData[n].msg.length;i++){
			var use=parseInt(musicData[n].msg[i].userId)-1;
			var temp=$("<li class='addLi' style='margin-top:30px'>"
								+"<img src="+users[use].pic+">"
								+"<ul>"
								+	"<li><span>"+users[use].name+"：</span>"+musicData[n].msg[i].megCon+"</li>"
			                    +	"<li>"+musicData[n].msg[i].date+"</li>"
								+	"<li>回复</li>"
			                    +	"<li>|</li>"
								+	"<li>分享</li>"
								+	"<li>|</li>"
			                    +	"<li>点赞</li>"
							+	"</ul>"
						+	"</li>");
			temp.appendTo($('#comment'));	
		}
		//添加到播放列表
		$('.list_ul_1').html('');
		for(var i=0;i<musicData.length;i++){
			$('.list_ul_1').append($('<li>'+musicData[i].song+'<span style="right:0px;position:absolute;">'+musicData[i].singer+'</span></li>'));
			var temp=musicData.length;
			$('#list p span:nth-child(1)').text(temp);
		}
		//歌名列表样式
		$('.list_ul_1 li').removeClass();
		$('.list_ul_1 li').eq(n).addClass('list_style');
		//滚动条
		scroll_2(n);
		//评论框歌曲名
		$('#remark p span').text(musicData[n].song);
	}
	//15播放列表里选择歌曲
	$('.list_ul_1').on('click','li',function(){
		var index=$(this).index();
		var ht=$(this).html();
		var li=$(this).clone();
        var ul_2=$('.list_1_2');
		var li_2=$('.list_1_2 li');
		var t=0;
		for(var i=0;i<li_2.length;i++){
			if(unde[i].name[0].innerHTML==ht){
				t++;
			}
		}
		if(t===0){
			ul_2.append(li);
			var dx={
				  name:li,
				  id:index
			};
			unde.push(dx);//将当前数据保存在一个数组里
		}
		fill(index);
		audio.play();
		$('#playBack').attr('src','img/暂停.jpg');
	})
	//    循环单曲随机,如何单曲循环，如何自动播放下一首；默认是顺序播放
	//定时器；
	var title_arr=['顺序播放','单曲循环','全部循环','随机播放'];
	var img_arr=['img/icon_c3uo4zcbvw9/shunxubofang.png','img/icon_c3uo4zcbvw9/danquxunhuan.png','img/icon_c3uo4zcbvw9/quanbuxunhuan.png','img/icon_c3uo4zcbvw9/random.png'];
	var index_p=0;
	$('#random').on('click',function(){
		index_p++;
	    if(index_p==title_arr.length){
			index_p=0;
		}
		$(this).attr('src',img_arr[index_p]).text('title',title_arr[index_p]);	
	});
	//默认情况
	function mo(n){
		if(n<musicData.length){
			fill(n);
			audio.play();
		}
		else{
			n=musicData.length-1;
			$('#playBack').attr('src','img/icon_c3uo4zcbvw9/zanting.png');
			$('#picture').removeClass();
		}
	}
	audio.onended=function(){
		// mo(n);
		switch(index_p){
			case 0://顺序播放，播完就结束了
			    n++;
				if(n<musicData.length){
					fill(n);
					audio.play();
				}else{
					n=musicData.length-1;
					$('#playBack').attr('src','img/icon_c3uo4zcbvw9/bofang_1.png');
					$('#picture').removeClass();
				}
			    break;
			case 1://单曲循环 播放当前这首
			    fill(n);
				audio.play();
				break;
			case 2://全部循环·
			    n++;
				if(n==musicData.length){
					n=0;
				}
				fill(n);
				audio.play();			
				break;
			case 3://随机播放
			    var temp=Math.floor(Math.random()*musicData.length);
				fill(temp);
				audio.play();
				break;
		}
	}
	//21歌词同步显示 滚动条
	function scroll(n){
		    var scrollTop=0;
		    var sum=0;//监听变量
		    var ts=0;//监听变量
		    var gun=$('.body_ul_2').get(0);
		    gun.scrollTop=0;//设置滚动条初始值
		    audio.ontimeupdate=function(){
				 //获取当前播放状态
				 var time=this.currentTime;
				 $('#plan').val(time);
				 time=(parseInt(time/60)>0?parseInt(time/60):'0')+':'+(parseInt(time%60)>10?parseInt(time%60):'0'+parseInt(time%60));
				 $('#foot_ul li').eq(3).text(time);
				 var t=parseInt(audio.currentTime);
				 console.log(t);
				 //还要获取列表中的歌词信息
				 //如何让滚动条也跟着同步？
				 //事件监听在不停的变化，强制转换之后，t，有时候一秒中之内会是几个相同的数，
				 //为了确保，每段歌词，只操作一次，定义监听变量
				 var list_gechi=$('.body_ul_2 li');	
				 for(var i=0;i< lrcs[n].lyric.length;i++){
					 if(lrcs[n].lyric[i].time==t&&sum==0){
						list_gechi.removeClass();
						list_gechi.eq(i).addClass('list_style');
						scrollTop=50*i-150;
						gun.scrollTop=scrollTop;		
		                sum++;
						ts=t;			
					}
					if(t-1==ts){
						sum=0;
					}
				 }
	    	};
		
	}
	//补充 歌词列表暂停滚动
    $('.body_ul_2').hover(function(){
		true_false=false;
	},function(){
		true_false=true;
	});
	//歌词同步
	function scroll_2(n){
		var gun=$('.body_ul_2').get(0);
		gun.scrollTop=0;//设置滚动条初始值
		var scrollTop=0;
		var on_off=0
		var on_off_1=0;
		var on_off_2=0;
		var on_off_3=0;
		var color_temp=0;
		var color_r='#'//随机颜色；
		var arr=[];//用来保存句歌词的时间差
		for(var i=0;i<lrcs[n].lyric.length;i++){
			arr.push(lrcs[n].lyric[i].time);
		}
		//其实这个时间最大值到最小值的差才是滚动条真正要滚动的距离，
		var arr_1=[];
		//每句歌词之间的时间差
		for(var i=0;i<arr.length;i++){
			if(arr[i+1]!=undefined){
				arr_1.push(arr[i+1]-arr[i]);
			}
		}
		var now_lyric=[];//将当前播放歌曲的歌词全部取出来，放到数组中
		for(var i=0;i<lrcs[n].lyric.length;i++){
			now_lyric[i]=lrcs[n].lyric[i].lineLyric;
	        
		}
		//计算每一句的每一个字所需要的平均时间
		var arr_lyric=[];//新歌词时间数组
		for(var i=0;i<now_lyric.length;i++){
			var now_lyric_1=[];//临时变量
			var temporar=arr[i];//临时变量
			for(var k=0;k<now_lyric[i].length;k++){
				temporar+=Number(((arr_1[i]/now_lyric[i].length)*0.8).toFixed(2));
				now_lyric_1[k]= temporar;	 
			}
			arr_lyric.push(now_lyric_1);
		}
		// console.log(now_lyric);
		//去掉歌词时间数组里最后一行，时间为NaN的情况；
        var temporary_1=arr[arr.length-1];
		var temporary_2=lrcs[n].lyric[lrcs[n].lyric.length-1].lineLyric;
		arr_lyric[arr_lyric.length-1]='';
		now_lyric=[];
		for(var j=0;j<temporary_2.length;j++){
		    temporary_1+=0.4;
			now_lyric[j]=temporary_1;		
		}
		arr_lyric[arr_lyric.length-1]=now_lyric;		
		//现在分两步进行，1：先渲染当前的整句歌词，2：找到当前歌词每个字对应的时间点，根据索引对每个字改变颜色
		        // console.log(arr);//播放时间
				// console.log(arr_1);//每一句实时间差
				audio.ontimeupdate=function(){
					 var time=this.currentTime;
					 $('#plan').val(time);
					 time=(parseInt(time/60)>0?parseInt(time/60):'0')+':'+(parseInt(time%60)>9?parseInt(time%60):'0'+parseInt(time%60));
					 $('#foot_ul li').eq(3).text(time);
					 var t=parseInt(audio.currentTime);
					 var t_1=audio.currentTime;
					 //还要获取列表中的歌词信息
					 //如何让滚动条也跟着同步？
					 //事件监听在不停的变化，强制转换之后，t，有时候一秒中之内会是几个相同的数，
					 //为了确保，每段歌词，只操作一次，定义监听变量
					var list_gechi=$('.body_ul_2 li');
					// var color_r='#';//随机十六进制色；
					var sr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
					for(var i=0;i< lrcs[n].lyric.length;i++){
						//只产生一次随机颜色的监听变量
						if(t==on_off_1){
							on_off=0;
						}
						if(t==lrcs[n].lyric[i].time&&on_off==0){
							on_off++;
							on_off_1=arr[i+1];
							//正在唱的句子加颜色
							color_r='#';//随机十六进制色；
							for(var ip=0;ip<6;ip++){
							 	var r=Math.floor(Math.random()*sr.length);
								color_r+=sr[r];
							}
						}
						var length_ly=(i+1)<arr.length?(i+1):arr.length;
						if(lrcs[n].lyric[i].time<t_1){
							var temp=lrcs[n].lyric[i].lineLyric;
							var str="<img src='img/icon_c3uo4zcbvw9/zhuomiangeci_guanbi.png'>";
							for(var a=0;a<temp.length;a++){
							     str+='<span>'+temp[a]+'</span>'
							}
							$('#desktop').html(str); 
						}
						// color_r='#';//五颜六色的变色；
						// for(var ip=0;ip<6;ip++){
						//  	var r=Math.floor(Math.random()*sr.length);
						// 	color_r+=sr[r];	
						// }
						var span=$('#desktop span');
						for(var k=0;k<arr_lyric[i].length;k++){
							if(t_1>arr_lyric[i][k]){
								span.eq(k).css('color',color_r);
							}
						}
						
					}
					for(var i=0;i< lrcs[n].lyric.length;i++){
					    if(lrcs[n].lyric[i].time==t){
							list_gechi.removeClass();
							list_gechi.eq(i).addClass('list_style');
						}
						if(true_false){
							if(arr[i+1]!=undefined&&t>arr[i]&&t<arr[i+1]){
								gun.scrollTop=i*50-150;
							}	
                        }
					}			   
				}
			}
		//桌面歌词，每一个变换颜色

	     //22点哪儿播哪儿
		 $('.body_ul_2').on('click','li',function(){
			var index=$(this).index();
			var temp=lrcs[n].lyric[index].time;
			audio.currentTime=temp;		 
		 });
		 //23打开做桌面菜单
		 $('#img_zuomian').on('click',function(){
			var temp=$('#desktop');
			if(temp.is(':hidden')){
				temp.show();
				
			}else{
				temp.hide();
			}
		 });
		 //24桌面歌词拖拽
	    var div=$('#desktop');
		$('#desktop').on('mousedown',function(e) {
		   var x=e.pageX-$(this).offset().left;
		   var y=e.pageY-$(this).offset().top;
		   $(this).on('mousemove',function(e){
			   var x1=e.pageX;
			   var y1=e.pageY;
			   x1=x1-x;
			   y1=y1-y;
			   $(this).css({
				   top:y1,left:x1,margin:0
			   })   
		   });
	    });
		 $('#desktop').on('mouseup',function(){
			 $(this).off('mousemove');
		 });
		 //25关闭
		 $('#desktop').on('click','img',function(){
			 $('#desktop').hide();
		 })
	    //26如何判断有没有登陆
	    $('#box_body_3 input').on('click',function(){
			var temp=$('#logIn b').text();
			console.log(temp);
			if(temp=='登陆'){
				$('#masklayer').show();
				$('.adddiv').show();
				return;
			}
			//弹出一个评论框
		    $('#remark').show();
			$('#remark p span').text(musicData[n].song);
		 });
		 //27关闭评论框
         	$('#remark img').on('click',function(){
				$('#remark').hide();
			})	 
	    //28评论
		$('#remark b').on('click',function(){
			//判读登陆的是谁，跟据显示的名字
			var name=$('#logIn b').text();
			var index=0;
			for(var i=0;i<users.length;i++){
				if(name==users[i].name){
					index=i;
					break;
				}
			}
			var temp=$('#remark textarea').val();
			//把这个值存储在数组里，调用填充函数;
			var time=new Date();
			var y=time.getFullYear();//年
			var m=time.getMonth();//月
			var d=time.getDate();
			var h=time.getHours();//小时
			var min=time.getMinutes();//分
			var s=time.getSeconds()//秒
			var str=y+'-'+m+'-'+d+'-'+(h<10?'0'+h:h)+':'+(min<10?'0'+min:min)+':'+(s<10?'0'+s:s);
			console.log(str);
			var id=musicData[n].msg.length+1;
			var arr={
				     "megId":id,
					 "megCon":temp,
				     "date":str,
					 "userId":index+1
		        	};
			musicData[n].msg.push(arr);
            fill(n);
			$('#remark').hide();

		})
		//28登陆
		$('.adddiv li:nth-child(5)').on('click',function(){
			var name=$('.adddiv input').eq(0).val();
			var password=$('.adddiv input').eq(1).val();
			var ajax=new XMLHttpRequest();
			ajax.open('GET','文件/users.txt',true);
			ajax.send();
			ajax.onreadystatechange=function(){
				if(ajax.readyState==4&ajax.status==200){
					var temp=ajax.response;
				    temp=eval(temp);
					console.log(temp);
					var temppor=0;
					for(var i=0;i<temp.length;i++){
						if(name==temp[i].name){
							temppor=temp[i].name;
							break;
						}
					}	
						
					if(name=temppor){	
 						if(password==temp[i].pwd){
							$('#logIn b').text(temp[i].name);
							$('#box header li:nth-child(4) img').attr('src',temp[i].pic);
							$('.adddiv').hide();
							$('#masklayer').hide();
							$('#hint').text('');
							var checked=$('#check').prop('checked');
							console.log(checked);
							window.localStorage.setItem('username',name);
							window.localStorage.setItem('pwd',password);
							if (checked) {
							    window.localStorage.setItem('username',name);
							    window.localStorage.setItem('pwd',password);
							}
							else{
							    window.localStorage.removeItem('username');
							    window.localStorage.removeItem('pwd');
							}
						}
						else{
							$('#hint').text('请输入正确的密码');
							}
					}else{
							if(name==''){
								$('#hint').text('还未输入信息');
							}
							else{
								
								$('#hint').text('用户名错误');
							}
							
						}
							
					
					console.log(name,password);
				
		    	}
			}
			
		});
		function ajax(get,url,f){
			var ajax=new XMLHttpRequest();
			ajax.open(get,url,true);
			ajax.send();
			ajax.onreadystatechange=function(){
				if(ajax.readyState==4&ajax.status==200){
	                  var data=ajax.response;
					  return f(data);
	        }   }
		}
	     //29登提示陆框
	    $('.adddiv li input').eq(0).on('input',function(){
			ajax('GET','文件/users.txt',function(data){
				data=eval(data);
				$('#hint_1').html('');
			    for(var i=0;i<data.length;i++){
				     var name=data[i].name	
					 $('#hint_1').show();
					 $('<li>'+name+'</li>').appendTo($('#hint_1'));
				}
			})
			
			
		});
	    //30登陆框提示，鼠标离开
		$('#hint_1').hover(function(){
			$(this).show();
		},function(){
			$('#hint_1').hide();
			
		});
	    //31登陆框提示 提示点击
		$('#hint_1').on('click','li',function(){
			var t=$(this).text();
			$('.add input').eq(0).val(t);
			$('#hint_1').hide();
		})
	    //32退出登录
		$('#logIn_ul li').eq(1).on('click',function(e){
			$('#logIn_ul').hide();
			$('#logIn b').text('登陆');
			$('#masklayer').show();
			$('.adddiv').show();
			$('#box header li:nth-child(4) img').attr('src','img/登陆.jpg');
		    return false;
		})
		//33退出登录隐藏
		$('#logIn_ul').hover(function(){
			$(this).show();
		},function(){
			$(this).hide();
			
		})
	    //34历史纪录点击播放
		$('.list_1_2').on('click','li',function(){
			var x=$(this).html();
			var log=$('.list_1_2 li').length;
			for(var i=0;i<unde.length;i++){
			     if(x==unde[i].name[0].innerHTML){
					 fill(unde[i].id);
					 audio.play();
					 break;
				 }
			}
			$('#list p span').eq(0).text(log);
		});
		//35清空历史纪录
		$('#list p span').eq(1).on('click',function(){
			unde=[];
			if(!$('.list_1_2').is(":hidden")){
				$('.list_1_2').html("");
				$('#list p span').eq(0).text(0);
			}
			
		});
		//搜索框提示数据
		$('#seek').on('input',function(){
		    $('#seek ul').show();
			$('#seek ul').html('');
			var value=$('#seek input').val();
			var reg=new RegExp('^[a-zA-Z]');
            var v=value.slice(0,1);
			for(var i=0;i<musicData.length;i++){
				var t=musicData[i].song;
				var t_1=t.slice(0,1);
				if(v==t_1){
					var li=$('<li>'+t+'</li>');
					li.appendTo($('#seek ul'));	
				}
				
			}
		})
		$('body').on('click',function(){
			$('#seek ul').hide();
		})
		$('#seek ul').on('click','li',function(){
            var a=0;
			var t=$(this).text();
			for(var i=0;i<musicData.length;i++){
				if(t==musicData[i].song){
					a=i;
					break;
				}
			}
			fill(a);
		})
	
		//缓存数据
		var username = window.localStorage.getItem('username');
	    if (username) {
		    $(".add input").eq(0).val(username);
		    $(".add input").eq(1).val(window.localStorage.getItem('pwd'));
		    $('.add input').eq(2).prop('checked',true);
	    }
});
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
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792

五、效果图

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/247507