最近工作需求需要播放预览一些音乐资源，所以自己写了个控制audio的音乐播放器。

实现的原理主要是通过js调整audio的对象属性及对象方法来进行控制：

1.通过play()、pause()来控制音乐的播放与暂停

2.通过duration、currentTime获取音乐长度及实时播放进度

3.通过volume、muted对音量大小进行调节

4.通过ended、error检测音乐的播放状态

首先来看一下实现效果：当播放点击音乐时该音乐展示播放进度、进度条、音乐条

本例子实际效果（博客园不允许添加audio，所以只能展示样式）：

 
 
05:18
老街
作者: 李荣浩
上传时间: 2019-01-01 12:25:34
收藏量: 5426
推荐 删除
04:03
七友
作者: 梁汉文
上传时间: 2019-01-06 14:32:28
收藏量: 1215
推荐 删除

首先要实现的是音乐的播放与暂停，当点击播放按钮时首先通过对比音乐是否控制当前播放音乐还是更换音乐播放，如果是控制当前音乐则通过play()、paused()进行播放及暂停，如果是更换音乐则先删除原播放进度条及音乐条，然后重新载入进行播放

  1. function playMusic(obj) {
  2.   var musicPlayUrl = musicPlayer.src
  3.   var thisKey = $(obj).data('key')
  4.   clearInterval(musicPlayerTimer)
  5.  
  6.   $('.music-play').removeClass('current')
  7.  
  8.   if(musicPlayUrl == thisKey){
  9.     //停止播放音乐
  10.     if(musicPlayer.paused){
  11.       $(obj).parent().parent().addClass('current')
  12.       musicPlayer.play()
  13.       musicPlayerTimer = setInterval(musicPlayProgress,1000)
  14.     }else{
  15.       musicPlayer.pause()
  16.     }
  17.   }else{
  18.     //更换音乐播放
  19.     musicPlayer.src = thisKey
  20.     musicPlayer.play()
  21.     $(obj).parent().parent().addClass('current')
  22.     $('#musicplayer-bar-container,#musicplayer-volume-container,#music-play-time').remove()
  23.     var thisCon = $(obj).parent().parent()
  24.     var musicPlayerBarHtml = `<div class="progress" id="musicplayer-bar-container">
  25.                           <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 0%;" id="music-player-bar">
  26.                           </div>
  27.                       </div>`
  28.     var musicPlayerVolumeHtml = `<div id="musicplayer-volume-container">
  29.                       <div id="musicplayer-volume-bar-container">
  30.                         <div id="musicplayer-volume-bar"></div>
  31.                       </div>
  32.                       <div class="musicplayer-volume-icon">
  33.                         <a href="javascript:;" onclick="muteSetting(this)"><i class="iconfont"></i></a>
  34.                       </div>
  35.                     </div>`
  36.     thisCon.append(musicPlayerBarHtml,musicPlayerVolumeHtml)
  37.     $(obj).parent().parent().find('.music-length').append('<span id="music-play-time"></span>')
  38.   }
  39. }

　　

在播放途中通过duration、currentTime计算当前播放进度并用定时器实时加载进度条，同时通过ended、error检测音乐播放是否出现错误，或者播放完成

  1. // 检测播放进度
  2. function musicPlayProgress(){
  3.     var musicTotalLength = musicPlayer.duration
  4.     var musicCurrentLength = musicPlayer.currentTime
  5.     var musicProgress = (musicCurrentLength / musicTotalLength) * 100 + '%'
  6.     $('#music-play-time').html(timeConversion(musicCurrentLength) + ' / ' + timeConversion(musicTotalLength))
  7.     $('#music-player-bar').css('width',musicProgress)
  8.     if(musicPlayer.ended){
  9.       // 检测是否暂停状态
  10.       $('.music-play').removeClass('current')
  11.     }
  12.     if(musicPlayer.error != null){
  13.       // 检测是否播放错误
  14.       clearInterval(musicPlayerTimer)
  15.       $('.music-play').removeClass('current')
  16.       alert('音乐播放错误！')
  17.     }
  18. }

　　

