社区脚本中心 → 浏览:帖子主题
* 帖子主题:前端开发必备:7个高效JavaScript工具函数及实现原理
pojin (ID: 1)
头衔:论坛坛主
等级:究级天王[荣誉]
积分:2826
发帖:230
来自:保密
注册:2023-12-09 09:36:49
造访:2026-05-05 13:56:22
[ 第 1 楼 ] 420 回复
一:将内容复制到剪贴板原理是模拟鼠标点击【input】,执行复制【input】中的内容,这种方式,兼容性极差。在开发APP嵌套网页时就发现APP端可能会禁用此类行为,导致复制失败。个人测试过发现IOS端基本不行,完整代码如下:input框也可以用textarea来代替
//参数为文本内容function copy_content(text){    //创建一个输入框    var transfer = document.createElement('input');    // 防止页面出现闪动的现象将输入框高度设置为0    transfer.style.height = 0;    //将输入框插入到页面的一个div元素中    document.body.appendChild(transfer)    //给输入框复制    transfer.value = text;    //让输入框获得焦点    transfer.focus();    transfer.contentEditable = true;    //设置输入框为只读状态    transfer.readOnly = false;    //模拟点击复制    if(transfer.setSelectionRange) {        transfer.setSelectionRange(0,transfer.value.length);        var range = document.createRange();        range.selectNodeContents(transfer);    }else{        transfer.select();    }    document.execCommand('copy',false,null);    //让输入框失去焦点    transfer.blur();    //删除输入框元素    transfer.remove()    console.log('复制成功')}
2025-04-23 13:20:40 IP:已设置保密
pojin (ID: 1)
头衔:论坛坛主
等级:究级天王[荣誉]
积分:2826
发帖:230
来自:保密
注册:2023-12-09 09:36:49
造访:2026-05-05 13:56:22
[ 第 2 楼 ] 421 回复
二:解析URL获取参数
function getQueryByName(url,name) {
//解析url获取参数部分内容
let urlObj = new URL(url)
//解析参数部分内容    let query = new URLSearchParams(url.search)    //获取某个参数的内容并decode解码    return decodeURIComponent(query.get(name));}
2025-04-23 13:22:48 IP:已设置保密
pojin (ID: 1)
头衔:论坛坛主
等级:究级天王[荣誉]
积分:2826
发帖:230
来自:保密
注册:2023-12-09 09:36:49
造访:2026-05-05 13:56:22
[ 第 3 楼 ] 422 回复
三:平滑滚动至页面顶部
function scrollToTop() {    const c = document.documentElement.scrollTop || document.body.scrollTop
    if (c > 0) {        window.requestAnimationFrame(scrollToTop)        window.scrollTo(0, c - c / 8)    }}
2025-04-23 13:23:18 IP:已设置保密
pojin (ID: 1)
头衔:论坛坛主
等级:究级天王[荣誉]
积分:2826
发帖:230
来自:保密
注册:2023-12-09 09:36:49
造访:2026-05-05 13:56:22
[ 第 4 楼 ] 423 回复
四:获取当前页面滚动距离
function getScrollPosition(el = window) {    return {        x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,        y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop,    }}
2025-04-23 13:24:57 IP:已设置保密
pojin (ID: 1)
头衔:论坛坛主
等级:究级天王[荣誉]
积分:2826
发帖:230
来自:保密
注册:2023-12-09 09:36:49
造访:2026-05-05 13:56:22
[ 第 5 楼 ] 424 回复
五:判断当前设备是Andoird还是iOS在这里我们使用userAgent来判断当前设备是安卓还是IOS

function getOSType() {    let u = navigator.userAgent;    let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;    let isIOS = !!u.match(/\(i[^]+( U)? CPU.+Mac OS X/);
    if (isIOS) {        return 0    }    if (isAndroid) {        return 1    }    return 2}
2025-04-23 13:25:12 IP:已设置保密
pojin (ID: 1)
头衔:论坛坛主
等级:究级天王[荣誉]
积分:2826
发帖:230
来自:保密
注册:2023-12-09 09:36:49
造访:2026-05-05 13:56:22
[ 第 6 楼 ] 425 回复
六:格式化货币格式化货币是将一个金额转换成具有逗号表现的格式。例如:123456789 转换后:123,456,789

function formatMoney(money){    return money.toLocaleString()
}
2025-04-23 13:25:26 IP:已设置保密
pojin (ID: 1)
头衔:论坛坛主
等级:究级天王[荣誉]
积分:2826
发帖:230
来自:保密
注册:2023-12-09 09:36:49
造访:2026-05-05 13:56:22
[ 第 7 楼 ] 426 回复
七:进入和退出全屏
7.1 进入全屏
function fullScreen() {    let el = document.documentElement    let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen    //typeof rfs != "undefined" && rfs    if (rfs) {        rfs.call(el)    } else if (typeof window.ActiveXObject !== "undefined") {        let wscript = new ActiveXObject("WScript.Shell")        if (wscript != null) {        wscript.SendKeys("{F11}")        }    }}

7.2 推出全屏function exitScreen() {    let el = document    let cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen    //typeof cfs != "undefined" && cfs    if (cfs) {        cfs.call(el)    } else if (typeof window.ActiveXObject !== "undefined") {        let wscript = new ActiveXObject("WScript.Shell")        if (wscript != null) {        wscript.SendKeys("{F11}")        }    }}
2025-04-23 13:25:49 IP:已设置保密
分页: 1, 共 1 页
快速回复主题
账号/密码
用户: 没有注册? 密码:
评论内容