react前端工具方法

91 阅读1分钟

秒转换成时分秒

  • 秒转换成时分秒
  • @param val - 秒
  • 不够1分钟 显示N秒 大于一分钟小于60分钟 显示 N分N秒 大于60分钟 显示N小时N分N秒
  • @returns {string}
  const _val = +val || 0
  const d = Math.floor(_val % 3600)
  const h = _val >= 3600 ? Math.floor(_val / 3600) : ''
  const m = _val >= 60 ? Math.floor(d / 60) : ''
  const s = _val >= 0 ? Math.floor(_val % 60) : ''
  // const d = moment.duration(_val, "seconds");
  // const h = d.hours();
  // const m = d.minutes();
  // const s = d.seconds();
  return `${h ? h + '小时' : ''}${m ? m + '分' : ''}${s ? s + '秒' : ''}`
}

获取文件后缀名

  • 获取文件后缀名
  • @param filename
  • @returns {string}
  const pos = filename.lastIndexOf('.')
  let suffix = ''
  if (pos !== -1) {
    suffix = filename.substring(pos)
  }
  return suffix
}

export function pswMobile(str) {
  if (!str) return str
  if (typeof str != 'string') return str
  return str.replace(/^(\d{3})\d{4}(\d+)/, '$1****$2')
}

小数转百分比(处理浮点类型)

  • 小数转百分比(处理浮点类型)
  • @param num
  • @returns
  if (typeof num !== 'number') return num
  let result = (num * 100).toFixed(2)
  if (result.toString().split('.').length > 1) {
    result = parseFloat(
      result.toString().split('.')[0] + '.' + result.toString().split('.')[1].substr(0, 2)
    )
  }
  return result
}

随机数生成(用于处理oss图片缓存问题)

  • @param num
  • @returns
  let res = ''
  for (; res.length < n; res += Math.random().toString(36).substr(2).toUpperCase()) {}
  return '?v=' + res.substr(0, n)
}

浏览器复制功能

  • @param {string} text 要复制的文案
  • @param {function} success? 复制成功之后的回调
  const copyText = text
  if (copyText) {
    const copyInput = document.createElement('input')
    copyInput.setAttribute('value', copyText)
    document.body.appendChild(copyInput)
    copyInput.select()
    try {
      document.execCommand('copy')
      document.body.removeChild(copyInput)
      success && success()
    } catch (err) {
      console.log(err, '浏览器不兼容')
      document.body.removeChild(copyInput)
    }
  } else {
    console.log('请输入内容')
  }
}

const formatRichText = richText => {
  if (richText != null) {
    let newRichText = richText.replace(/<img[^>]*>/gi, match => {
      match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '')
      match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '')
      match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '')
      return match
    })
    newRichText = newRichText.replace(/style="[^"]+"/gi, match => {
      match = match
        .replace(/width:[^;]+;/gi, 'width:100%;')
        .replace(/width:[^;]+;/gi, 'width:100%;')
      return match
    })
    newRichText = newRichText.replace(/<br[^>]*\/>/gi, '')
    newRichText = newRichText.replace(
      /\<img/gi,
      '<img style="width:100%;height:auto;display:block;margin:10px 0;"'
    )
    newRichText = newRichText.replace(/[\r\n]/g, '')
    newRichText = newRichText.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/gi, '')

    return newRichText
  } else {
    return null
  }
}

export const replaceHtml = html => {
  if (html && html.indexOf('body') >= 0) {
    let rx = /<body[^>]*>([\s\S]+?)<\/body>/i
    let m = rx.exec(html)
    if (m) {
      m = m[1]
      return formatRichText(m)
    }
  } else {
    return formatRichText(html)
  }
}

js数字转中文

  • @param {*} num
  let changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
  let unit = ['', '十', '百', '千', '万']
  num = parseInt(num)
  let getWan = temp => {
    let strArr = temp.toString().split('').reverse()
    let newNum = ''
    for (var i = 0; i < strArr.length; i++) {
      newNum =
        (i == 0 && strArr[i] == 0
          ? ''
          : i > 0 && strArr[i] == 0 && strArr[i - 1] == 0
          ? ''
          : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i])) + newNum
    }
    return newNum
  }

  let overWan = Math.floor(num / 10000)
  let noWan = num % 10000
  if (noWan.toString().length < 4) {
    noWan = '0' + noWan
  }
  return overWan ? getWan(overWan) + '万' + getWan(noWan) : getWan(num)
}

秒数转时分秒

  • HH:mm:ss 1795
  let timeStr = ''
  let stringFormat = i => {
    return i < 10 ? `0${i}` : `${i}`
  }
  let minuteTime = 0
  let secondTime = 0
  let hourTime = 0
  if (time < 60) {
    timeStr = `00:00:${stringFormat(time)}`
  } else if (time >= 60 && time < 3600) {
    minuteTime = parseInt(time / 60)
    secondTime = parseInt(time % 60)
    if (hasSecond && hasSecond == 'false') {
      timeStr = `00:${stringFormat(minuteTime)}`
    } else {
      timeStr = `00:${stringFormat(minuteTime)}:${stringFormat(secondTime)}`
    }
  } else if (time >= 3600) {
    let _t = parseInt(time % 3600)
    hourTime = parseInt(time / 3600)
    minuteTime = parseInt(_t / 60)
    secondTime = parseInt(_t % 60)
    if (hasSecond && hasSecond == 'false') {
      timeStr = `${stringFormat(hourTime)}:${stringFormat(minuteTime)}`
    } else {
      timeStr = `${stringFormat(hourTime)}:${stringFormat(minuteTime)}:${stringFormat(secondTime)}`
    }
  }
  return timeStr
}

考生端——清除本地存储

  Cookies.set('examinee_user_info', '')
  // localStorage.setItem('exam_fe_pc_site_config', '')
}

防抖

  • @param {Function} fn
  • @param {Number} delay
  • @returns
  let time = null //time用来控制事件的触发
  return function () {
    if (time !== null) {
      clearTimeout(time)
    }
    time = setTimeout(() => {
      fn.call(this)
      //利用call(),让this的指针从指向window 转成指向input
    }, delay)
  }
}

访问用户媒体设备的兼容方法

  • @param {*} constraints
  • @param {*} success
  • @param {*} error
  if (navigator.mediaDevices?.getUserMedia) {
    //最新的标准API
    navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error)
  } else if (navigator.webkitGetUserMedia) {
    //webkit核心浏览器
    navigator.webkitGetUserMedia(constraints, success, error)
  } else if (navigator.mozGetUserMedia) {
    //firfox浏览器
    navigator.mozGetUserMedia(constraints, success, error)
  } else if (navigator.getUserMedia) {
    //旧版API
    navigator.getUserMedia(constraints, success, error)
  }
}