个人总结的一些js工具代码
/* eslint-disable */
// 如果是在vue项目中引入的话，上面的注释用来避免vue中的eslint语法检查
// 使用方法，在html中通过script标签引入, <script src="./js/myTool.js"></script>，不管是vue项目还是普通项目，可全局使用
// 在vue的main.js文件中通过import './assets/js/myTool' 的方式引入，全局使用
// 在vue组件中使用的话，import '../../assets/js/myTool'，只能在当前组件中使用
(function(){
// ******判断一个变量是否是dom元素******
// 首先要对HTMLElement进行类型检查，因为即使在支持HTMLElement
// 的浏览器中，类型却是有差别的，在Chrome,Opera中HTMLElement的
// 类型为function，此时就不能用它来判断了
const isDOM = ( typeof HTMLElement === 'object' ) ?
function(obj){
return obj instanceof HTMLElement;
} :
function(obj){
return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
}
// ******获取整数随机数******
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive
}
// ******时间格式化函数******
function dateFmt(fmt, dateVal) {
if (typeof(fmt) != 'string') return '格式化参数有误！';
// 如果刚开始传入的时间参数是一个小于30*24*3600*1000毫秒数的数字，那么应该是求一个时间差值（否则就是求日期格式化），求时间差需要对东八区的小时数进行额外处理,因为new Date(毫秒数)是带着时区值的，并且北京时间要比格林威治时间快8个小时,所以格式化后小时上会多出8小时，应减去。
// 当然生成的该对象不仅可能是时间，也可能是格林尼治一月份日期（参数中加上年月日就可以了）。
if((typeof(dateVal) === 'number') && dateVal < 30 * 24 * 3600 * 1000 && !fmt.includes('M')) {//该条件用于判定是否是求时间差
dateVal = new Date(dateVal - 8 * 3600 * 1000);
}
return fmtDate(fmt, dateVal);
// 用于格式化日期（或时间差）的方法
function fmtDate(fmt, dateVal) {
// 校验参数并对象化日期参数(转成日期对象)
let date;
if(dateVal || dateVal === 0) {
date = new Date(dateVal);
}else {
date = new Date();
}
if (date.toString() == 'Invalid Date') return '时间参数有误';
// 单独处理年数
let year = date.getFullYear() + '';
let reg = /y+/g;
let mYear = fmt.match(reg);
if(mYear) {
let mYearStr = mYear[0];
year = year.substr(4 - mYearStr.length);
fmt = fmt.replace(mYearStr, year);
}
// 获取其余时间值
let dates = {
'M' : date.getMonth() + 1,
'd' : date.getDate(),
'h' : date.getHours(),
'm' : date.getMinutes(),
's' : date.getSeconds()
}
// 处理替换剩余时间值，并返回结果
let regs = /[Mdhms]+/g;
let rst = fmt.replace(regs, function (mth) {
let item = mth[0];
let value = dates[item];
if(!value && value != 0) return "";
if(mth.length == 1) {
return dates[mth];
}else {
return ('00' + value).substr(String(value).length);
}
})
let result = {
year: year,
month: dates.M,
day: dates.d,
hour: dates.h,
minute: dates.m,
second: dates.s
}
result.fmtTimeStr = rst;
return result;
}
}
// ******函数防抖******
/**
解释：函数防抖是优化高频率执行js代码的一种手段，可以让被调用的函数在一
次连续的高频率操作过程中只被调用执行一次，降低其执行频率。
作用：减少代码执行次数，提升网页性能
应用场景：oninput、onmousemove、onscroll、onresize等高频事件
（这类事件虽然高频，但是还有一个特点，就是人为触发的，就是可能快可能慢；
但是像视频或音乐的播放，这种持续高频但是又不受人为控制的，这种事件不适合用函数防抖，
而要用函数节流。因为函数防抖是如果不停的触发，定时器会不停的被清除创建，
定时器里面的函数（除最后一次定时器创建的会被执行外）有可能永远都不会执行；
而函数节流则是加了双重开关，定时器中函数至少执行过才会被清除然后再次设定，所以里面的函数一定会执行，
所以总体会被执行n次。所以说函数节流应用范围更广）
*/
function debounce(fn,delay) {
let timeId = null;
return function (params) {
let args = arguments;
let self = this;
timeId && clearTimeout(timeId);
timeId = setTimeout(function(){
fn.apply(self, args);
},delay || 1000);
}
}
// ******函数节流******
function throttle(fn,delay) {
let timeId = null;
let flag = true;
return function () {
if(!flag) return;
flag = false;
timeId && clearTimeout(timeId);
let args = arguments;
let self = this;
timeId = setTimeout(function(){
flag = true;
fn.apply(self, args);
},delay || 1000);
}
}
// ******匀速动画******
function linearAnimation(ele, attrs) {
for(let attr in attrs){
if(!ele.anmTimer) {ele.anmTimer = {}}
ele.anmTimer[attr] && clearInterval(ele.anmTimer[attr]);
let styles = ele.currentStyle || getComputedStyle(ele);
let begin = parseFloat(styles[attr]);
let suffix = styles[attr].replace(/[^A-z]/ig, '');
let target = parseFloat(attrs[attr]);
let step = +((target - begin) * 0.05).toFixed(3);
ele.anmTimer[attr] = setInterval(function(){
begin += step;
if(Math.abs((target - begin).toFixed(2)) <= Math.abs(step)) {
clearInterval(ele.anmTimer[attr]);
begin = target;
}
ele.style[attr] = begin + suffix;
},100);
}
}
// ******缓动动画******
function easeAnimation(ele,attrs) {
for(let attr in attrs){
if(!ele.anmTimer) {ele.anmTimer = {}}
ele.anmTimer[attr] && clearInterval(ele.anmTimer[attr]);
let styles = ele.currentStyle || getComputedStyle(ele);
let begin = parseFloat(styles[attr]);
let suffix = ("" + styles[attr]).replace(/[^A-z]/gi, '');
let target = parseFloat(attrs[attr]);
let minSpace = Math.abs(((target - begin) * 0.02).toFixed(3));
ele.anmTimer[attr] = setInterval(function () {
step = +((target - begin) * 0.3).toFixed(3);
if((Math.abs(+(target - begin).toFixed(2)) <= minSpace)){
ele.style[attr] = target + suffix;
clearInterval(ele.anmTimer[attr]);
return
}
begin += step;
ele.style[attr] = begin + step + suffix;
},100);
}
}
// ******格式化播放次数******
function fmtPlayCount(playCount){// 格式化推荐歌单后台数据中的播放次数数据
if((playCount + "").length > 8) {
return (playCount/100000000).toFixed(1) + '亿';
}else if((playCount + "").length > 4) {
return (playCount / 10000).toFixed(1) + '万';
}else {
return playCount;
}
}
// ******创建进度条******
class Progress {
constructor(bar) {
this.oBar = isDOM(bar) ? bar : document.querySelector(bar);
const oBarstyles = this.oBar.currentStyle || getComputedStyle(this.oBar)
if (oBarstyles.backgroundColor === 'rgba(0, 0, 0, 0)') {
this.oBar.style.backgroundColor = '#aaa';
}
// this.oBar.style.cssText = `background: #aaa;`;
this.oLine = document.createElement('div');
this.oDot = document.createElement('div');
this.oLine.appendChild(this.oDot);
this.oBar.innerHTML = '';
this.oBar.appendChild(this.oLine);
this.linePercent = 0 // 当前进度条百分比
this.callBefores = [] // 事件之前要执行的方法数组
this.callBacks = [] // 事件之后要执行的方法
setTimeout(() => {
// 延迟获取宽度，防止没有渲染完获取的不准确。
this.barHeight = parseInt(getComputedStyle(this.oBar).height);
this.barWidth = parseInt(getComputedStyle(this.oBar).width);
// 初始化前景样式
// this.oLine.style.cssText = `width: 0; height: 100%; background: #eee; position: relative;`;
this.oLine.style.width = '0';
this.oLine.style.height = '100%';
this.oLine.style.backgroundColor = '#eee';
this.oLine.style.position = 'relative';
// 初始化小圆点样式
// this.oDot.style.cssText = `width: ${this.barHeight * 2}px; height: ${this.barHeight * 2}px; background: #eee; position: absolute; right: ${-this.barHeight / 2}px; top: ${- this.barHeight / 2}px; border-radius: 50%;`;
this.oDot.style.width = `${this.barHeight * 2}px`;
this.oDot.style.height = `${this.barHeight * 2}px`;
this.oDot.style.backgroundColor = '#eee';
this.oDot.style.position = 'absolute';
this.oDot.style.right = `${-this.barHeight / 2}px`;
this.oDot.style.top = `${- this.barHeight / 2}px`;
this.oDot.style.borderRadius = '50%';
}, 200);
}
// 因为元素在display: none状态下是无法一定能通过getComputedStyle获取到数据的，有可能会返回auto,所以其他方法如果用到宽度的话，
// 需要先判断一下，没有值得话，需要等待获取。
getSureData(cb,params) {
let that = this;
// if(that.barWidth >= 0) return;
return new Promise(function(resolve, reject){
if(that.barWidth >= 0) {
resolve(that.barWidth);
}else {
let timer = setInterval(function(){
that.barWidth = parseInt(getComputedStyle(that.oBar).width);
if(that.barWidth >= 0) {
clearInterval(timer);
// cb.call(that,params);
resolve(that.barWidth)
}
}, 200);
}
});
}
// 设置进度条的颜色及圆角样式(背景色、渐变背景色、前景色、渐变前景色、圆点色、径向渐变圆点色、进度条是否圆角)
barCss ({barCor, barGradCor, lineCor, lineGradCor, dotCor, dotRadiCor, cirRadius}) {
// 因为宽高是延迟获取的，并且同时重置了样式，所以样式设置必须在获取宽高以后设置，否则会被再次重置
this.getSureData().then((barWidth) => {
barCor && (this.oBar.style.background = barCor);
barGradCor && (this.oLine.style.background = `linear-gradient(${barGradCor})`);
lineCor && (this.oLine.style.background = lineCor);
lineGradCor && (this.oLine.style.background = `linear-gradient(${lineGradCor})`);
dotCor && (this.oDot.style.background = dotCor);
dotRadiCor && (this.oDot.style.background = `radial-gradient(${dotRadiCor})`);
if(cirRadius) {
this.oBar.style.borderRadius = this.barHeight / 2 + 'px';
this.oLine.style.borderRadius = this.barHeight / 2 + 'px';
}else {
this.oBar.style.borderRadius = 0;
this.oLine.style.borderRadius = 0;
}
})
}
// 注：要想拖动小圆点必须要执行该初始化事件方法
initEvents ({callBefore, callBack} = {}) {
// let isPcClient = isPc();
// console.log(isPcClient);
// let downEventName = isPcClient ? 'mousedown' : 'touchstart';
// let moveEventName = isPcClient ? 'mousemove' : 'touchmove';
// let upEventName = isPcClient ? 'mousedown' : 'touchend';
// if(!(this.barWidth >= 0)) {
// this.getSureData(this.initEvents,{callBefore, callBack});
// return;
// } ;
let that = this;
this.getSureData().then(function(){
if(isPc()) {
that.oDot.onmousedown = function(event){
event = event || window.event;
// 回调函数里面两个参数：一个是当前进度条比例，一个是当前进度条宽度
// callBefore && callBefore(that.linePercent, that.oLine.style.width);
callBefore && that.callBefores.push(callBefore)
if(that.callBefores.length) {
that.callBefores.forEach((fn) => {
fn.call(that, that.linePercent, that.oLine.style.width)
})
}
let oldX = event.pageX;
let oldLineWidth = parseInt(getComputedStyle(that.oLine).width);
document.onmousemove = function(event){
let curLineWidth = oldLineWidth + (event.pageX - oldX);
if (curLineWidth < 0) {
curLineWidth = 0
}else if(curLineWidth > that.barWidth) {
curLineWidth = that.barWidth;
}
that.oLine.style.width = curLineWidth + 'px';
that.linePercent = parseInt(getComputedStyle(that.oLine).width) / that.barWidth
}
document.onmouseup = function(event){
// 回调函数里面两个参数：一个是当前进度条比例，一个是当前进度条宽度
// callBack && callBack(that.linePercent, that.oLine.style.width);
callBack && that.callBacks.push(callBack)
if(that.callBacks.length) {
that.callBacks.forEach((fn) => {
fn.call(that, that.linePercent, that.oLine.style.width)
})
}
document.onmousemove = null;
document.onmouseup = null;
}
if(event.stopPropagation) {
event.stopPropagation();
}else {
event.cancelBubble = true;
}
}
}else {
that.oDot.ontouchstart = function(event){
// 回调函数里面两个参数：一个是当前进度条比例，一个是当前进度条宽度
// callBefore && callBefore(that.linePercent, that.oLine.style.width);
callBefore && this.callBefores.push(callBefore)
if(that.callBefores.length) {
that.callBefores.forEach((fn) => {
fn.call(that, that.linePercent, that.oLine.style.width)
})
}
let oldX = event.targetTouches[0].pageX;// 注意这里采用pageX不要用sreenX；否则有些问题；
let oldLineWidth = parseFloat(getComputedStyle(that.oLine).width);
document.ontouchmove = function(event){
let curLineWidth = (event.targetTouches[0].pageX - oldX) + oldLineWidth;// 注意这里采用pageX不要用sreenX；否则有些问题；
if (curLineWidth < 0) {
curLineWidth = 0
}else if(curLineWidth > that.barWidth) {
console.log(that.barWidth, '宽度');
curLineWidth = that.barWidth;
}
that.oLine.style.width = curLineWidth + 'px';
that.linePercent = parseInt(getComputedStyle(that.oLine).width) / that.barWidth
}
document.ontouchend = function(event){
// 回调函数里面两个参数：一个是当前进度条比例，一个是当前进度条宽度
// callBack && callBack(that.linePercent, that.oLine.style.width);
callBack && that.callBacks.push(callBack)
if(that.callBacks.length) {
that.callBacks.forEach((fn) => {
fn.call(that, that.linePercent, that.oLine.style.width)
})
}
document.ontouchmove = null;
document.ontouchend = null;
}
}
}
that.oBar.addEventListener('click', function(event){
// 回调函数里面两个参数：一个是当前进度条比例，一个是当前进度条宽度
// callBefore && callBefore(that.linePercent, that.oLine.style.width);
callBefore && that.callBefores.push(callBefore)
if(that.callBefores.length) {
that.callBefores.forEach((fn) => {
fn.call(that, that.linePercent, that.oLine.style.width)
})
}
event = event || window.event;
if(event.target !== that.oDot) {// 防止点击“点”的时候也执行
that.oLine.style.width = event.offsetX + 'px';
that.linePercent = parseInt(getComputedStyle(that.oLine).width) / that.barWidth
// 回调函数里面两个参数：一个是当前进度条比例，一个是当前进度条宽度
// callBack && callBack(that.linePercent, that.oLine.style.width);
callBack && that.callBacks.push(callBack)
if(that.callBacks.length) {
that.callBacks.forEach((fn) => {
fn.call(that, that.linePercent, that.oLine.style.width)
})
}
}
if(event.stopPropagation) {
return event.stopPropagation();
}else {
event.cancelBubble = true;
}
})
})
}
// 额外添加事件
addEvents ({callBefore, callBack}) {
typeof(callBefore) === 'function' && this.callBefores.push(callBefore);
typeof(callBack) === 'function' && this.callBacks.push(callBack);
}
// 更新进度条进度的方法（参数宽度既可以是百分比也可以是决定宽度值）
updateProgress (width, callBefore, callBack) {
// if(!(this.barWidth >= 0)) {
// this.getSureData(this.updateProgress,width);
// return;
// } ;
let that = this;
this.getSureData().then(function(){
callBefore && callBefore(that.linePercent / that.barWidth, that.oLine.style.width);
width = parseFloat(width);
if (width <= 1) {
that.linePercent = width;
that.oLine.style.width = that.barWidth * width + 'px';
}else {
that.linePercent = width / that.barWidth;
that.oLine.style.width = width + 'px';
}
callBack && callBack(that.linePercent, that.oLine.style.width);
})
}
}
// ******判断是不是电脑端******
function isPc() {
return !/iPhone|Android|Mobile/.test(window.navigator.userAgent);
}
// ******创建高亮关键字方法******
function lightKeywords(keyword, html) {
let reg = new RegExp(`(${keyword})`, 'g');
return html.replace(reg, "<span class='keyword'>$1</span>");
}
// ******Storage的存取（数组形式）******
ZLLocalData = {
getSession: function(key) {
let str = sessionStorage.getItem(key);
if (!str) return
let arr = JSON.parse(str);
return arr;
},
setSession: function(key, value, flag) {
// flag为true表示完全添加和覆盖,否则就是差异添加
if (flag) {
localStorage.setItem(key, JSON.stringify(value))
return
}
value = JSON.stringify(value);
let storage = sessionStorage.getItem(key);
if(storage && storage.length > 2) {
let index = storage.indexOf(value);
if(index === 1) return;
if(index > -1) {
storage = storage.replace(',' + value, "");
}
storage = storage.replace('[','[' + value + ',');
}else {
storage = `[${value}]`;
}
sessionStorage.setItem(key, storage);
},
removeSession: function (key, value) {
// 如果flag为真表示完全删除，否则是差异删除
if (flag) {
localStorage.removeItem(key)
return
}
if(value) {
value = JSON.stringify(value);
let storage = sessionStorage.getItem(key);
let index = storage.indexOf(value);
if(index < 0) return;
storage = storage.replace(value, "");
storage = storage.replace(',,', ",");
storage = storage.replace(/^\[,/g, "[");
storage = storage.replace(/,\]$/g, "]");
if(storage !== '[]') {
sessionStorage.setItem(key, storage);
return;
}
}
sessionStorage.removeItem(key);
},
getStorage: function(key) {
let str = localStorage.getItem(key);
if (!str) return
let arr = JSON.parse(str);
return arr;
},
setStorage: function(key, value, flag) {
// flag为true表示完全添加和覆盖,否则就是差异添加
if (flag) {
localStorage.setItem(key, JSON.stringify(value))
return
}
value = JSON.stringify(value);
let storage = localStorage.getItem(key);
if(storage && storage.length > 2) {
let index = storage.indexOf(value);
if(index === 1) return;
if(index > -1) {
storage = storage.replace(',' + value, "");
}
storage = storage.replace('[','[' + value + ',');
}else {
storage = `[${value}]`;
}
localStorage.setItem(key, storage);
},
removeStorage: function (key, value, flag) {
// 如果flag为真表示完全删除，否则是差异删除
if (flag) {
localStorage.removeItem(key)
return
}
if(value) {
value = JSON.stringify(value);
let storage = localStorage.getItem(key);
let index = storage.indexOf(value);
if(index < 0) return;
storage = storage.replace(value, "");
storage = storage.replace(',,', ",");
storage = storage.replace(/^\[,/g, "[");
storage = storage.replace(/,\]$/g, "]");
if(storage !== '[]') {
localStorage.setItem(key, storage);
return;
}
}
localStorage.removeItem(key);
}
}
// ******音乐播放器******(需要jquery支持)
class ZLAudio {
constructor(musicLists) {// 歌曲对象数组，{id:99, song:"生如夏花", songer: '朴树', url: '', lyricStr(可选): '歌词字符串'}
this.oAudio = document.createElement('audio');
this.oAudio.innerText = '您的浏览器不支持播放';
// $('body').append(this.oAudio);
this.$Audio = $(this.oAudio);
this.isCanPlay = false;
this.playMode = 'loop';
this.lyricLiHeight = 0;
this.musicProgress = null;
this.currentTime = 0; // 这里写出来是为了照顾vue中，方便watch监听，因为如果要单独监听一个对象的一个属性，该对象初始的时候就要有该属性
this.fmtCurrentTime = 0;
this.callBacks = [] // 存储跟随播放要执行的所有回调函数
if(musicLists) {this.initMusicLists(musicLists)}
this._listenCanPlay();
}
// 监听歌曲是否可以播放（内部调用）
_listenCanPlay(canPlay) {
//监听歌曲加载
// this.oAudio.oncanplay = null;
let that = this;
// 不用oncanplay监听，因为苹果的safari浏览器不会自动加载歌曲资源
// this.oAudio.oncanplay = function(){
this.oAudio.ondurationchange = function(){
// 初始化音乐时长
that.fmtDuration = dateFmt('mm:ss', that.oAudio.duration * 1000).fmtTimeStr;
that.duration = that.oAudio.duration;
that.isCanPlay = true;
canPlay && canPlay(that.duration);
that.oAudio.play();//播放音乐
};
}
// 监听歌曲播放
listenPlay(cb) {
let that = this;
this.oAudio.ontimeupdate = function(){
that.currentTime = that.oAudio.currentTime;
that.fmtCurrentTime = dateFmt('mm:ss', that.oAudio.currentTime * 1000).fmtTimeStr;
if(that.musicProgress) {
that.musicProgress.updateProgress(that.oAudio.currentTime / that.oAudio.duration);
}
cb && that.addEvents(cb);
if (that.callBacks.length) {
that.callBacks.forEach(fn => {
fn.call(that, that.fmtCurrentTime, that.fmtDuration)
});
}
}
}
// 额外添加跟随播放要执行的回调函数
addEvents (callBack) {
typeof(callBack) === 'function' && this.callBacks.push(callBack);
}
// 加载（播放）歌曲
loadMusic(curSongId,url,cb) {
if(this.curMusicId && this.curMusicId === curSongId) return;
let curSongIndex = this.findSongIndex(curSongId);
let that = this;
url = this.musicLists[curSongIndex].url || url;
if (!url) return
if(typeof url === 'string') {
that.oAudio.src = url;
}else if(url.constructor.name === 'Array') {//{url: '', type: ''}
let musicHtml = '';
url.forEach(function(ele){
musicHtml += `<source src="${ele.url}" type="audio/${ele.type}">`;
});
that.oAudio.html(musicHtml);
that.oAudio.load();
}
that.curMusicId = curSongId;
cb && cb(curSongId);
}
// 监听歌曲是否播放完
listenPlayEnd(cb) {
this.oAudio.onended = cb;
}
// 初始化音乐列表
initMusicLists(musicLists) {
this.musicLists = musicLists;
this.curSongId = this.musicLists[0].id;
}
// 歌词处理
handleLyrics(curSongId,lyricStr,cb) {
if(this.curLyricId && this.curLyricId === curSongId) return;
let that = this;
let lyricsObj = _lyricHandle(lyricStr);
let lyricsHtml = "";
let i = 0;
for(let key in lyricsObj) {
let tiemStr = dateFmt('mm:ss', + key * 1000 ).fmtTimeStr;
lyricsHtml += `<li id="zl-${key}" time=${tiemStr} offset=${i}>${lyricsObj[key]}</li>`;
i++;
}
that.lyrics = lyricsObj;
that.lyricsHtml = lyricsHtml;
that.curLyricId = curSongId;
cb && cb(lyricObj);
return lyricsHtml;
//将歌词字符串转化为对象（内部调用）
function _lyricHandle(lyricStr){
let reg = /\[(.+)\](.+)/g;
let lyricObj = {};
lyricStr.replace(reg, function($,$1,$2){
let time = $1.substr(0,2) * 60 + Math.round(+$1.substr(3));
lyricObj[time] = $2.trim();
})
return lyricObj;
}
}
// 同步高亮当前歌词
lightActiveLyric (lyricWrapper, className, color) {
this.oLyricWrapper = isDOM(lyricWrapper) ? lyricWrapper : document.querySelector(lyricWrapper);
className = className || 'active';
if (color && typeof(color) === 'string') {
this.oLyricWrapper.style.color = color;
}
this.$Audio.on('timeupdate', () => {
console.log(this.currentTime)
console.log('#zl-' + Math.round(this.currentTime))
$('#zl-' + Math.round(this.currentTime)).addClass(className).siblings().removeClass(className)
})
}
// 初始化音量条
initVolumeProgress(selector,cb,muteBtn) {
this.volumeProgress = new Progress(selector);
this.oAudio.volume = 0.5;
this.volumeProgress.updateProgress(this.oAudio.volume);
let that = this;
muteBtn && $(muteBtn).click(function(){//设置静音按钮的点击事件
if(that.oAudio.volume === 0){
that.oAudio.volume = that.volume;
}else {
that.volume = that.oAudio.volume;
that.oAudio.volume = 0;
}
return false;
});
this.volumeProgress.initEvents({callBack: function(value){
that.oAudio.volume = value;
that.volume = value;
cb && cb(that.oAudio.volume);
}})
return that.volumeProgress;
}
// 初始化音乐进度条
initMusicProgress(selector,cb) {
this.musicProgress = new Progress(selector);
let that = this;
that.musicProgress.initEvents({callBack: function(widthPercent){
that.oAudio.currentTime = isNaN(that.oAudio.duration) ? 0 : that.oAudio.duration * widthPercent;
that.currentTime = that.oAudio.currentTime;
cb && cb(widthPercent);
}});
return that.musicProgress;
}
// 根据歌曲索引查找id
findSongId(index) {
return this.musicLists[index].id;
}
// 根据歌曲id查找索引
findSongIndex(songId) {
return this.musicLists.findIndex(function(ele){
return ele.id === songId;
})
}
}
window.isDOM = isDOM; // 判断是否是dom对象
window.dateFmt = dateFmt; // 格式化日期或者时长
window.debounce = debounce; // 函数防抖
window.throttle = throttle; // 函数节流
window.linearAnimation = linearAnimation; // 线性动画
window.easeAnimation = easeAnimation; // 缓动动画
window.fmtPlayCount = fmtPlayCount; // 格式化播放量
window.Progress = Progress; // 进度条对象
window.isPc = isPc; // 判断是否电脑端
window.lightKeywords = lightKeywords; // 高亮关键字
window.ZLLocalData = ZLLocalData; // 本地存储方法
window.ZLAudio = ZLAudio; // 音频播放器对象
window.getRandomInt = getRandomInt; // 获取随机整数
})();
网友评论