因为duration、currentTime获取到的单位是秒，所以需要对其进行时间格式的转换

  1. // 时间格式转换
  2. function timeConversion(time){
  3.   var seconds = parseInt(time)   // 秒
  4.   var minutes = 0                // 分
  5.   var hours = 0                  // 小时
  6.   if(seconds > 60) {
  7.       minutes = parseInt(seconds/60);
  8.       seconds = parseInt(seconds%60);
  9.       if(minutes > 60) {
  10.           hours = parseInt(minutes/60);
  11.           minutes = parseInt(minutes%60);
  12.       }
  13.   }
  14.   var result = ''
  15.   if(seconds < 10)
  16.     seconds = '0' + seconds
  17.   if(minutes < 10)
  18.     minutes = '0' + minutes
  19.   if(hours > 0) {
  20.     if(hours < 10)
  21.       hours = '0' + hours
  22.     result = hours + ':' + minutes + ":" + seconds
  23.   }else{
  24.     result = minutes + ":" + seconds
  25.   }
  26.   return result
  27. }

　　

当点击静音按钮时通过muted、volume来设置当前播放的音乐静音状态

  1. // 静音设置
  2. function muteSetting(obj){
  3.   var isHasMute = $(obj).parent().hasClass('mute')
  4.   if(isHasMute){
  5.     // 开启声音
  6.     musicPlayer.muted = false
  7.     musicPlayer.volume = 1
  8.     $(obj).find('i').html('')
  9.     $(obj).parent().removeClass('mute')
  10.     $('#musicplayer-volume-bar').css('height','0%')
  11.   }else{
  12.     // 设置静音
  13.     musicPlayer.muted = true
  14.     $(obj).find('i').html('')
  15.     $(obj).parent().addClass('mute')
  16.     $('#musicplayer-volume-bar').css('height','100%')
  17.   }
  18. }

　　

当用户点击进度条时通过offsetX、offsetY获取到点击到的百分比值，然后对其设置currentTime、volume来进行操作

  1. // 控制进度条
  2.   $('#musicplayer-bar-container').bind('click',function(e){
  3.     var leftDistance = e.offsetX
  4.     var clickProgress = (leftDistance / $(this).width())
  5.     musicPlayer.currentTime = musicPlayer.duration * clickProgress
  6.     $('#music-player-bar').css('width',clickProgress * 100 + '%')
  7.   })
  8.  
  9.   // 控制音量
  10.   $('#musicplayer-volume-bar-container').bind('click',function(e){
  11.     var topDistance = e.offsetY
  12.     var clickProgress = (topDistance / $(this).height())
  13.     musicVolume = 1 - clickProgress
  14.     musicPlayer.volume = musicVolume
  15.     $('#musicplayer-volume-bar').css('height', clickProgress * 100 + '%')
  16.     if(musicVolume > 0){
  17.       musicPlayer.muted = false
  18.       $('.musicplayer-volume-icon').find('i').html('')
  19.       $('.musicplayer-volume-icon').removeClass('mute')
  20.     }
  21.   })

　　

完成上面的操作就做好了~

