完整打造一个多功能音乐播放器项目（初步设想跟酷狗类似）
本人目前准备利用闲暇时间打造一个完整的音乐播放器项目，主要用于学习及分享！原创不易，转载请注明出处。
这是一个什么样的音乐播放器呢？整体的架构跟酷狗差不多吧，我的方式呢，是一个个组件一个个模块先做好，最后组合成完整的项目，最后项目会放在本人的github上，等项目完毕后会发布链接。另外呢，这个算是对自己曾经封装过的函数的一些检验，为了方便原理上的了解，整个项目不会用到任何的控件及插件，算是从底层的js或jq+audio开始吧（实际开发不推荐，这样效率太低，不过用于提升自己的还是推荐这样，写过一遍跟引用一遍是完全不同两个概念），当然也会适当的封一些函数，这些会放在文章的最末尾，每个模块或多或少都会引用其中部分函数。
模块①、歌词同步：（为了方便测试，先用了html5提供好的audio标签，我们只做歌词功能），初步效果是这样：（另外直接在酷狗下载歌词文件就可以用了）
这个其实不难，不过呢，咱用点最笨的办法（关于解析字符串，不用正则匹配），酷狗都用过吧，里面的歌词文件是.krc文件，这种文件是加密过的，所以呢，从酷狗下载下来的歌词文件需要先转化成lrc文件，推荐下面的软件：
krc文件点开是这样的：
转化成lrc文件后是这样的：
注意这时候lrc文件的字符编码不是utf-8，各位需要自行另存为utf-8文件，好了，歌词文件准备好了，可以开始我们的歌词模块了。
css及js文件我全部放在html里，完善后会逐步封装，css会采用less代替。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>基于js的更高级常用函数封装</title> 6 <script src="../js/jquery-3.3.1.min.js" type="text/javascript"></script> 7 <script src="../js/mine/dc-handle-function.js" type="text/javascript"></script> 8 <style> 9 .preload{ 10 width:200px; 11 height:100px; 12 position:absolute; 13 top:35%; 14 left:40%; 15 } 16 .preload img{ 17 width:100%; 18 height:100%; 19 } 20 .lyric{ 21 width:400px; 22 height:500px; 23 margin:0 auto; 24 display:none; 25 overflow-y:auto; 26 overflow-x:hidden; 27 font:18px "华文楷体"; 28 color:black; 29 text-align: center; 30 box-shadow:-2px 2px 15px #fff; 31 background:rgba(0,255,255,0.3); 32 } 33 .music{ 34 width:400px; 35 margin:0 auto; 36 } 37 .music audio{ 38 width:100%; 39 } 40 body{ 41 overflow:scroll; 42 background:url("../resource/bg.jpg") fixed no-repeat;background-size:cover; 43 } 44 </style> 45 <script> 46 $(function(){ 47 dorseyHf.dc_ajax_g('../resource/av/ChiQingZhong1.lrc?t='+new Date().getTime(), 48 function(str){ 49 //这个函数以后也是会封装的。 50 var str1=str.split("["); 51 var str2=[]; 52 var lyric=$(".lyric"); 53 for(var i=1;i<str1.length;i++){ 54 str2[i-1]=str1[i].split("]"); 55 } 56 for(let i=0;i<str2.length;i++){ 57 if(lyric.children('p').length==0){ 58 lyric.append('<p></p>'); 59 } 60 lyric.children('p').eq(i).html(str2[i][1]); 61 lyric.append('<p></p>'); 62 } 63 lyric.css("display","block"); 64 //str3: "00：00.09"，即获取到歌词的前半部分[时间]； 65 var str3=[],str4=[],str5=[]; 66 for(var i=2;i<str2.length;i++){ 67 str3[i-2]=str2[i][0]; 68 } 69 //str4: str4[i][0]="00";str4[i][1]="00.09" 70 //str5：计算str4转化后min:sec的值，单位(s)，用于后续与当前时间比较。 71 for(var i=0;i<str3.length;i++){ 72 str4[i]=str3[i].split(":"); 73 str5[i]=(parseFloat(str4[i][0])*60)+parseFloat(str4[i][1]); 74 console.log("p"+i+":"+lyric.children('p').eq(i+2).offset().top); 75 } 76 $('audio').on("timeupdate",function(){ 77 var scale=this.currentTime; 78 // var k=[]; 79 for(var i=0;i<str5.length;i++){ 80 if(scale>=str5[i]){ 81 lyric.children('p').eq(i+2).css("color","red").siblings().css("color",""); 82 lyric.children('p').eq(i+2).css("transform","scale(1.4)"). 83 siblings().css("transform",""); 84 k[i]=i; 85 // lyric.scrollTop(lyric.children('p').eq(i).offset().top); 86 } 87 } 88 // var music=k.length; 89 // console.log(music+": "+lyric.children('p').eq(music).offset().top); 90 }); 91 },$('img')); 92 }) 93 </script> 94 </head> 95 <body> 96 <div class="music"> 97 <audio src="../resource/av/ChiQingZhong.mp3" controls="controls"></audio> 98 </div> 99 <div class="preload"> 100 <img src="../resource/preload.gif" alt=""> 101 </div> 102 <div class="lyric"> 103 </div> 104 </body> 105 </html>
这里需要引用一些封装函数，需引入dorseyHf类库（这里不贴了请看最后面），jq的压缩版自行百度：
模块②、音乐盒之基本功能——播放暂停，上下首切换，歌曲详情，歌曲播放进度（可自由拖动），自动列表循环播放。
不知不觉快1点了，时间过得好快，这个项目的左侧是音乐盒，右侧是拓展，音乐盒是这样：
算上拓展功能差不多是这样：
由于本人不懂UI，配色设计不好请见谅，咱更看重的是功能实现，废话不多说了。
初步构思的时候，整个播放器的图标还是比较多的，这里推荐一种比较好的方式——阿里字体iconfont，跟你逛淘宝一样，进入iconfont官网后，对你想要的图标各种买买买，加购物车，当然不用钱的，你再也不用担心你男朋友不帮你清空购物车了，添加完购物车后呢，这些字体呢有好几种方式提供给你，做成图标的png格式，svg格式，jpg格式等等，还有最重要的字体模式，你点下载代码就可以了。
下载完解压是这样的：
你只需根据提示（点开3个html里面任意一个看你要用什么格式，这写html可以理解成教学文档之类的），照着做就可以了。
好了，基本的素材准备好了，开始我们的代码之旅吧！
html部分：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>dorsey</title> 6 <link rel="shortcut icon" href="../resource/favicon.ico" type="image/x-icon"/> 7 <link rel="stylesheet" href="../css/music.min.css" type="text/css"> 8 9 <script src="../font/index/iconfont.js"></script><!--阿里字体引入--> 10 <script src="../dist/jquery-3.3.1.min.js" type="text/javascript"></script><!--jQuery框架引入--> 11 12 <!--动画引入，动画推荐“wow”（该插件兼容性也只是IE10+，有历史遗留的请慎用）--> 13 <script src="../dist/dc-animate.js" type="text/javascript"></script> 14 15 <script src="../js/music.js" type="text/javascript"></script> 16 </head> 17 <body> 18 <div class="music"> 19 <div class="playerBg"></div> 20 <div class="player"> 21 <!--这是这个音乐播放器的核心：音乐盒，主要包含的功能模块类似于酷狗左侧那个框，比如列表list，最近播放recentPlay，播放栏 22 （上下页，开始暂停播放，播放进度，音量，播放方式等等），本地音乐，音乐电台，网络收藏等等--> 23 <div class="musicBox dc_left"> 24 <div class="header"> 25 <ul> 26 <li class="logo dc_left"><img src="../resource/logo.gif" alt=""></li> 27 <li class="dc_left"><img src="" class="ver"><span>dorsey</span></li> 28 <li class="dc_right dc_icon"> 29 <img src="" class="ver"> 30 <svg class="icon unfold" aria-hidden="true"> 31 <use xlink:href="#icon-iconzhankai"></use> 32 </svg> 33 <svg class="icon" aria-hidden="true"> 34 <use xlink:href="#icon-zuixiaohua3"></use> 35 </svg> 36 <svg class="icon" aria-hidden="true"> 37 <use xlink:href="#icon-iconfonticon2"></use> 38 </svg> 39 </li> 40 </ul> 41 </div> 42 <!--音乐盒导航，实际上可以看成是一个选项卡--> 43 <div class="nav"> 44 <ul> 45 <li> 46 <img src="" class="ver"> 47 <svg class="icon" aria-hidden="true"> 48 <use xlink:href="#icon-yinlemusic214"></use> 49 </svg> 50 </li> 51 <li> 52 <img src="" class="ver"> 53 <svg class="icon" aria-hidden="true"> 54 <use xlink:href="#icon-guanyuyunguanjia"></use> 55 </svg> 56 </li> 57 <li> 58 <img src="" class="ver"> 59 <svg class="icon" aria-hidden="true"> 60 <use xlink:href="#icon-xinhaojieshouqi"></use> 61 </svg> 62 </li> 63 <li> 64 <img src="" class="ver"> 65 <svg class="icon" aria-hidden="true"> 66 <use xlink:href="#icon-shouji"></use> 67 </svg> 68 </li> 69 <li> 70 <img src="" class="ver"> 71 <svg class="icon" aria-hidden="true"> 72 <use xlink:href="#icon-wenjianjia-zhankai"></use> 73 </svg> 74 </li> 75 </ul> 76 </div> 77 <!--音乐盒导航栏每个导航对应的内容:1、音乐列表，2、网络收藏，3、音乐电台，4、链接手机，5、本地音乐--> 78 <div class="nav_detail"> 79 <div class="musicList on">音乐列表</div> 80 <div class="cloudCollect">网络收藏</div> 81 <div class="musicDisk">音乐电台</div> 82 <div class="musicMP">手机管理</div> 83 <div class="musicLocal">本地音乐</div> 84 </div> 85 <!--音乐盒核心部分，播放歌曲，上下首切换，播放进度，音量，播放模式，显示歌词，我喜欢（收藏），下载歌曲， 86 更多（暂时没想好，用作拓展用），由于这个模块相对功能较多，我的时间比较零散，所以准备拆分成几个模块来做： 87 1、基本功能：播放暂停，上下首切换，播放进度 88 2、拓展功能1：播放模式 89 3、拓展功能2：歌词显示，歌词模块的代码会改成字符串正则匹配的方式 90 4、拓展功能3：音量，下载歌曲 91 5、拓展功能4：我喜欢（收藏），更多（看情况吧，可能仅仅只有点击效果，暂时想不到要添加什么） 92 --> 93 <div class="musicPlayer"> 94 <!--<div class="logo1">dorsey</div>--> 95 <div class="feature"> 96 <div class="btn_basic"> 97 <svg class="icon pre" aria-hidden="true"> <!--上一首按钮--> 98 <use xlink:href="#icon-unie622"></use> 99 </svg> 100 <svg class="icon play" aria-hidden="true" style=""> <!--播放按钮--> 101 <use xlink:href="#icon-bofang"></use> 102 </svg> 103 <svg class="icon pause noDisplay" aria-hidden="true"> <!--暂停按钮--> 104 <use xlink:href="#icon-pause"></use> 105 </svg> 106 <svg class="icon next" aria-hidden="true"> <!--下一首按钮--> 107 <use xlink:href="#icon-unie623"></use> 108 </svg> 109 <div> 110 <!--<hr>--> 111 </div> 112 </div> 113 <div class="others"> 114 <svg class="icon" aria-hidden="true"> <!--收藏按钮--> 115 <use xlink:href="#icon-like-1"></use> 116 </svg> 117 <svg class="icon" aria-hidden="true"> <!--下载按钮--> 118 <use xlink:href="#icon-xiazai"></use> 119 </svg> 120 <svg class="icon" aria-hidden="true"> <!--播放模式按钮--> 121 <use xlink:href="#icon-danquxunhuan"></use> 122 </svg> 123 <svg class="icon" aria-hidden="true"> <!--音量调整按钮--> 124 <use xlink:href="#icon-mn_shengyin"></use> 125 </svg> 126 <svg class="icon" aria-hidden="true"> <!--更多按钮--> 127 <use xlink:href="#icon-gengduo-copy"></use> 128 </svg> 129 <svg class="icon" aria-hidden="true"> <!--歌词文本按钮--> 130 <use xlink:href="#icon-text3wenben"></use> 131 </svg> 132 </div> 133 </div> 134 <div class="progressBar"> 135 <div class="time"> 136 <span class="dc_left">贾青-痴情冢</span> 137 <span class="dc_right">01:16 / 03:22</span> 138 </div> 139 <span class="barBg"> 140 <span class="barFg"></span> 141 <span class="barSlide"></span> 142 </span> 143 </div> 144 </div> 145 <!--H5音乐播放--> 146 <audio src="../resource/av/贾青-痴情冢.mp3" class="audio"></audio> 147 </div> 148 <!--这部分是整个音乐播放器的拓展，如歌词，音效，播放队列，一键换肤，一键收起展开等等后续想到再一一补充--> 149 <div class="extensions dc_left"> 150 拓展功能 151 </div> 152 </div> 153 </div> 154 </body> 155 </html>
css
body,dd,div,dt,h1,h2,h3,h4,h5,h6,html,li,ol,p,span,table,ul{margin:0;padding:0}li,ul{list-style:none}a{text-decoration:none}.dc_left{float:left}.dc_right{float:right}.dc_clear{content:"";display:block;clear:both}.dc_mar_center{margin:0 auto}.dc_title{font:30px 华文楷体;color:red;text-align:center;text-shadow:0 0 3px #7e0000}.dc_pointer{cursor:pointer}.dc_c_red{color:red}.icon{width:1.5em;height:1.5em;vertical-align:-.15em;fill:currentColor;overflow:hidden;color:#fff;cursor:pointer;transition:.5s}.icon:hover{transform:scale(1.5)}.music{width:1000px;height:600px;margin:50px auto 0;position:relative}.playerBg{width:100%;height:100%;position:absolute;opacity:.3}.ver{width:0;height:100%;vertical-align:middle;visibility:hidden}.player{width:100%;height:100%;position:absolute;color:#fff}.player .musicBox{width:30%;height:100%;box-shadow:-1px 1px 10px #fff;-webkit-box-shadow:-1px 1px 10px #fff;-moz-box-shadow:-1px 1px 10px #fff;-o-box-shadow:-1px 1px 10px #fff}.player .musicBox .header{width:100%;height:8%;background:rgba(255,255,255,.3)}.player .musicBox .header ul{width:100%;height:100%}.player .musicBox .header li{height:100%;font:15px "Times New Roman";box-sizing:border-box}.player .musicBox .header .logo{width:12%;height:100%;margin-left:10px}.player .musicBox .header .logo img{margin-top:8%;width:100%;height:80%}.player .musicBox .header .dc_icon{text-align:right;padding:2%}.player .musicBox .header .dc_icon .icon{width:1.2em;height:1em}.player .musicBox .nav{width:100%;height:6%;background:rgba(255,255,255,.2)}.player .musicBox .nav ul{width:100%;height:100%;margin-left:-1%}.player .musicBox .nav li{width:20%;height:100%;box-sizing:border-box;text-align:center;padding:2%;float:left}.player .musicBox .nav li .icon{color:#6fff2d}.player .musicBox .nav_detail{width:100%;height:70%;background:rgba(255,255,255,.1);position:relative}.player .musicBox .nav_detail div{width:100%;height:100%;position:absolute;font:50px "华文楷体";text-align:center;line-height:400px;display:none}.player .musicBox .nav_detail .on{display:block}.player .musicBox .musicPlayer{width:100%;height:16%;background:rgba(255,255,255,.2)}.player .musicBox .musicPlayer .feature{width:100%;height:60%;padding:.5em;box-sizing:border-box}.player .musicBox .musicPlayer .feature .btn_basic{width:50%;height:100%;float:left;padding:.75em 0;box-sizing:border-box}.player .musicBox .musicPlayer .feature .btn_basic .pause,.player .musicBox .musicPlayer .feature .btn_basic .play{transform:scale(2);margin:0 1em}.player .musicBox .musicPlayer .feature .btn_basic .noDisplay{display:none}.player .musicBox .musicPlayer .feature .others{width:50%;height:100%;float:left;text-align:right;padding:1em 0;box-sizing:border-box}.player .musicBox .musicPlayer .feature .others .icon{width:1em;height:1em}.player .musicBox .musicPlayer .progressBar{width:90%;height:30%;margin:1% 5% 5%;transition:all .2s;position:relative;box-sizing:border-box}.player .musicBox .musicPlayer .progressBar .time{width:100%;font:12px "Times New Roman";margin-bottom:2px}.player .musicBox .musicPlayer .progressBar .time:after{content:"";display:block;clear:both}.player .musicBox .musicPlayer .progressBar .barBg{position:absolute;width:100%;height:3px;background:#ccc;border-radius:1.5px 1.5px 1.5px 1.5px;-webkit-border-radius:1.5px 1.5px 1.5px 1.5px;-moz-border-radius:1.5px 1.5px 1.5px 1.5px}.player .musicBox .musicPlayer .progressBar .barFg{position:absolute;width:100px;height:3px;background:linear-gradient(to left,#438aff,#cdfff7);border-radius:1.5px 1.5px 1.5px 1.5px;-webkit-border-radius:1.5px 1.5px 1.5px 1.5px;-moz-border-radius:1.5px 1.5px 1.5px 1.5px}.player .musicBox .musicPlayer .progressBar .barSlide{position:absolute;width:10px;height:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px 5px 5px 5px;left:90px;top:-3.5px;background:linear-gradient(to right,#438aff,#fff,#438aff);cursor:pointer}.player .extensions{width:70%;height:100%;visibility:hidden;box-shadow:1px 1px 10px #fff;-webkit-box-shadow:1px 1px 10px #fff;-moz-box-shadow:1px 1px 10px #fff;-o-box-shadow:1px 1px 10px #fff;font:50px '华文楷体';text-align:center;line-height:200px}body{background:url(../resource/images/bg10.png) fixed no-repeat;background-size:100% 100%}
js
1 $(function(){ 2 /*展开拓展栏按钮功能函数*/ 3 $('.icon.unfold').click(function(){ 4 $(this).css("display","none");//展开按钮点击后隐藏 5 let oExt=$('.extensions'); 6 dorseyAn.unfold(oExt,"translate3d(-80%,-70%,0)","0.5s");//调用dorseyAn的动画弹出函数 7 }); 8 /*导航栏功能函数*/ 9 $('.nav li').click(function(){ 10 $(this).find('.icon').css("color","white").siblings().find('.icon'); 11 $(this).siblings().find('.icon').css("color",""); 12 $(".nav_detail").children('div').eq($(this).index()).addClass('on').siblings().removeClass('on'); 13 }); 14 /** 15 * 播放模块功能：这些函数暂时比较杂，后面等功能完善了会一一封装，也会优雅一些 16 * 包括上下首歌曲切换，播放与暂停，播放进度及播放的歌曲简介如歌手歌名等等，这里先这样，后续音乐列表那还会 17 * 做一个头像，并在播放时旋转。 18 * */ 19 20 /**基本功能定义的变量，一个个定义的话也是可以的，不过呢，这样泄露太多全局变量，起码在我们这里是全局变量，咱用 21 * 个全局对象接口包一下，也方便统一管理与后期维护 22 * */ 23 let msBasic={ 24 $play:$('.icon.play'), //播放按钮 25 $pause:$('.icon.pause'),//暂停按钮 26 $audio:$('.audio'),//html5标签<audio></audio>，这里注意是jquery选出来的，是一个对象 27 $next:$('.icon.next'),//下一首 28 $pre:$('.icon.pre'),//上一首 29 30 $barBg:$('.progressBar .barBg'),//进度条背景色标签对象 31 $barFg:$('.progressBar .barFg'),//进度条前景色标签对象 32 $barSlide:$('.progressBar .barSlide'),//进度条滑块标签对象 33 $progressTime:$('.progressBar .time'),//播放进度及正在播放的歌曲简介信息（歌手，歌名等等） 34 $dragAble:false //用于判断拖拽的滑块是否按下 35 }; 36 let flag=0; 37 let musicTi=['贾青 - 痴情冢','胡歌 - 月光 (TV版)','胡歌、白冰 - 美丽的神话']; 38 //musicTi：歌名文件（存储你所有的歌曲），需要后台提供一个存储歌名的json，为方便测试，暂用字符串代替 39 let play=function(){ 40 msBasic.$play.hide(); 41 msBasic.$pause.show(); 42 msBasic.$audio.get(0).play(); 43 }; 44 let pause=function(){ 45 msBasic.$pause.hide(); 46 msBasic.$play.show(); 47 msBasic.$audio.get(0).pause(); 48 }; 49 /*播放按钮*/ 50 msBasic.$play.click(function(){ 51 play(); 52 }); 53 /*暂停按钮*/ 54 msBasic.$pause.click(function(){ 55 pause(); 56 }); 57 let next=function(){ 58 flag++; 59 flag%=musicTi.length; 60 msBasic.$audio.attr("src","../resource/av/"+musicTi[flag]+".mp3"); 61 msBasic.$progressTime.children('span').eq(0).html(musicTi[flag]); 62 play(); 63 }; 64 let previous=function(){ 65 flag--; 66 flag<0?flag=musicTi.length-1:flag; 67 msBasic.$audio.attr("src","../resource/av/"+musicTi[flag]+".mp3"); 68 msBasic.$progressTime.children('span').eq(0).html(musicTi[flag]); 69 play(); 70 }; 71 /*下一首歌曲按钮*/ 72 msBasic.$next.click(function(){ 73 next(); 74 }); 75 /*上一首歌曲按钮*/ 76 msBasic.$pre.click(function(){ 77 previous(); 78 }); 79 /*监听歌曲时间变化，当然用js的addEventListener也可以*/ 80 msBasic.$audio.on("timeupdate",function(){ 81 var min,sec,minAll="00",secAll="00"; 82 /*歌曲当前播放进度*/ 83 min=dorseyHf.timeHandle(this.currentTime,"minute");//调用dorseyHf的时间处理函数，算是比较简单的封装吧 84 sec=dorseyHf.timeHandle(this.currentTime,"second"); 85 /*歌曲播放总时长*/ 86 if(this.duration){ 87 //为什么用if呢？你可以去掉试试，因为当我们切换上下首时，duration监听不到，是一个undefined,会使计算的结果变成NaN， 88 // 这样我们的界面也会看到这个NaN（计算的结果非数字值），这样就不好了 89 minAll=dorseyHf.timeHandle(this.duration,"minute"); 90 secAll=dorseyHf.timeHandle(this.duration,"second"); 91 } 92 /*播放进度条*/ 93 var allW=msBasic.$barBg.outerWidth(),slideW; 94 slideW=allW*this.currentTime/this.duration;//当前播放进度时间除以总歌曲持续时间 95 msBasic.$barFg.css("width",slideW+"px"); 96 msBasic.$barSlide.css("left",slideW+"px"); 97 msBasic.$progressTime.children('span').eq(1).html(min+":"+sec+"/"+minAll+":"+secAll); 98 //播放完毕自动播放下一首 99 if(this.currentTime>=this.duration-1){ 100 //想想为什么要这样？而不是简单的currentTime等于duration就可以了？ 101 next(); 102 } 103 }); 104 /*监听鼠标拖拽*/ 105 msBasic.$barSlide.on("mousedown",function(e){ 106 e=e||window.event; 107 msBasic.$slideAble=true; 108 var ex=e.pageX-msBasic.$barSlide.get(0).offsetLeft; 109 //每一次点击都存储一个滑块x初值，由于这里滑块得保持水平，所以不加一个Y， 110 // 这里各位可以延伸写一个拖拽组件出来 111 $(document).on({ 112 mousemove:function(e){ 113 e=e||window.event; 114 if(msBasic.$slideAble){ 115 var l=e.pageX-ex; //你会不会有疑问，l=e.pageX-ex=e.pageX-(e.pageX-其它)=其它？呵呵，两个是不一样的哈！ 116 //L的值，其实呢很简单，初中数学的x1-x2，只不过我们需要再考虑个原本滑块到浏览器边缘的距离 117 l>msBasic.$barBg.width()-1?l=msBasic.$barBg.width()-1:l; //判断拖拽条是否超界 118 l<0?l=0:l; 119 msBasic.$audio.get(0).currentTime=(l/msBasic.$barBg.width())*msBasic.$audio.get(0).duration; 120 msBasic.$barFg.css("width",l+"px"); 121 msBasic.$barSlide.css("left",l+"px"); 122 } 123 }, 124 mouseup:function(){ 125 msBasic.$slideAble=false; 126 } 127 }); 128 }); 129 });
虽说这里仅仅只有两个模块，不过呢，其实一个简易的音乐播放器就出来了（虽说纯底层语言做，但其实算上注释130行的代码也可以接受，当然还可以更低，暂时先这样），当然，我们的理想不仅仅是这样，对吧！
最后，需要引入的两个js库文件
1、dorseyAn：动画
1 ;(function(win){ //前面这分号别去掉哦，防止多个js文件合并压缩时因上一个js文件末尾少";"而带来的问题。 2 3 "use strict"; //严格模式，一般写自己类库的时候最好加上，减少一些代码不规范引起的错误。 4 5 /*模块说明：dorseyAn作为一切处理函数的入口*/ 6 let dorseyAn=function(){ 7 return new dorseyAn.fn.init(); 8 }; 9 dorseyAn.fn=dorseyAn.prototype={ 10 constructor:dorseyAn, //接口名：是dorsey-animate的缩写。意为动画 11 init:function(){ 12 return this; 13 }, 14 unfold:function(obj,animate,time){ //2018-01封装（初级）动画展开函数，支持动画自定义，如展开方式，展开过程持续时间 15 if(obj.css("visibility")==="hidden"){ 16 obj.css("visibility","visible"); 17 obj.css("transform",animate+" scale(0)"); 18 obj.css("transform"); 19 obj.css("transition",time); 20 obj.css("transform",""); 21 } 22 obj.css("transform",""); 23 }, 24 }; 25 dorseyAn=dorseyAn.fn.init.fn=dorseyAn.fn; 26 win.dorseyAn=dorseyAn; 27 })(window);
2、dorseyHf：函数处理
1 ;(function(win){ //前面这分号别去掉哦，防止多个js文件合并压缩时因上一个js文件末尾少";"而带来的问题。 2 3 "use strict"; //严格模式，一般写自己类库的时候最好加上，减少一些代码不规范引起的错误。 4 5 /*模块说明：dorseyHf作为一切处理函数的入口*/ 6 let dorseyHf=function(){ 7 return new dorseyHf.fn.init(); 8 }; 9 dorseyHf.fn=dorseyHf.prototype={ 10 constructor:dorseyHf, //接口名：是dorsey-handle-function的缩写。意为函数处理 11 init:function(){ 12 return this; 13 }, 14 math:{//数学相关处理函数，注意需要通过接口dorseyHf来调用，如dorseyHf.math.random(100,200); 15 random:function(min,max){//生成一个指定范围大小的随机数，默认值小数点后15位 16 return Math.random()*(max-min)+min; 17 }, 18 randomAccuracy:function(min,max,dec){ //生成一个可以任意指定精度的随机数 19 return Math.round((Math.random()*(max-min)+min)*Math.pow(10,dec))/Math.pow(10,dec); 20 } 21 }, 22 //2018-05-25封装（初级）：用于dorsey音乐播放器音乐盒上的一些时间显示处理，注意传入的参数是以秒为单位 23 timeHandle:function(times,flag){//这种方式还是不太好，暂时先这样 24 var time; 25 flag==="minute"?time=parseInt(times/60)%60:(flag==="second"?time=parseInt(times%60): 26 (flag==="hour"?time=parseInt(times/3600)%24:null)); 27 time<10?time="0"+time:time; 28 return time; 29 }, 30 timeHandle1:function(times){ 31 }, 32 dc_ajax_g:function(url,fnSucceed,preObj,fnFail){//ajax获取操作 33 /** 34 * url：可以是后台接口，json数据，也可以是json文件位置 35 * fnSucceed：ajax获取成功后的操作 36 * preObj：预加载，ajax由于要与后台服务器做交互，这需要时间，特别是前后交互数据较大时，用于提醒用户 37 * 现在在做加载，请稍后...一般是一个gif，或者干脆一个请稍后都行，注意的是基于JQuery的$(select)对象。 38 * fnFail：ajax获取失败后返回的操作，一般类似于404这样的东西。 39 * */ 40 preObj.css("display","block"); 41 setTimeout(function(){ 42 var oAjax = new XMLHttpRequest(); 43 oAjax.open('GET',url,true); 44 oAjax.send(); 45 oAjax.onreadystatechange=function(){ 46 if(oAjax.readyState==4){ 47 if(oAjax.status==200){ 48 fnSucceed(oAjax.responseText);//获取响应 49 preObj.css("display","none"); 50 } 51 else{ 52 if(fnFail){ 53 fnFail(oAjax.status); 54 } 55 } 56 } 57 }; 58 },1500);//这个延迟最好改为0，或者干脆把setTimeout去掉，这样加的原因是方便那些ajax获取过快的 59 // 用户可以查看到这个预加载的效果。 60 } 61 }; 62 dorseyHf=dorseyHf.fn.init.fn=dorseyHf.fn; 63 win.dorseyHf=dorseyHf; 64 })(window);
后续每个模块写好了会逐步更新，等项目最终完毕了会挂载到github，各位到时可自行下载。
