国产片侵犯亲女视频播放_亚洲精品二区_在线免费国产视频_欧美精品一区二区三区在线_少妇久久久_在线观看av不卡

服務器之家：專注于服務器技術及軟件下載分享
分類導航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服務器之家 - 編程語言 - JavaScript - js教程 - 原生JS實現音樂播放器

原生JS實現音樂播放器

2022-01-07 17:16奶茶只要半糖 js教程

這篇文章主要為大家詳細介紹了原生JS音樂播放器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現音樂播放器的具體代碼，供大家參考，具體內容如下

首先，使用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
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>原生JS音樂播放器</title>
 <link rel="stylesheet" href="css/public.css" >
 <link rel="stylesheet" href="css/css.css" >
 </head>
 <body>
 <!-- 音樂播放器 -->
 <div class="music">
 <!-- 歌曲信息 -->
 <div class="word">
 <div class="clears"></div>
 <!-- 歌曲封面 -->
 <div class="img">
 <img src="images/1.jpg" id="img" alt="" /></div>
 <!-- 歌曲封面 end -->
 </div>
 <!-- 歌曲信息 end -->
 <!-- 信息和音量 -->
 <div class="mtv">
 <!-- 文字信息 -->
 <div class="text">
 <h1 id="sName">歌曲名稱</h1>
 <h2 id="singer">歌手</h2>
 </div>
 <!-- 文字信息 end -->
 <!-- 音量控制 -->
 <div class="vol01">
 <div class="volTop" id="volText">
 100%
 </div>
 <div class="volBottom">
 <div class="volPro" id="vol">
 <div class="volColor" id="volCol"></div>
 <div class="volBlock" id="volB"></div>
 </div>
 <div class="vImg">
 <img src="images/音量.png" alt="" />
 </div>
 </div>
 </div>
 <!-- 音量控制 end -->
 </div>
 <!-- 信息和音量 end -->
 <!-- 進度條 -->
 <div class="progress">
 <span class="cTime time" id="cTime">00:00</span> <!-- 當前時間 -->
 <span class="tTime time" id="tTime">00:00</span> <!-- 總的時間 -->
 <div class="clears"></div>
 <!-- 進度條小 -->
 <div class="proBar" id="songPro">
 <div class="proColor" id="proBar"></div>
 </div>
 <!-- 進度條小 end -->
 </div>
 <!-- 進度條 end -->
 <!-- 控制按鈕 -->
 <div class="ctrls">
 <div class="btn">
 <img src="images/prev.png" class="prevBtn" id="prevBtn" alt="" />
 <img src="images/next.png" class="nextPrev" id="nextBtn" alt="" />
 </div>
 <button type="button" class="playBtn" id="playBtn"><img src="images/播放.png" alt="" /></button>
 </div>
 <!-- 控制按鈕 end -->
 <audio src="#" id="music"></audio>
 </div>
 <!-- 音樂播放器 end -->
 <script src="js/js.js"></script>
 </body>
</html>

第二步，搭好框架后，就用CSS給他寫上你喜歡的樣式。注意這里我是將樣式分為了公共樣式和獨立樣式分開寫的，提高代碼可重復利用，當然你也可以使用SASS更方便，這里我只提供了獨立樣式，公共樣式可以在網上自主尋找。

?
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
html {
 background: #92b991;
}
 
.music {
 width: 670px;
 height: 400px;
 background: url("../images/bg.jpg") no-repeat center;
 margin-left: auto;
 margin-right: auto;
 border: 1px #3d5e59 solid;
 margin-top: 150px;
 border-radius: 20px;
 box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
 position: relative;
}
 
.img {
 width: 200px;
 height: 200px;
 border: 2px #fff solid;
 overflow: hidden;
 border-radius: 100%;
 margin-top: 50px;
 margin-left: 35%;
}
 
.mtv {
 width: 670px;
 position: relative;
}
 
.text {
 color: #fff;
 margin-right: 30px;
 margin-left: 30px;
 margin-bottom: 10px;
}
 
.text>h1 {
 font-size: 24px;
 line-height: 30px;
 font-weight: normal;
}
 
.text>h2 {
 font-family: "Microsoft YaHei";
 font-size: 14px;
 font-weight: 300;
 line-height: 1.7;
}
 
.vol01 {
 position: absolute;
 height: 30px;
 width: 120px;
 right: 30px;
 top: -8%;
}
 
.volPro {
 width: 100%;
 height: 5px;
 margin-top: 44.5px;
 border: 1px #fff solid;
 border-radius: 5px;
}
 
.volColor {
 height: 5px;
 width: 100%;
 color: #fff;
 pointer-events: none;
}
 