布局样式就不多说了~直接上代码，项目中我用了bootstrap，例子就大体实现布局就可以了，具体样式自己去调整~以下是完整的html、css、js代码：

  1. <style>
  2. .music-head-wrap{display: flex;align-items: center;overflow: hidden;}
  3. .music-head{width: 5rem;height: 5rem;-webkit-border-radius: 2.5rem;-moz-border-radius: 2.5rem;-ms-border-radius: 2.5rem;border-radius: 2.5rem;overflow: hidden;position: relative;margin: 1.8rem 1rem 0 1rem;}
  4.   .music-head-img{position: relative;width: 100%;height: 100%;-webkit-border-radius: 2.5rem;-moz-border-radius: 2.5rem;-ms-border-radius: 2.5rem;border-radius: 2.5rem;overflow: hidden;}
  5.   .music-head .music-head-img img{width: 100%;height: auto;min-height: 5rem;}
  6.   .music-head a{display: flex;width: 100%;height: 100%;align-items:center;justify-content: center;position: absolute;left: 0;top: 0;background: rgba(0, 0, 0, .5);color: rgba(255, 255, 255, .6);font-size: 2.5rem;-webkit-border-radius: 2.5rem;-moz-border-radius: 2.5rem;-ms-border-radius: 2.5rem;border-radius: 2.5rem;overflow: hidden;}
  7.   .music-play.current .music-head-img{-webkit-animation: musicplay 10s infinite linear;-moz-animation: musicplay 10s infinite linear;-ms-animation: musicplay 10s infinite linear;-o-animation: musicplay 10s infinite linear;animation: musicplay 10s infinite linear;}
  8.   .music-head .icon-play{display: none;}
  9.   .music-play.current .icon-stop{display: none;}
  10.   .music-play.current .icon-play{display: block;}
  11.   .music-length{font-size: .8rem;line-height: 2rem;text-align: center;}
  12.   #music-play-time{display: none;}
  13.   .music-play.current .music-length span{display: none;}
  14.   .music-play.current .music-length span#music-play-time{display: block;}
  15.  
  16. .music-list{width: 100%;height: auto;overflow: hidden;}
  17. .musiclist-wrap{width: 31.33%;height: 10rem;background: #fff;float: left;-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;border-radius: 5px;box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);display: flex;box-sizing: border-box;margin: 0 1% 1.5rem 1%;position: relative;}
  18.   .music-info{max-width: 70%;}
  19.   .music-info-name{font-size: 1.5rem;white-space: nowrap;padding: .8rem 0 .2rem 0;text-overflow: ellipsis;overflow: hidden;}
  20.   .music-info-author,.music-info-uploadtime,.music-info-collection,.music-info-operation{font-size: .8rem;white-space: nowrap;}
  21.  
  22. #musicplayer-bar-container{position: absolute;bottom: 0;left: 0;width: 100%;height: .5rem;background: #eee;}
  23.   #musicplayer-bar-container:hover{cursor: pointer;}
  24.   #musicplayer-bar-container .progress-bar{transition-duration:.3s;background: #00bcd4;position: absolute;left: 0;top: 0;height: 100%;}
  25. #musicplayer-volume-container{width: 1.2rem;height: 8rem;position: absolute;right: .2rem;bottom: .6rem;}
  26.   #musicplayer-volume-bar-container{width: 30%;height: 6.5rem;position: relative;background: #00bcd4;border-radius: 3px;overflow: hidden;margin: 0 auto;cursor: pointer;display: none;}
  27.   #musicplayer-volume-bar{background: #eee;position: absolute;left: 0;top: 0;width: 100%;-webkit-transition: .3s;-moz-transition: .3s;-ms-transition: .3s;transition: .3s;height: 0%;}
  28.   #musicplayer-volume-container:hover #musicplayer-volume-bar-container{display: block;}
  29.   .musicplayer-volume-icon{position: absolute;left: 0;bottom: 0;width: 100%;}
  30.   .musicplayer-volume-icon a{color: #666;}
  31.  
  32. @media screen and (max-width:1500px){
  33.   .music-list .musiclist-wrap{width: 48%;}
  34. }
  35.  
  36. @media screen and (max-width:830px){
  37.   .music-list .musiclist-wrap{width: 100%;margin: 0 0 1.5rem 0;}
  38. }
  39.  
  40. @media screen and (max-width:575.98px){
  41.   .music-list .musiclist-wrap{align-items: center;justify-content: center;height: auto;padding-bottom: .5rem;flex-direction: column;}
  42.   .music-info{max-width: 90%;}
  43.   .music-head{margin: 1rem 1rem 0 1rem;}
  44. }
  45.  
  46. @-webkit-keyframes musicplay{
  47.   100%{-webkit-transform: rotate(360deg)}
  48. }
  49. @-moz-keyframes musicplay{
  50.   100%{-moz-transform: rotate(360deg)}
  51. }
  52. @-ms-keyframes musicplay{
  53.   100%{-ms-transform: rotate(360deg)}
  54. }
  55. @keyframes musicplay{
  56.   100%{transform: rotate(360deg)}
  57. }
  58. </style>
  59.  
  60. <div class="music-list">
  61. 	<div class="musiclist-wrap">
  62.       <div class="music-play">
  63.         <div class="music-head">
  64.           <div class="music-head-img">
  65.             <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3226503153,2830890507&fm=58&bpow=406&bpoh=547" alt="李荣浩">
  66.           </div>
  67.           <a href="javascript:;" data-key="http://fs.w.kugou.com/201901051629/59234ca6f07a9269c2d092b00a8d9d5e/G002/M00/0C/00/Qg0DAFS9_KSAf3uhAE3fmiiZ_Zw419.mp3" onclick="playMusic(this)" class="music-head-mask">
  68.             <i class="iconfont icon-play"></i>
  69.             <i class="iconfont icon-stop"></i>
  70.           </a>
  71.         </div>
  72.         <div class="music-length text-center">
  73.           <span id="music-play-time"></span>
  74.           <span>05:18</span>
  75.         </div>
  76.       </div>
  77.       <div class="music-info">
  78.         <div class="music-info-name" title=" 老街 ">
  79.            老街
  80.         </div>
  81.         <div class="music-info-author">
  82.           <i class="iconfont"></i> 作者:  李荣浩
  83.         </div>
  84.         <div class="music-info-uploadtime">
  85.           <i class="iconfont"></i> 上传时间:  2019-01-01 12:25:34
  86.         </div>
  87.         <div class="music-info-collection">
  88.           <i class="iconfont"></i> 收藏量:  5426
  89.         </div>
  90.         <div class="music-info-operation">
  91.           <button type="button" rel="tooltip" class="btn btn-info btn-sm" title="推荐"><i class="iconfont"></i> 推荐</button>
  92.           <button type="button" rel="tooltip" class="btn btn-danger btn-sm" title="删除"><i class="iconfont"></i> 删除</button>
  93.         </div>
  94.       </div>
  95.   </div>
  96.  
  97.   <div class="musiclist-wrap">
  98.       <div class="music-play">
  99.         <div class="music-head">
  100.           <div class="music-head-img">
  101.             <img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3002163596,2541880871&fm=58&bpow=591&bpoh=533" alt="梁汉文">
  102.           </div>
  103.           <a href="javascript:;" data-key="http://fs.w.kugou.com/201901101638/33cc235a3fa9bb700282204c1c756767/G009/M04/09/19/SQ0DAFUEYFGAKkx6AD7Zs5WkFBw579.mp3" onclick="playMusic(this)" class="music-head-mask">
  104.             <i class="iconfont icon-play"></i>
  105.             <i class="iconfont icon-stop"></i>
  106.           </a>
  107.         </div>
  108.         <div class="music-length text-center">
  109.           <span id="music-play-time"></span>
  110.           <span>04:03</span>
  111.         </div>
  112.       </div>
  113.       <div class="music-info">
  114.         <div class="music-info-name" title=" 七友 ">
  115.            七友
  116.         </div>
  117.         <div class="music-info-author">
  118.           <i class="iconfont"></i> 作者:  梁汉文
  119.         </div>
  120.         <div class="music-info-uploadtime">
  121.           <i class="iconfont"></i> 上传时间:  2019-01-06 14:32:28
  122.         </div>
  123.         <div class="music-info-collection">
  124.           <i class="iconfont"></i> 收藏量:  1215
  125.         </div>
  126.         <div class="music-info-operation">
  127.           <button type="button" rel="tooltip" class="btn btn-info btn-sm" title="推荐"><i class="iconfont"></i> 推荐</button>
  128.           <button type="button" rel="tooltip" class="btn btn-danger btn-sm" title="删除"><i class="iconfont"></i> 删除</button>
  129.         </div>
  130.       </div>
  131.   </div>
  132. </div>
  133.  
  134. <audio controls="controls" style="display: none" id="music-player">
  135.   Your browser does not support the audio element.
  136. </audio>
  137.  
  138. <script src="http://127.0.0.1:8080/assets/js/core/jquery.min.js"></script>
  139.  
  140. <script>
  141. var musicPlayer = document.getElementById('music-player')
  142. var musicPlayerTimer
  143.  
  144. function playMusic(obj) {
  145.   var musicPlayUrl = musicPlayer.src
  146.   var thisKey = $(obj).data('key')
  147.   clearInterval(musicPlayerTimer)
  148.  
  149.   $('.music-play').removeClass('current')
  150.  
  151.   if(musicPlayUrl == thisKey){
  152.     //停止播放音乐
  153.     if(musicPlayer.paused){
  154.       $(obj).parent().parent().addClass('current')
  155.       musicPlayer.play()
  156.       musicPlayerTimer = setInterval(musicPlayProgress,1000)
  157.     }else{
  158.       musicPlayer.pause()
  159.     }
  160.   }else{
  161.     //更换音乐播放
  162.     musicPlayer.src = thisKey
  163.     musicPlayer.play()
  164.     $(obj).parent().parent().addClass('current')
  165.     $('#musicplayer-bar-container,#musicplayer-volume-container,#music-play-time').remove()
  166.     var thisCon = $(obj).parent().parent()
  167.     var musicPlayerBarHtml = `<div class="progress" id="musicplayer-bar-container">
  168.                           <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 0%;" id="music-player-bar">
  169.                           </div>
  170.                       </div>`
  171.     var musicPlayerVolumeHtml = `<div id="musicplayer-volume-container">
  172.                       <div id="musicplayer-volume-bar-container">
  173.                         <div id="musicplayer-volume-bar"></div>
  174.                       </div>
  175.                       <div class="musicplayer-volume-icon">
  176.                         <a href="javascript:;" onclick="muteSetting(this)"><i class="iconfont"></i></a>
  177.                       </div>
  178.                     </div>`
  179.     thisCon.append(musicPlayerBarHtml,musicPlayerVolumeHtml)
  180.     $(obj).parent().parent().find('.music-length').append('<span id="music-play-time"></span>')
  181.     musicPlayerTimer = setInterval(musicPlayProgress,1000)
  182.   }
  183.  
  184.   // 控制进度条
  185.   $('#musicplayer-bar-container').bind('click',function(e){
  186.     var leftDistance = e.offsetX
  187.     var clickProgress = (leftDistance / $(this).width())
  188.     musicPlayer.currentTime = musicPlayer.duration * clickProgress
  189.     $('#music-player-bar').css('width',clickProgress * 100 + '%')
  190.   })
  191.  
  192.   // 控制音量
  193.   $('#musicplayer-volume-bar-container').bind('click',function(e){
  194.     var topDistance = e.offsetY
  195.     var clickProgress = (topDistance / $(this).height())
  196.     musicVolume = 1 - clickProgress
  197.     musicPlayer.volume = musicVolume
  198.     $('#musicplayer-volume-bar').css('height', clickProgress * 100 + '%')
  199.     if(musicVolume > 0){
  200.       musicPlayer.muted = false
  201.       $('.musicplayer-volume-icon').find('i').html('')
  202.       $('.musicplayer-volume-icon').removeClass('mute')
  203.     }
  204.   })
  205. }
  206.  
  207. // 检测播放进度
  208. function musicPlayProgress(){
  209.     var musicTotalLength = musicPlayer.duration
  210.     var musicCurrentLength = musicPlayer.currentTime
  211.     var musicProgress = (musicCurrentLength / musicTotalLength) * 100 + '%'
  212.     $('#music-play-time').html(timeConversion(musicCurrentLength) + ' / ' + timeConversion(musicTotalLength))
  213.     $('#music-player-bar').css('width',musicProgress)
  214.     if(musicPlayer.ended){
  215.       // 检测是否暂停状态
  216.       $('.music-play').removeClass('current')
  217.     }
  218.     if(musicPlayer.error != null){
  219.       // 检测是否播放错误
  220.       clearInterval(musicPlayerTimer)
  221.       $('.music-play').removeClass('current')
  222.       alert('音乐播放错误！')
  223.     }
  224. }
  225.  
  226. // 静音设置
  227. function muteSetting(obj){
  228.   var isHasMute = $(obj).parent().hasClass('mute')
  229.   if(isHasMute){
  230.     // 开启声音
  231.     musicPlayer.muted = false
  232.     musicPlayer.volume = 1
  233.     $(obj).find('i').html('')
  234.     $(obj).parent().removeClass('mute')
  235.     $('#musicplayer-volume-bar').css('height','0%')
  236.   }else{
  237.     // 设置静音
  238.     musicPlayer.muted = true
  239.     $(obj).find('i').html('')
  240.     $(obj).parent().addClass('mute')
  241.     $('#musicplayer-volume-bar').css('height','100%')
  242.   }
  243. }
  244.  
  245. // 时间格式转换
  246. function timeConversion(time){
  247.   var seconds = parseInt(time)   // 秒
  248.   var minutes = 0                // 分
  249.   var hours = 0                  // 小时
  250.   if(seconds > 60) {
  251.       minutes = parseInt(seconds/60);
  252.       seconds = parseInt(seconds%60);
  253.       if(minutes > 60) {
  254.           hours = parseInt(minutes/60);
  255.           minutes = parseInt(minutes%60);
  256.       }
  257.   }
  258.   var result = ''
  259.   if(seconds < 10)
  260.     seconds = '0' + seconds
  261.   if(minutes < 10)
  262.     minutes = '0' + minutes
  263.   if(hours > 0) {
  264.     if(hours < 10)
  265.       hours = '0' + hours
  266.     result = hours + ':' + minutes + ":" + seconds
  267.   }else{
  268.     result = minutes + ":" + seconds
  269.   }
  270.   return result
  271. }
  272. </script>

　　

自定义css样式结合js控制audio做音乐播放器的更多相关文章

  1. C#做音乐播放器时在自动下一曲中报异常的解决办法

    ---------------------- ASP.Net+Unity开发..Net培训.期待与您交流! ---------------------- 在利用Media Player做音乐播放器的时 ...

  2. 使用 原生js 制作插件 (javaScript音乐播放器)

    1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  3. iOS－自定义Model转场动画－仿酷我音乐播放器效果

    周末,闲来无事,仿写了酷我音乐播放器效果: 效果图如下: 实现思路: 1.实现手势处理视图旋转 2.自定义Model动画: 1.手势是利用了一个UIPanGestureRecognizer手势: 注意 ...

  4. 用mciSendString做音乐播放器

    音乐操作类 public class clsMCI { public clsMCI() { // // TODO: 在此处添加构造函数逻辑 // } //定义API函数使用的字符串变量 [Marsha ...

  5. Vuejs---《Vue.js + Node.js-构建音乐播放器新玩法-video》

    官方文档:http://vuejs.org/v2/guide/syntax.html 中文文档: https://cn.vuejs.org/v2/guide/syntax.html https://g ...

  6. 原生JS实现音乐播放器！

      前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的 ...

  7. JS实现音乐播放器

    JS实现音乐播放器  前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...

  8. Github上html页面(包括CSS样式和JS效果)如何显示出来

    在看Github上项目时,发现有的html页面效果能很好的展现出来,而有的则不能.对这个问题很好奇,因此研究了一下,最终做到了将页面展示出来的目的.下面以我的Github的开源项目bootstrap- ...

  9. HTML5 - 使用JavaScript控制<audio>音频的播放

    有时我们需要使用js来控制播放器实现音乐的播放,暂停.或者使用js播放一些音效.   1,通过JavaScript控制页面上的播放器 比如把页面上添加一个<audio>用来播放背景音乐(由 ...

随机推荐

  1. 简单的文件ftp上传

    目录 简单的文件ftp上传 简单的文件ftp上传 server import socket import struct service=socket.socket() service.bind(('1 ...

  2. 解决 /etc/init.d/php-fpm no such file or directory等相关问题

    vi /etc/init.d/php-fpm #! /bin/sh # Comments to support chkconfig on CentOS # chkconfig: 2345 65 37 ...

  3. 实现单点登录功能的思路以及kafka同步数据

    单点登录以及用户数据同步思路与方案 当公司业务分布于多个子系统时, 同一用户在A系统注册,即可在其他所有关联系统使用, 并支持登录A系统后,自动在其他系统登录,退出同理. 在A平台修改通用的用户数据( ...

  4. mysql 关于字符串搜索的函数

    与like作用相似 FIND_IN_SET LOCATE POSITION

  5. mac下MySQL出现乱码的解决方法

    之前写过一篇Linux下MySQL出现乱码的解决方法,本文说下mac下的处理,其实处理方式是一样的,我电脑的mysql版本是5.7.26-log 网上很多帖子都说去/usr/local/mysql/s ...

  6. 论文笔记：Learning Region Features for Object Detection

    中心思想 继Relation Network实现可学习的nms之后,MSRA的大佬们觉得目标检测器依然不够fully learnable,这篇文章类似之前的Deformable ROI Pooling ...

  7. LNMP安装与配置之Python3

    环境 我们是在CentOS7下安装python3,但CentOS已经默认安装了Python2,而 Yum 等工具依赖原来的Python2.所以我们需要稍作配置让Python2与Python3可以共存. ...

  8. Appium安装（环境配置）

    Appium官方网站:http://appium.io/ 首页底部给出安装步骤, 一.Appium官网提示首先安装node.js,上https://nodejs.org/找找看,下载完后仅用你0.01 ...

  9. Oracle中常见表与各类结构的查询

    ----------------------------------------------------------------------用户--查询:当前用户的缺省表空间select userna ...

  10. CSS引入外部字体方法，附可用demo

    有时候我们做的页面需要用到一些更好看的字体又不想用图片代替,图片会影响加载速度则使用外部字体来显示但是直接通过font-family又不一定全部都行这就需要我们在css中进行定义并且引入字体文件路径然 ...