utils.js

Posted 2022-02-07 tongzhou

目录

1. 判断手机类型IOS Android
2. 格式化金钱
3. 金钱字符串变回数字
4. 用aa替换中文 并返回
5. 去除文件后缀，得到文件名称（不带后缀）
6. 获取浏览器类型（名称）
7. post方式下载文件流
8. 动态设置img的大小
9. 获取页面参数
10. 判断是否为微信
11. css方式控制元素无法点击
12. 简单封装localStorage setItem getItem

1.判断手机类型ios android

因为判断是否为Android个别手机会有问题，所以判断是否为IOS，其余的为Android

//判断是不是IOS
function isIOS() 
    let u = navigator.userAgent
    let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //IOS终端
    return isIOS

2.格式化金钱

数字转成带逗号的金钱字符串

//格式化金钱
function toMoney(val)  //val 数字number
    var str = (val / 100 * 100).toFixed(2) + ''
    var intSum = str.substring(0, str.indexOf(".")).replace(/\B(?=(?:\d3)+$)/g, ',') //取到整数部分
    var dot = str.substring(str.length, str.indexOf(".")) //取到小数部分搜索
    var ret = intSum + dot
    return ret

3.金钱字符串变回数字

带逗号的金钱字符串转成数字number

//金钱变回数字number
function moneyStrToNum(str)  //str 金钱字符串
    if (str) 
      let strTemp = str.replace(",", "")
      return Number(strTemp)
     else 
      return str
    

4.用aa替换中文 并返回

因为中文算2个字符，计算字符长度之前，先用aa替换汉字，再计算value长度

function wordLengthTrans(value) 
    return value ? value.replace(/[\u4e00-\u9fa5|，|。]/g, 'aa') : ""

5.网站与域名（不带后缀）

传入完整文件名

function getFileNameStr(name)  //name 完整文件名
    let dotIndex = name.lastIndexOf(".")
    let nameStr = name.slice(0, dotIndex)
    return nameStr

6.获取浏览器类型（名称）

这里面的判断顺序不能变

function getBrowserType() 
    let str = window.navigator.userAgent
    let name
    if (str.indexOf("Opera") > -1 || str.indexOf("OPR") > -1) 
      name = "Opera"
      return name
    
    if (str.indexOf("Edge") > -1) 
      name = "Edge"
      return name
    
    if (str.indexOf("Firefox") > -1) 
      name = "Firefox"
      return name
    
    if (str.indexOf("Chrome") > -1 && str.indexOf("Safari") > -1) 
      name = "Chrome"
      return name
    
    if (str.indexOf("Chrome") === -1 && str.indexOf("Safari") > -1) 
      name = "Safari"
      return name
    
    if ((str.indexOf("Opera") === -1 && str.indexOf("MSIE") > -1) || str.indexOf("Trident") > -1) 
      name = "IE"
      return name
    

7.post方式下载文件流

如果接口的type为post，并且返回的是文件流，想要实现下载

//ajax post 获取流，下载file文件
function downloadFilePostStream(apiStr, option)  //option为 传给后台的参数
    let body = document.body || document.getElementsByTagName("body")[0]
    let form = document.createElement("form")
    form.className = "myDownloadForm"
    form.setAttribute("action", `$globalHost$apiStr`) //配置
    form.setAttribute("method", "post")
    form.setAttribute("name", "downloadForm")
    form.setAttribute("target", "_blank")
    for (let key in option) 
      if (option[key])  //form表单的形式传undefined 会有问题，干脆直接不传了
        let input = document.createElement("input")
        input.setAttribute("name", key)
        input.value = option[key]
        form.appendChild(input)
      
    
    body.appendChild(form)
    form.submit()
    setTimeout(() => 
      body.removeChild(form)
    , 50)

8.动态设置img的大小

根据img的容器（imgBox）的宽高比，来确定img的width:‘100%‘(auto)等属性

注：不能给img设置初始固定宽高

//根据img大小和容器的宽高比，设置img的css
function setImgCssByBox(img, num)  //img元素element, num imgBox宽高比 width/height
    let imgW = img.width
    let imgH = img.height
    if ((imgW / imgH) > num)  //width更大
      img.style.width = "100%"
      img.style.height = "auto"
     else 
      img.style.width = "auto"
      img.style.height = "100%"
    

9.获取页面参数

获取url中的参数

//获取页面参数
function getPageParam() 
    let url = window.location.href
    let urlStr = url.split("?")[1] //？后面的部分
    let option = 
    if (urlStr) 
      let keyValArr = urlStr.split("&")
      keyValArr.forEach(function (str, index) 
        let arr = str.split("=")
        let key = arr[0]
        let val = arr[1]
        option[key] = val
      )
    
    return option

10.判断是否为微信

//判断是否微信
function isWeixin() 
    var ua = window.navigator.userAgent.toLowerCase()
    return ua.match(/MicroMessenger/i) == 'micromessenger'

11.css方式控制元素无法点击

选择器和设置css用了jQuery

//让按钮失效 
function disableEle($ele) 
    $ele.css("pointer-events", "none")  

//让按钮有效 
function ableEle($ele) 
    $ele.css("pointer-events", "auto")

12.简单封装localStorage setItem getItem

localDB对象
浏览器存储localStorage，key用md5加密，value用base64加密

依赖npm包：md5，js-base64

import md5 from "md5"
import  Base64  from 'js-base64'

export const localDB = 
  //key md5加密  value base64加密
  setItem: (keyStr, item) => 
    let localStorage = window.localStorage
    //key
    let keyMd5 = md5(keyStr)
    //value
    let itemJsonStr = JSON.stringify(item)
    let itemBase64 = Base64.encode(itemJsonStr)
    localStorage.setItem(keyMd5, itemBase64)
  ,
  getItem: (keyStr) => 
    let localStorage = window.localStorage
    let keyMd5 = md5(keyStr)
    if (!localStorage.getItem(keyMd5)) 
      return null
    
    let itemBase64 = localStorage.getItem(keyMd5)
    let itemJsonStr = Base64.decode(itemBase64)
    let item = JSON.parse(itemJsonStr)
    return item
  ,
  deleteItem: (keyStr) => 
    let localStorage = window.localStorage
    let keyMd5 = md5(keyStr)
    localStorage.removeItem(keyMd5)