.volBlock {
 pointer-events: none;
 position: absolute;
 top: 42px;
 width: 10px;
 height: 10px;
 border: 1px #fff solid;
 background: #f4f3f3;
 border-radius: 100%;
 left: 100%;
 margin-left: -5px;
}
 
.volTop {
 color: #fff;
 font-size: 10px;
 position: absolute;
 top: 25px;
 right: 0;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
 
.vImg {
 position: absolute;
 top: 38px;
 left: -26px;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
 
.time {
 font-family: "Microsoft YaHei";
 font-size: 10px;
 line-height: 1.5;
 color: #fff;
 margin-top: 25px;
}
 
.cTime {
 float: left;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
 
.tTime {
 float: right;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
 
.progress {
 margin-left: 30px;
 margin-right: 30px;
}
 
.proBar {
 width: 100%;
 height: 2px;
 overflow: hidden;
 background: #B292FF;
 margin-top: 5px;
 border-radius: 5px;
}
 
.proColor {
 height: 7px;
 width: 30%;
 background: #fff;
 pointer-events: none;
}
 
.ctrls {
 text-align: center;
 margin-top: 20px;
 margin-left: 30px;
 margin-right: 30px;
}
 
.btn {
 position: absolute;
 top: 50px;
}
 
.nextPrev {
 right: 0;
 margin-left: 200px;
 opacity: 0.1;
 transition: all 0.3s;
}
 
.nextPrev:hover {
 opacity: 0.5;
}
 
.prevBtn {
 left: 0;
 opacity: 0.1;
 transition: all 0.3s;
}
 
.prevBtn:hover {
 opacity: 0.5;
}
 
.playBtn {
 height: 200px;
 width: 200px;
 border-radius: 200px;
 opacity: 0.3;
 position: absolute;
 top: 52px;
 left: 250px;
 margin-left: -14px;
 transition: all 0.3s;
}
 
 
.playBtn:hover {
 opacity: 0.5;
 background: #46847b;
}

第三步，也是讓音樂播放器具有靈魂的東西，使用JS添加功能。

1.獲取ID（當然這里也可以獲取類名或是元素，看你自己的習慣）。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let music = document.getElementById("music");
let playBtn = document.getElementById("playBtn");
let prevBtn = document.getElementById("prevBtn");
let nextBtn = document.getElementById("nextBtn");
let img = document.getElementById("img");
let sName = document.getElementById("sName");
let singer = document.getElementById("singer");
let tTime = document.getElementById("tTime");
let proBar = document.getElementById("proBar");
let cTime = document.getElementById("cTime");
let songPro = document.getElementById("songPro");
let vol = document.getElementById("vol");
let volCol = document.getElementById("volCol");
let volB = document.getElementById("volB");
let volText = document.getElementById("volText");

2.添加音樂播放功能。

導入音樂

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let songs = [{
 mp3: "music/01.mp3",
 singer: "趙薇",
 name: "不能和你分手",
 img: "images/1.jpg"
 }, {
 mp3: "music/04.mp3",
 singer: "陳粒",
 name: "易燃易爆炸",
 img: "images/2.jpg"
 }, {
 mp3: "music/06.mp3",
 singer: "胡夏/郁可唯",
 name: "知否知否",
 img: "images/3.jpg"
 }];

音樂播放

?
1
2
3
4
5
6
7
8
9
10
let changeMusic = function(index) {
 music.src = songs[index].mp3;
 img.src = songs[index].img;
 sName.innerHTML = songs[index].name;
 singer.innerHTML = songs[index].singer;
 proBar.style.width = 0;
 };
 
 let index = 0;
 changeMusic(index);

音樂播放暫停

?
<form id="acyav"><optgroup id="acyav"><ul id="acyav"></ul></optgroup></form>
1
2
3
4
5
6
7
8
9
playBtn.addEventListener("click", function(event) {
 if (music.paused) {
 music.play();
 event.currentTarget.innerHTML = '<img src="images/暫停.png" id="codetool">

音樂切換

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
prevBtn.addEventListener("click", function(event) { //上一首
 index--;
 if (index <= -1) {
 index = songs.length - 1;
 }
 changeMusic(index);
 });
 
 nextBtn.addEventListener("click", function(event) { //下一首
 index++;
 if (index > songs.length - 1) {
 index = 0;
 }
 changeMusic(index);
 });
 
 music.addEventListener('ended',function () { //自動播放下一首
 index++;
 if (index > songs.length - 1) {
 index = 0;
 }
 changeMusic(index);
 })

3.添加進度條。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
music.addEventListener("loadedmetadata", function(event) { //提示音頻的元數據已加載
 tTime.innerHTML = parseInt(music.duration / 60) + ":" + parseInt(music.duration % 60);
 });
 
 music.addEventListener("timeupdate", function(event) { //監聽音樂事實播放事件
 let jd = music.currentTime / music.duration;
 let bfb = jd * 100 + "%";
 proBar.style.width = bfb;
 if (music.currentTime < 10) {
 cTime.innerHTML = "0:0" + Math.floor(music.currentTime);
 } else if (music.currentTime < 60) {
 cTime.innerHTML = "0:" + Math.floor(music.currentTime);
 } else {
 let minet = parseInt(music.currentTime / 60);
 let sec = music.currentTime - minet * 60;
 if (sec < 10) {
 cTime.innerHTML = "0" + minet + ":" + "0" + parseInt(sec);
 } else {
 cTime.innerHTML = "0" + minet + ":" + parseInt(sec);
 }
 }
 });

小功能：點擊進度條，音樂也跟著變化跳轉到指定的時間。

?
1
2
3
4
5
6
songPro.addEventListener("click", function(event) {
 let x = event.offsetX;
 let bfb = x / 610 * 100;
 proBar.style.width = bfb + "%";
 music.currentTime = music.duration * bfb / 100;
 });

4.添加音量調節模塊。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let getBfb = function(event) {
 let x = event.clientX; //返回當事件被觸發時鼠標指針向對于瀏覽器頁面（或客戶區）的水平坐標。
 let volX = vol.getBoundingClientRect().x;  //getBoundingClientRect()獲取元素的寬高位置
 let disX = x - volX;
 disX = Math.max(0, disX); //返回最大數字
 disX = Math.min(120, disX); //返回最小數字
 return disX / 120;
 };
 
 let setVol = function(event) {
 let bfb = Math.floor(getBfb(event) * 10000) / 100;
 volCol.style.width = bfb + "%";
 volB.style.left = bfb + "%";
 volText.innerHTML = Math.floor(bfb) + "%";
 music.volume = bfb / 100;
 };
 
 vol.addEventListener("mousedown", function() {
 document.addEventListener("mousemove", setVol);
 });
 document.addEventListener("mouseup", function() {
 document.removeEventListener("mousemove", setVol);
 
 });

全部JS代碼

這里我使用了{}作用域，讓let 或 const聲明的變量只在 let 或 const命令所在的代碼塊 {} 內有效，在 {} 之外不能訪問（ECMAScript 6(簡稱ES6)中新增的）。

?
<tfoot id="acyav"><source id="acyav"></source></tfoot><tfoot id="acyav"><source id="acyav"><em id="acyav"></em></source></tfoot>
    • 
				
					
    
						
							
    
								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
    
						    		
						
							
    
								
    
									{
    
								
    
									 let music = document.getElementById("music");
    
								
    
									 let playBtn = document.getElementById("playBtn");
    
								
    
									 let prevBtn = document.getElementById("prevBtn");
    
								
    
									 let nextBtn = document.getElementById("nextBtn");
    
								
    
									 let img = document.getElementById("img");
    
								
    
									 let sName = document.getElementById("sName");
    
								
    
									 let singer = document.getElementById("singer");
    
								
    
									 let tTime = document.getElementById("tTime");
    
								
    
									 let proBar = document.getElementById("proBar");
    
								
    
									 let cTime = document.getElementById("cTime");
    
								
    
									 let songPro = document.getElementById("songPro");
    
								
    
									 let vol = document.getElementById("vol");
    
								
    
									 let volCol = document.getElementById("volCol");
    
								
    
									 let volB = document.getElementById("volB");
    
								
    
									 let volText = document.getElementById("volText");
    
								
    
									 
    
								
    
									 let songs = [{
    
								
    
									 mp3: "music/01.mp3",
    
								
    
									 singer: "趙薇",
    
								
    
									 name: "不能和你分手",
    
								
    
									 img: "images/1.jpg"
    
								
    
									 }, {
    
								
    
									 mp3: "music/04.mp3",
    
								
    
									 singer: "陳粒",
    
								
    
									 name: "易燃易爆炸",
    
								
    
									 img: "images/2.jpg"
    
								
    
									 }, {
    
								
    
									 mp3: "music/06.mp3",
    
								
    
									 singer: "胡夏/譚維維",
    
								
    
									 name: "知否知否",
    
								
    
									 img: "images/3.jpg"
    
								
    
									 }];
    
								
    
									 
    
								
    
									 let changeMusic = function(index) {
    
								
    
									 music.src = songs[index].mp3;
    
								
    
									 img.src = songs[index].img;
    
								
    
									 sName.innerHTML = songs[index].name;
    
								
    
									 singer.innerHTML = songs[index].singer;
    
								
    
									 proBar.style.width = 0;
    
								
    
									 };
    
								
    
									 
    
								
    
									 let index = 0;
    
								
    
									 changeMusic(index);
    
								
    
									 
    
								
    
									 playBtn.addEventListener("click", function(event) {
    
								
    
									 if (music.paused) {
    
								
    
									 music.play();
    
								
    
									 event.currentTarget.innerHTML = '<img src="images/暫停.png" id="codetool">
		
    
			
    
	
    

    

    
	最終效果展示：
    

    
	原生JS實現音樂播放器
    

    
	以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
    

    
	原文鏈接：https://blog.csdn.net/weixin_44520823/article/details/113102404
    

			
		    
    
			
			
    
			
    
				 
			
    
		
		
    
			
			
    
				
			
    
		
    
		
    
			
    
				
    延伸 · 閱讀
    
			
    
			
		
    
		
    
		
    
		
		
    
			
    
				精彩推薦
			
    
		
    
		
    
			
      
				
      
					
				
      
				 
    • js教程JS+JQuery實現無縫連接輪播圖
				
      
					
      JS+JQuery實現無縫連接輪播圖
      
					
      
						 這篇文章主要介紹了JS+JQuery實現無縫連接輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下...
					
      
					
      
						南柯Seven7652021-12-23
					
      
				
      
				
      • 

    • js教程原生js實現滑塊區間組件
				
      
					
      原生js實現滑塊區間組件
      
					
      
						 這篇文章主要為大家詳細介紹了js實現滑塊區間組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下...
					
      
					
      
						蒲公英芽11742022-01-05
					
      
				
      
				
      • 

    • js教程前端開發之JS中編寫For循環的方法
				
      
					
      前端開發之JS中編寫For循環的方法
      
					
      
						 這些年來，JavaScript 發展得如此之快。如果你之前有其他編程語言經驗的話，你可能無法相信在 JavaScript 中有4種方法可以編寫for 循環。...
					
      
					
      
						清閑的帆船先生8922021-12-24
					
      
				
      
				
      • 

    • js教程JS實現簡易日歷效果
				
      
					
      JS實現簡易日歷效果
      
					
      
						 這篇文章主要為大家詳細介紹了JS實現簡易日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下...
					
      
					
      
						一夜醒來頭禿了3552022-01-06
					
      
				
      
				
      • 

    • js教程JavaScript 防盜鏈的原理以及破解方法
				
      
					
      JavaScript 防盜鏈的原理以及破解方法
      
					
      
						 這篇文章主要介紹了JavaScript 防盜鏈的原理以及破解方法，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下...
					
      
					
      
						LuckyChou10302021-12-22
					
      
				
      
				
      • 

    • js教程微信小程序選擇圖片控件
				
      
					
      微信小程序選擇圖片控件
      
					
      
						 這篇文章主要為大家詳細介紹了微信小程序選擇圖片控件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下...
					
      
					
      
						小雅雅家的小凱凱吖9692022-01-04
					
      
				
      
				
      • 

    • js教程原生js實現放大鏡組件
				
      
					
      原生js實現放大鏡組件
      
					
      
						 這篇文章主要為大家詳細介紹了js實現放大鏡組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下...
					
      
					
      
						蒲公英芽5292022-01-06
					
      
				
      
				
      • 

    • js教程mustache.js實現首頁元件動態渲染的示例代碼
				
      
					
      mustache.js實現首頁元件動態渲染的示例代碼
      
					
      
						 這篇文章主要介紹了mustache.js實現首頁元件動態渲染的示例代碼，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可...
					
      
					
      
						code2roc4232021-12-21
					
      
				
      
				
      • 

			
    
		
    
	
	 


    

    
 

    





主站蜘蛛池模板：
丁香综合
|
成人亚洲
|
免费久草
|
欧美一区二区三区在线观看视频
|
亚洲高清一区二区三区
|
久久综合九色综合欧美狠狠
|
丝袜天堂
|
免费视频一区二区
|
免费一级 国产
|
日本不卡高字幕在线2019
|
一级黄色一级毛片
|
亚洲免费观看
|
亚洲欧美精品
|
午夜精品美女久久久久av福利
|
久久久夜夜夜
|
中文字幕一区二区在线观看
|
久久久精品一区二区三区
|
久久成人精品视频
|
欧美三区
|
一区二区中文
|
狠狠色噜噜狠狠狠8888米奇
|
毛片区|
亚洲成人一区在线
|
免费在线国产
|
国产精品99久久久久久www
|
在线视频三级
|
久久蜜桃精品一区二区三区综合网
|
红桃成人少妇网站
|
欧美成人激情视频
|
国产精品亚洲视频
|
色偷偷噜噜噜亚洲男人
|
日韩一区中文
|
中文字幕 亚洲视频
|
在线视频一区二区三区
|
久久手机视频
|
国产传媒视频
|
国产区视频
|
精久久|
免费一级片在线
|
欧美天堂一区
|
一区二区三区精品视频免费看
|


    <tfoot id="acyav"></tfoot>
      •