1,获取链接上的参数

getQueryString = (name, search) => {
search = search || window.location.search.substr(1) || window.location.hash.split("?")[1];
let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
let r = search.match(reg);
if (r != null) return unescape(r[2]); return null;
}

  

  2、将数据导出为excel

function exportExcel(fileName, htmlStr) {
if (!htmlStr) htmlStr = document.getElementsByClassName('tableWrapper')[0].outerHTML
// 使用 outerHTML 属性获取整个 table 元素的 HTML 代码(包括<table>标签),
// 然后包装成一个完整的HTML文档,设置 charset 为 urf-8 以防止中文乱码
var html = "<html><head><meta charset='utf-8' /></head><body>" + htmlStr + '</body></html>'
// 实例化一个Blob对象,其构造函数的第一个参数是包含文件内容的数组,第二个参数是包含文件类型属性的对象
var blob = new Blob([html], {
type: 'application/vnd.ms-excel'
})
var a = document.createElement('a')
a.style.display = 'none'
// 利用URL.createObjectURL()方法为 a 元素生成 blob URL
a.href = URL.createObjectURL(blob)
// 设置文件名
a.download = `${fileName}.xls`
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}

  3、计算字符串宽度

function computeWidth(){
let textBox:any = document.createElement('span');
textBox.cssText = 'font-size: 18px;'
textBox.innerText = '文字文字文字'
document.body.appendChild(textBox);
let width = textBox.offsetWidth;
document.body.removeChild(textBox)
return width+50+'px'
}

  4.深拷贝

// 1、递归方式实现
function deepCopy(source,target) {
for(var key in source){
if(source.hasOwnProperty(key)){//只拷贝当前对象的属性
if(source[key] && typeof source[key] == "object"){//如果属性是引用类型的对象
// //根据原属性的类型决定是数组还是普通对象
target[key] = Array.isArray(source[key]) ? [] : {};
deepCopy(source[key],target[key]);//递归调用,完成所有层次的拷贝
}else{
target[key] = source[key];
}
}
}
}
deepCopy(p1,p2); // 2、借用JSON对象的parse和stringify
newobj = JSON.parse(JSON.stringify(obj))

  

  5.文本复制

        copyText(content) {
            if (!content) {
                console.log('文本不存在')
                return false
            }
            //创建一个input框存放需要复制的文本内容
            let copyUrl = document.createElement('input')
            copyUrl.setAttribute('value', content)
            document.body.appendChild(copyUrl)
            // 判断是在win还是ios
            if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
                let range = document.createRange()
                range.selectNode(copyUrl)
                window.getSelection().addRange(range)
            } else {
                copyUrl.select()
            }
            const isSuccess = document.execCommand('Copy')
            copyUrl.remove()
            return isSuccess
        },

  

  6.判断鼠标坐标是否在元素里面

function mousePositionJudge(dom, e) {
let oElement = dom
let x1 = 0
let y1 = 0
for (x1 = 0, y1 = 0; oElement; oElement = oElement.offsetParent) {
x1 += oElement.offsetLeft
y1 += oElement.offsetTop
}
let x2 = x1 + dom.offsetWidth
let y2 = y1 + dom.offsetHeight
let x = e.pageX
let y = e.pageY
if (x > x1 && x < x2 && y > y1 && y < y2) {
return true
} else {
return false
}
}

javascript常用方法封装的更多相关文章

  1. 2016/11/17 周四 <javascript的封装简单示例>

    这是一个简单的javascript代码封装的示例以及封装后的调用方法: var ticker={ n:0, add:function() { this.n++; }, show:function() ...

  2. Javascript常用方法函数收集(二)

    Javascript常用方法函数收集(二) 31.判断是否Touch屏幕 function isTouchScreen(){ return (('ontouchstart' in window) || ...

  3. 第一百三十五节,JavaScript,封装库--拖拽

    JavaScript,封装库--拖拽 封装库新增1个拖拽方法 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:一般需要在css文件将元素里的某一个区块光标设置成提示可以拖拽, ...

  4. 第一百三十四节,JavaScript,封装库--遮罩锁屏

    JavaScript,封装库--遮罩锁屏 封装库新增1个方法 /** zhe_zhao_suo_ping()方法,将一个区块元素设置成遮罩锁屏区块 * 注意:一般需要在css文件将元素设置成隐藏 ** ...

  5. 第一百三十三节,JavaScript,封装库--弹出登录框

    JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...

  6. 第一百三十二节,JavaScript,封装库--下拉菜单

    JavaScript,封装库--下拉菜单 封装库,增加了3个方法 shu_biao_yi_ru_yi_chu()方法,给元素设置鼠标移入移出事件,接收两个参数,参数是移入和移出时的执行函数(包含代码) ...

  7. 第一百三十一节,JavaScript,封装库--CSS

    JavaScript,封装库--CSS 将封装库里的方法,改成了原型添加方法 增加4个方法 tian_jia_class()方法,给获取到的元素添加class属性,参数是class属性值,可以连缀1 ...

  8. 第一百三十节,JavaScript,封装库--连缀

    JavaScript,封装库--连缀 学习要点: 1.连缀介绍 2.改写库对象 本章我们重点来介绍,在调用库的时候,我们需要能够在前台调用的时候可以同时设置多个操作,比如设置CSS,设置innerHT ...

  9. Openlayer3之C++接口在javaScript的封装使用

    0.写在前面: 1)涉及的关键词定义: 传入:JavaScript向CAPI传值 传出:CAPI向JavaScript传值 2)关于类和结构体的封装,需要严格执行内存对齐,以防止读取越界,但是避免不了 ...

随机推荐

  1. 如何用 js 实现一个类似微信红包的随机算法

    如何用 js 实现一个类似微信红包的随机算法 js, 微信红包, 随机算法 "use strict"; /** * * @author xgqfrms * @license MIT ...

  2. TypeScript & as & Type Assertion

    TypeScript & as & Type Assertion Type Assertion (as) That is not vanilla JavaScript, it is T ...

  3. css effect all in one

    css effect all in one CSS 特效汇总 / 前端特效汇总 图片滑动对比 https://www.fika.io/ https://chrome.google.com/websto ...

  4. 视屏剪辑软件 & free video editor

    视屏剪辑软件 & free video editor purpose add animation keyframe to tutorials video vlog demos tutorial ...

  5. ES6 & tagged-template-literals & template strings

    ES6 & tagged-template-literals & template strings tagged template https://developer.mozilla. ...

  6. let & var & initialized bug

    let & var & initialized bug what's wrong with this? https://github.com/lydiahallie/javascrip ...

  7. git & Angular git commit 规范

    git & Angular git commit 规范 https://github.com/angular/angular/commits/master https://github.com ...

  8. SSL/TLS协议详解(中)——证书颁发机构

    本文转载自SSL/TLS协议详解(中)--证书颁发机构 导语 上一篇中,我们讨论了关于Diffie Hellman算法的SSL/TLS密钥交换.我们最终认为需要第三方来验证服务器的真实性,并提出了证书 ...

  9. Oracle VM VirtualBox安装CentOS7

    安装VirtualBox6.0 下载地址:https://www.virtualbox.org/ 新建虚拟机 类型:Linux 版本:Other Linux(64-bit)----如果没有出现64-b ...

  10. Java 12 新特性介绍,快来补一补

    Java 12 早在 2019 年 3 月 19 日发布,它不是一个长久支持(LTS)版本.在这之前我们已经介绍过其他版本的新特性,如果需要可以点击下面的链接进行阅读. Java 11 新特性介绍 J ...