JavaScript常用工具函数

1、加载js || css || style

const loadRes = function (name, type, fn) {
    let ref
    if (type === "js") {    // 外部js
        ref = document.createElement("script")
        ref.setAttribute("type", "text/javascript")
        ref.setAttribute("src", name)
    } else if (type === "css") {    // 外部css
        ref = document.createElement("link")
        ref.setAttribute("rel", "stylesheet")
        ref.setAttribute("type", "text/css")
        ref.setAttribute("href", name)
    } else if (type === "style") {  // style
        ref = document.createElement("style")
        ref.innerHTML = name
    }
    if (typeof ref !== "undefined") {
        document.getElementsByTagName("head")[0].appendChild(ref)
        ref.onload = function () {  // 加载完成执行
            typeof fn === "function" && fn()
        }
    }
}

2、获取url参数

const getUrlParam = function (name) {   // 获取url参数
    let reg = new RegExp('(^|&?)' + name + '=([^&]*)(&|$)', 'i')
    let r = window.location.href.substr(1).match(reg)
    if (r != null) {
        return decodeURI(r[2])
    }
    return undefind
}

3、本地储存

const store = {     // 本地储存
    set: function (name, value, key) {  // 设置
        let d = new Date()
        let time = 0
        day = (typeof(day) === "undefined" || !day) ? 1 : day   // 时间,默认存储一天
        time = d.setHours(d.getHours() + (24 * day))    // 毫秒
        localStorage.setItem(name, JSON.stringify({
            data: value,
            time: time
        }))
    },
    get: function (name) {  // 获取
        let data = localStorage.getItem(name)
        if (!data) {
            return null
        }
        let obj = JSON.parse(data)
        if (new Date().getTime() > obj.time) {  // 过期
            localStorage.removeItem(name)
            return null
        } else {
            return obj.data
        }
    },
    clear: function (name) {    // 清空
        if (name) {     // 删除key为name的缓存
            localStorage.removeItem(name)
        } else {
            localStorage.clear()
        }
    }
}

4、JS获取元素样式(支持内联)

const getRealStyle = function (obj, styleName) {
    let realStyle = null
    if (obj.currentStyle) {
        realStyle = obj.currentStyle[styleName]
    } else if (window.getComputedStyle) {
        realStyle = window.getComputedStyle(obj, null)[styleName]
    }
    return realStyle
}

5、时间格式化

const formatDate = function (fmt, date) {   // 格式化成 yyyy-MM-dd hh:mm:ss
    if (typeof date !== "object") {
        date = !date ? new Date() : new Date(date)
    }
    let o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds(),
        "q+": Math.floor((date.getMonth() + 3) / 3),    // 季度
        "S": date.getMilliseconds() // 毫秒
    }
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    for (let k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' +
            o[k]).substr(('' + o[k]).length)))
        }
    }
    return fmt
}

6、设备判断:android、ios、web

const isDevice = function () {
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        return "iOS"
    } else if (/(Android)/i.test(navigator.userAgent)) {
        return "Android"
    }
    return "Web"
}

7、判断是否为微信

const isWx = function () {
    let ua = window.navigator.userAgent.toLowerCase()
    if (ua.match(/MicroMessenger/i) === 'micromessenger') {
        return true
    }
    return false
}

8、文本复制

const copyTxt = function (text, fn) {
    if (typeof document.execCommand !== "function") {
        console.log("复制失败,请长按复制")
        return
    }
    let dom = document.createElement("textarea")
    dom.value = text
    dom.setAttribute("style", "display: block;width: 1px;height: 1px;")
    document.body.appendChild(dom)
    dom.select()
    let result = document.execCommand("copy")
    document.body.removeChild(dom)
    if (result) {
        console.log("复制成功")
        typeof fn === "function" && fn()
        return
    }
    if (typeof document.createRange !== "function") {
        console.log("复制失败,请长按复制")
        return
    }
    let range = document.createRange()
    let div = document.createElement("div")
    div.innerHTML = text
    div.setAttribute("style", "height: 1px;fontSize: 1px;overflow: hidden;")
    document.body.appendChild(div)
    range.selectNode(div)
    let selection = window.getSelection()
    console.log(selection)
    if (selection.rangeCount > 0) {
        selection.removeAllRanges()
    }
    selection.addRange(range)
    document.execCommand("copy")
    typeof fn === "function" && fn()
    console.log("复制成功")
}

9、判断是否是一个数组

const isArray = function (arr) {
    return Object.prototype.toString.call(arr) === "[object Array]"
}

10、判断两个数组是否相等

const arrayEqual = function (arr1, arr2) {
    if (arr1 === arr2) return true
    if (arr1.length != arr2.length) return false
    for (let i = 0; i < arr1.length; i++) {
        if (arr1[i] !== arr2[i]) return false 
    }
    return true
}

11、时间与时间戳的转换

const stamp = {
    // 时间转时间戳
    getTime(time) {
        let date = time ? new Date(time) : new Date()
        return Math.round(date.getTime() / 1000)
    },
    // 时间戳转时间
    timeToStr(time, fmt) {
        return new Date(time * 1000).pattern(fmt || 'yyyy-MM-dd')
    }
}

12、判断图片加载完成

const imgLoadAll = function (arr, callback) {
    let arrImg = []
    for (let i = 0; i < arr.length; i++) {
        let img = new Image()
        img.src = arr[i]
        img.onload = function () {
            arrImg.push(this)
            if (arrImg.length == arr.length) {
                callback && callback()
            }
        }
    }
}

13、音频加载完成操作

const loadAudio = function (src, callback) {
    let audio = new Audio(src)
    audio.onloadedmetadata = callback
    audio.src = src
}

14、光标所在位置插入字符

const insertAtCursor = function (dom, val) {
    if (document.selection) {
        dom.focus()
        let sel = document.selection.createRange()
        sel.text = val
        sel.select()
    } else if (dom.selectionStart || dom.selectionStart == '0') {
        let startPos = dom.selectionStart
        let endPos = dom.selectionEnd
        let restoreTop = dom.scrollTop
        dom.value = dom.value.substring(0, startPos) + val + dom.value.substring(endPos, dom.value.length)
        if (restoreTop > 0) {
            dom.scrollTop = restoreTop
        }
        dom.focus()
        dom.selectionStart = startPos + val.length
        dom.selectionEnd = startPos + val.length
    } else {
        dom.value += val
        dom.focus()
    }
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,294评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,780评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,001评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,593评论 1 289
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,687评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,679评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,667评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,426评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,872评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,180评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,346评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,019评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,658评论 3 323
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,268评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,495评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,275评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,207评论 2 352

推荐阅读更多精彩内容