├── css ├── html5-doctor-reset-stylesheet.min.css └── index.css ├── img ├── bg.png ├── pic.jpg ├── 列表.png ├── 单曲循环.png ├── 唱片.png ├── 快进.png ├── 播放.png ├── 暂停.png ├── 随机.png └── 音乐.png ├── index.html └── js ├── flexible.js ├── index.js └── original_ajax.js /css/html5-doctor-reset-stylesheet.min.css: -------------------------------------------------------------------------------- 1 | html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent} 2 | body{line-height:1} 3 | article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} 4 | nav ul{list-style:none} 5 | blockquote,q{quotes:none} 6 | blockquote:before,blockquote:after,q:before,q:after{content:none} 7 | a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent} 8 | ins{background-color:#ff9;color:#000;text-decoration:none} 9 | mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold} 10 | del{text-decoration:line-through} 11 | abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help} 12 | table{border-collapse:collapse;border-spacing:0} 13 | hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0} 14 | input,select{vertical-align:middle} -------------------------------------------------------------------------------- /css/index.css: -------------------------------------------------------------------------------- 1 | html,body{ 2 | height: 100%; 3 | font-family: Arial, sans-serif; 4 | background: rgba(10, 40, 20, 0.5); 5 | color: rgba(255, 255, 255, .5); 6 | } 7 | 8 | /*header Start*/ 9 | header{ 10 | box-sizing: border-box; 11 | height: 14%; 12 | padding: 0.625rem 0 0; 13 | /*min-height: 78px;*/ 14 | min-height: 2.4375rem; 15 | text-align: center; 16 | } 17 | header .song-title{ 18 | width: 100%; 19 | font-size: 0.625rem; 20 | color: #fff; 21 | text-overflow: ellipsis; 22 | white-space: nowrap; 23 | overflow: hidden; 24 | } 25 | header .singer{ 26 | width: 100%; 27 | font-size: 0.5rem; 28 | margin-top: 0.25rem; 29 | text-overflow: ellipsis; 30 | white-space: nowrap; 31 | overflow: hidden; 32 | } 33 | /*header End*/ 34 | 35 | /*content Start*/ 36 | .content{ 37 | box-sizing: border-box; 38 | width: 100%; 39 | height: 60%; 40 | /*min-height: 260px*/ 41 | min-height: 8.125rem; 42 | overflow: hidden; 43 | } 44 | .content .record-wrapper{ 45 | position: relative; 46 | width: 100%; 47 | height: 100%; 48 | } 49 | .content .mid{ 50 | position: absolute; 51 | left: 0; 52 | right: 0; 53 | top: 0; 54 | bottom: 0; 55 | margin: auto; 56 | } 57 | .content .record-bg{ 58 | /*width: 250px;*/ 59 | width: 7.8125rem; 60 | height: 7.8125rem; 61 | border: 0.1875rem solid rgba(245, 245, 245, 0.2); 62 | border-radius: 50%; 63 | background-image: url(../img/bg.png); 64 | background-repeat: no-repeat; 65 | background-size: 100% 100%; 66 | overflow: hidden; 67 | } 68 | .content .record-pic{ 69 | /*width: 180px;*/ 70 | width: 5.625rem; 71 | height: 5.625rem; 72 | border-radius: 50%; 73 | overflow: hidden; 74 | } 75 | .content .record-pic img{ 76 | width: 100%; 77 | height: 100%; 78 | display: block; 79 | } 80 | 81 | .content .lyrics-wrapper{ 82 | position: relative; 83 | width: 100%; 84 | height: 100%; 85 | overflow: hidden; 86 | } 87 | .lyrics-wrapper .lyrics{ 88 | position: absolute; 89 | width: 100%; 90 | transition: top 0.5s; 91 | text-align: center; 92 | } 93 | .lyrics-wrapper .lyrics li{ 94 | /*padding: 8px 8px;*/ 95 | padding: 0.25rem 0.25rem; 96 | /*font-size: 14px;*/ 97 | font-size: 0.4375rem; 98 | } 99 | .lyrics-wrapper .lyrics li.active{ 100 | color: #fff; 101 | } 102 | 103 | 104 | /*content End*/ 105 | 106 | /*footer Start*/ 107 | footer{ 108 | box-sizing: border-box; 109 | height: 26%; 110 | width: 100%; 111 | /*min-height: 126px;*/ 112 | min-height: 3.9375rem; 113 | } 114 | footer .channel{ 115 | text-align: center; 116 | font-size: 0.5rem; 117 | /*line-height: 20px;*/ 118 | line-height: 0.625rem; 119 | } 120 | .progress-bar{ 121 | position: relative; 122 | /*height: 4px;*/ 123 | height: 0.125rem; 124 | /*width: 250px;*/ 125 | width: 7.8125rem; 126 | /*width: 8.75rem;*/ 127 | border-radius: 0.0625rem; 128 | background: rgba(255,255,255, 0.4); 129 | /*margin: 14px auto 20px;*/ 130 | margin: 0.4375rem auto 0.625rem; 131 | } 132 | .progress{ 133 | height: 100%; 134 | width: 0; 135 | background: red; 136 | border-radius: 0.0625rem; 137 | } 138 | .progress-btn{ 139 | position: absolute; 140 | left: 0; 141 | top: -0.09375rem; 142 | /*width: 16px;*/ 143 | width: 0.5rem; 144 | height: 0.375rem; 145 | margin-left: -0.25rem; 146 | background: #fff; 147 | border-radius: 0.125rem; 148 | } 149 | 150 | .btns{ 151 | display: flex; 152 | justify-content: space-around; 153 | align-items: center; 154 | padding: 0 0.625rem; 155 | } 156 | .icon-sides{ 157 | /*width: 20px*/ 158 | width: 0.625rem; 159 | height: 0.625rem; 160 | background-size: 100% 100%; 161 | } 162 | .icon-middle{ 163 | width: 0.9375rem; 164 | height: 0.9375rem; 165 | border-radius: 50%; 166 | background-size: 100% 100%; 167 | } 168 | .play{ 169 | width: 1.5625rem; 170 | height: 1.5625rem; 171 | border-radius: 50%; 172 | background-size: 100% 100%; 173 | background-image: url(../img/暂停.png); 174 | } 175 | .change-channel{ 176 | background-image: url(../img/唱片.png); 177 | } 178 | .next{ 179 | background-image: url(../img/快进.png); 180 | } 181 | .show-lyrics{ 182 | background-image: url(../img/列表.png); 183 | } 184 | .mode{ 185 | background-image: url(../img/随机.png); 186 | } 187 | /*footer End*/ 188 | 189 | .rotate{ 190 | animation: recordRotate 30s linear 1s infinite; 191 | } 192 | 193 | @keyframes recordRotate { 194 | to { 195 | transform: rotate(360deg); 196 | } 197 | } 198 | 199 | /* 全局背景 */ 200 | .glass{ 201 | position: absolute; 202 | left: 0; 203 | top: 0; 204 | /*background: blue;*/ 205 | z-index: -1; 206 | width: 100%; 207 | height: 100%; 208 | } 209 | .glass img{ 210 | width: 100%; 211 | height: 100%; 212 | filter: blur(20px); 213 | } 214 | -------------------------------------------------------------------------------- /img/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YangQiGitHub/JsMusicPlayer/6a3b68c8c882e13c26120f3f575533efbda9767e/img/bg.png -------------------------------------------------------------------------------- /img/pic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YangQiGitHub/JsMusicPlayer/6a3b68c8c882e13c26120f3f575533efbda9767e/img/pic.jpg -------------------------------------------------------------------------------- /img/列表.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YangQiGitHub/JsMusicPlayer/6a3b68c8c882e13c26120f3f575533efbda9767e/img/列表.png -------------------------------------------------------------------------------- /img/单曲循环.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YangQiGitHub/JsMusicPlayer/6a3b68c8c882e13c26120f3f575533efbda9767e/img/单曲循环.png -------------------------------------------------------------------------------- /img/唱片.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YangQiGitHub/JsMusicPlayer/6a3b68c8c882e13c26120f3f575533efbda9767e/img/唱片.png -------------------------------------------------------------------------------- /img/快进.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YangQiGitHub/JsMusicPlayer/6a3b68c8c882e13c26120f3f575533efbda9767e/img/快进.png -------------------------------------------------------------------------------- /img/播放.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YangQiGitHub/JsMusicPlayer/6a3b68c8c882e13c26120f3f575533efbda9767e/img/播放.png -------------------------------------------------------------------------------- /img/暂停.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YangQiGitHub/JsMusicPlayer/6a3b68c8c882e13c26120f3f575533efbda9767e/img/暂停.png -------------------------------------------------------------------------------- /img/随机.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YangQiGitHub/JsMusicPlayer/6a3b68c8c882e13c26120f3f575533efbda9767e/img/随机.png -------------------------------------------------------------------------------- /img/音乐.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YangQiGitHub/JsMusicPlayer/6a3b68c8c882e13c26120f3f575533efbda9767e/img/音乐.png -------------------------------------------------------------------------------- /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 | 44 |
45 | 46 |
47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /js/flexible.js: -------------------------------------------------------------------------------- 1 | (function(win,tcf){ 2 | var doc = win.document; 3 | var docEl = doc.documentElement; 4 | var metaEl = doc.querySelector('meta[name="viewport"]'); 5 | var dpr = 0; 6 | var scale = 0; 7 | var handler = null; 8 | 9 | var flexible = tcf.flexible || (tcf.flexible = {}); 10 | 11 | //将根据已有的meta标签来设置缩放比例 12 | if (metaEl) { 13 | var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); 14 | if (match) { 15 | scale = parseFloat(match[1]); 16 | dpr = parseInt(1 / scale); 17 | } 18 | } 19 | //如果没有设置，那么会自动添加meta viewport的设置 20 | if (!dpr && !scale) { 21 | var isAndroid = win.navigator.appVersion.match(/android/gi); 22 | var isIPhone = win.navigator.appVersion.match(/iphone/gi); 23 | var isLiebao = win.navigator.appVersion.match(/LieBao/gi); 24 | var isSogou = win.navigator.appVersion.match(/Sogou/gi); 25 | var clsName = String(isIPhone||isLiebao||isSogou||isAndroid||'').toLowerCase(); 26 | var devicePixelRatio = Math.floor(win.devicePixelRatio)||1; 27 | if (isIPhone) { 28 | if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { 29 | dpr = 3; 30 | } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ 31 | dpr = 2; 32 | } else { 33 | dpr = 1; 34 | } 35 | 36 | }else if(isLiebao || isSogou){ 37 | dpr = 1; 38 | }else { 39 | dpr = devicePixelRatio; 40 | } 41 | 42 | doc.body.classList.add(clsName); 43 | scale = 1 / dpr; 44 | } 45 | 46 | 47 | 48 | if (!metaEl) { 49 | metaEl = doc.createElement('meta'); 50 | metaEl.setAttribute('name', 'viewport'); 51 | metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale +',user-scalable=no'); 52 | if (docEl.firstElementChild) { 53 | docEl.firstElementChild.appendChild(metaEl); 54 | } else { 55 | var wrap = doc.createElement('div'); 56 | wrap.appendChild(metaEl); 57 | doc.write(wrap.innerHTML); 58 | } 59 | } 60 | 61 | docEl.setAttribute('data-dpr', dpr); 62 | 63 | var setFontSize = function(){ 64 | var width = docEl.getBoundingClientRect().width; 65 | if (width / dpr > 540) { 66 | width = 540 * dpr; 67 | } 68 | var rem = width / 10; 69 | rem = Math.max(rem,32); 70 | docEl.style.fontSize = rem+'px'; 71 | flexible.width = width; 72 | flexible.rem = win.rem = rem; 73 | }; 74 | 75 | ['resize','orientationchange'].forEach(function(item){ 76 | win.addEventListener(item, function(e) { 77 | clearTimeout(handler); 78 | handler = setTimeout(setFontSize, 300); 79 | }, false); 80 | }) 81 | 82 | win.addEventListener('pageshow', function(e) { 83 | if (e.persisted) { 84 | clearTimeout(handler); 85 | handler = setTimeout(setFontSize, 300); 86 | } 87 | }, false); 88 | 89 | if (doc.readyState === 'complete') { 90 | 91 | doc.body.style.fontSize = 12 * dpr + 'px'; 92 | } else { 93 | doc.addEventListener('DOMContentLoaded', function(e) { 94 | doc.body.style.fontSize = 12 * dpr + 'px'; 95 | 96 | }, false); 97 | } 98 | 99 | setFontSize(); 100 | 101 | flexible.dpr = win.dpr = dpr; 102 | flexible.setFontSize = setFontSize; 103 | flexible.rem2px = function(d) { 104 | var val = parseFloat(d) * this.rem; 105 | if (typeof d === 'string' && d.match(/rem$/)) { 106 | val += 'px'; 107 | } 108 | return val; 109 | } 110 | flexible.px2rem = function(d) { 111 | var val = parseFloat(d) / this.rem; 112 | if (typeof d === 'string' && d.match(/px$/)) { 113 | val += 'rem'; 114 | } 115 | return val; 116 | } 117 | 118 | }(window,window['tcf'] || (window['tcf'] = {}))) -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | window.onload = function () { 2 | 3 | //取消body的touchmove默认行为，阻止页面滚动 4 | document.body.addEventListener('touchmove', function (event) { 5 | event.preventDefault(); 6 | }, false); 7 | 8 | var musicAudio = document.querySelector('#mic_audio'); // audio标签 9 | var channel = document.querySelector('.channel'); // 频道标签节点 10 | var songTitle = document.querySelector('.song-title'); // 歌名标签节点 11 | var singer = document.querySelector('.singer'); // 歌手标签节点 12 | var recordImg = document.querySelector('.record-pic img'); // 专辑图片 13 | var recordPic = document.querySelector('.record-pic'); // 专辑图片外层div节点 14 | var recordWrap = document.querySelector('.record-wrapper'); // 专辑区域 15 | var playBtn = document.querySelector('.play'); // 播放按钮 16 | var nextBtn = document.querySelector('.next'); // 下一区按钮 17 | var changeChannelBtn = document.querySelector('.change-channel'); // 更换频道 18 | var modeBtn = document.querySelector('.mode'); // 切换播放模式 19 | var progressBar = document.querySelector('.progress-bar'); // 进度条外层div 20 | var progress = document.querySelector('.progress'); // 进度条长度 21 | var progressBtn = document.querySelector('.progress-btn'); // 进度条拖动按钮 22 | var lyricBtn = document.querySelector('.show-lyrics'); // 显示歌词按钮 23 | var lyrics = document.querySelector('.lyrics'); // 歌词的包裹节点 24 | var bigBg = document.querySelector('.glass img'); 25 | var lyricsLiArr = null; 26 | 27 | var num = 1; 28 | // 首次进入页面，chrome,safair在页面没有手动点击的时候，是不能自动播放音乐的，设定num变量标记第一次进入页面 29 | 30 | var channelArr = []; // 用来记录“歌曲频道”的数组 31 | 32 | getChannel(); 33 | 34 | // 为播放按钮添加事件 35 | playBtn.onclick = function () { 36 | musicAudio.onplaying = null; // 清除audio标签绑定的事件 37 | if (musicAudio.paused) { 38 | playBtn.style.backgroundImage = 'url(img/播放.png)'; 39 | musicAudio.play(); 40 | } else { 41 | playBtn.style.backgroundImage = 'url(img/暂停.png)'; 42 | musicAudio.pause(); 43 | } 44 | }; 45 | 46 | // 下一曲按钮 47 | nextBtn.onclick = function () { 48 | getMusic(); 49 | }; 50 | 51 | // 更换频道按钮 52 | changeChannelBtn.onclick = function () { 53 | getRandomChannel(channelArr); 54 | getMusic(); 55 | }; 56 | 57 | // mode按钮 58 | modeBtn.onclick = function () { 59 | if (musicAudio.loop) { 60 | musicAudio.loop = false; 61 | this.style.backgroundImage = 'url(img/随机.png)'; 62 | } else { 63 | musicAudio.loop = true; 64 | this.style.backgroundImage = 'url(img/单曲循环.png)'; 65 | } 66 | }; 67 | 68 | // 显示歌词按钮 69 | lyricBtn.onclick = function () { 70 | if (recordWrap.style.display == 'block') { 71 | recordWrap.style.display = 'none'; 72 | channel.style.fontSize = 0; 73 | if (!lyricsLiArr) { 74 | getlyric(); 75 | } 76 | } else { 77 | recordWrap.style.display = 'block'; 78 | channel.style.fontSize = '0.5rem'; 79 | } 80 | }; 81 | 82 | 83 | 84 | var isLoading = false; 85 | var progressTimer = setInterval(activeProgressBar, 300); 86 | 87 | // 激活进度条 88 | function activeProgressBar () { 89 | var percentNum = Math.floor((musicAudio.currentTime / musicAudio.duration) * 10000) / 100 + '%'; 90 | progress.style.width = percentNum; 91 | progressBtn.style.left = percentNum; 92 | 93 | if (percentNum == '100%' && !isLoading && !musicAudio.loop) { 94 | isLoading = true; 95 | getMusic(); 96 | } 97 | if (musicAudio.paused && recordPic.className != 'record-pic mid') { 98 | recordPic.className = 'record-pic mid'; 99 | playBtn.style.backgroundImage = 'url(img/暂停.png)'; 100 | return; 101 | } else if (recordPic.className != 'record-pic mid rotate' && !musicAudio.paused) { 102 | recordPic.className = 'record-pic mid rotate'; 103 | playBtn.style.backgroundImage = 'url(img/播放.png)'; 104 | } 105 | 106 | // 控制歌词动态滚动 107 | if (lyricsLiArr) { 108 | for (var i = 0, len = lyricsLiArr.length-1; i < len; i++) { 109 | var curT = lyricsLiArr[i].getAttribute('data-time'); 110 | var nexT = lyricsLiArr[i+1].getAttribute('data-time'); 111 | var curtTime = musicAudio.currentTime; 112 | if ((curtTime > curT) && (curtTime < nexT)) { 113 | lyricsLiArr[i].className = 'active'; 114 | lyrics.style.top = (100 - lyricsLiArr[i].offsetTop) + 'px'; 115 | } else { 116 | lyricsLiArr[i].className = ''; 117 | } 118 | } 119 | } 120 | } 121 | 122 | // 进度条操作音乐播放进度，绑定事件 123 | progressBtn.addEventListener('touchstart', function () { 124 | clearInterval(progressTimer); 125 | }); 126 | progressBtn.addEventListener('touchmove', function (e) { 127 | var percentNum = (e.targetTouches[0].pageX - progressBar.offsetLeft) / progressBar.offsetWidth; 128 | if (percentNum > 1) { 129 | percentNum = 1; 130 | } else if (percentNum < 0){ 131 | percentNum = 0; 132 | } 133 | this.style.left = percentNum * 100 + '%'; 134 | progress.style.width = percentNum * 100 + '%'; 135 | }); 136 | progressBtn.addEventListener('touchend', function (e) { 137 | var percentNum = (e.changedTouches[0].pageX - progressBar.offsetLeft) / progressBar.offsetWidth; 138 | musicAudio.currentTime = musicAudio.duration * percentNum; 139 | progressTimer = setInterval(activeProgressBar, 300); 140 | }); 141 | 142 | // 获取频道 143 | function getChannel () { 144 | ajax({ 145 | method: 'GET', 146 | async: false, 147 | url: 'http://api.jirengu.com/fm/getChannels.php', 148 | success: function (response) { 149 | var jsonObj = JSON.parse(response); 150 | channelArr = jsonObj['channels']; 151 | getRandomChannel(channelArr); 152 | getMusic(); 153 | } 154 | }); 155 | } 156 | 157 | // 获取随机频道 158 | function getRandomChannel (channelArr) { 159 | var randomNum = Math.floor(channelArr.length * Math.random()); 160 | var randomChannel = channelArr[randomNum]; 161 | 162 | channel.innerHTML = randomChannel.name; 163 | channel.setAttribute('data-channel-id', randomChannel.channel_id); 164 | } 165 | 166 | // 获取音乐 167 | function getMusic () { 168 | ajax({ 169 | method: 'GET', 170 | url: 'http://api.jirengu.com/fm/getSong.php', 171 | data: { 172 | "channel": channel.getAttribute("data-channel-id") 173 | }, 174 | success: function (response) { 175 | var jsonObj = JSON.parse(response); 176 | var songObj = jsonObj['song'][0]; 177 | 178 | songTitle.innerHTML = songObj.title; 179 | singer.innerHTML = songObj.artist; 180 | recordImg.src = songObj.picture; 181 | bigBg.src = songObj.picture; 182 | musicAudio.src = songObj.url; 183 | musicAudio.setAttribute('data-sid', songObj.sid); 184 | musicAudio.setAttribute('data-ssid', songObj.ssid); 185 | musicAudio.play(); 186 | isLoading = false; 187 | getlyric(); 188 | 189 | // 解决首次进入页面时，自动播放的兼容问题，不自动播放 190 | if (num === 1) { 191 | musicAudio.onplaying = function () { 192 | this.pause(); 193 | musicAudio.onplaying = null; 194 | }; 195 | num++; 196 | } 197 | } 198 | }); 199 | } 200 | 201 | 202 | function getlyric () { 203 | var sid = musicAudio.getAttribute('data-sid'); 204 | var ssid = musicAudio.getAttribute('data-ssid'); 205 | ajax({ 206 | url: 'http://api.jirengu.com/fm/getLyric.php', 207 | method: 'POST', 208 | data: { 209 | sid: sid, 210 | ssid: ssid 211 | }, 212 | success: function (response) { 213 | var lyricsObj = JSON.parse(response); 214 | 215 | if (lyricsObj.lyric) { 216 | lyrics.innerHTML = ''; // 清空歌词 217 | var lineArr = lyricsObj.lyric.split('\n'); // 歌词以排为界数组 218 | var timeReg = /\[\d{2}:\d{2}.\d{2}\]/g; 219 | var result = []; 220 | 221 | for (var i in lineArr) { 222 | var time = lineArr[i].match(timeReg); 223 | if (!time) continue; 224 | var curStr = lineArr[i].replace(timeReg, ''); 225 | for (var j in time) { 226 | var t = time[j].slice(1, -1).split(':'); // 时间的格式是[00:00.00] 分钟和毫秒是t[0],t[1] 227 | var curSecond = parseInt(t[0], 10) * 60 + parseFloat(t[1]); 228 | result.push([curSecond, curStr]); 229 | } 230 | } 231 | 232 | result.sort(function (a, b) { 233 | return a[0] - b[0]; 234 | }); 235 | 236 | // 渲染歌词到界面 237 | renderLyrics(result); 238 | } 239 | } 240 | }) 241 | } 242 | 243 | // 添加歌词到页面中 244 | function renderLyrics (lyricArr) { 245 | var str = ''; 246 | for (var i = 0, len = lyricArr.length; i < len; i++) { 247 | str += '
  • ' + lyricArr[i][1] + '
    • '; 248 | } 249 | lyrics.innerHTML = str; 250 | lyricsLiArr = lyrics.getElementsByTagName('li'); 251 | } 252 | }; -------------------------------------------------------------------------------- /js/original_ajax.js: -------------------------------------------------------------------------------- 1 | /* 封装ajax函数 2 | * @param {string}opt.type http连接的方式，包括POST和GET两种方式 3 | * @param {string}opt.url 发送请求的url 4 | * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的 5 | * @param {object}opt.data 发送的参数，格式为对象类型 6 | * @param {function}opt.success ajax发送并接收成功调用的回调函数 7 | */ 8 | function ajax(opt) { 9 | opt = opt || {}; 10 | opt.method = opt.method.toUpperCase() || 'POST'; 11 | opt.url = opt.url || ''; 12 | opt.async = opt.async || true; 13 | opt.data = opt.data || null; 14 | opt.success = opt.success || function () {}; 15 | var xmlHttp = null; 16 | if (XMLHttpRequest) { 17 | xmlHttp = new XMLHttpRequest(); 18 | } 19 | else { 20 | xmlHttp = new ActiveXObject('Microsoft.XMLHTTP'); 21 | } 22 | var params = []; 23 | for (var key in opt.data){ 24 | params.push(key + '=' + opt.data[key]); 25 | } 26 | var postData = params.join('&'); 27 | if (opt.method.toUpperCase() === 'POST') { 28 | xmlHttp.open(opt.method, opt.url, opt.async); 29 | xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8'); 30 | xmlHttp.send(postData); 31 | } 32 | else if (opt.method.toUpperCase() === 'GET') { 33 | xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async); 34 | xmlHttp.send(null); 35 | } 36 | xmlHttp.onreadystatechange = function () { 37 | if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 38 | opt.success(xmlHttp.responseText); 39 | } 40 | }; 41 | } --------------------------------------------------------------------------------