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. React + GraphQL 2020 速成课程

    React + GraphQL 2020 速成课程 technologies React (to build our user interface) GraphQL (to get and chang ...

  2. node.js 如何处理一个很大的文件

    node.js 如何处理一个很大的文件 思路 arraybuffer 数据分段 时间分片 多线程 web workers sevice workers node.js 如何处理一个很大的文件 http ...

  3. redux & connect

    redux & connect import React, { Component, // useState, // useEffect, } from 'react'; import { b ...

  4. 「NGK每日快讯」2021.2.2日NGK公链第91期官方快讯!

  5. 「NGK每日快讯」12.11日NGK公链第38期官方快讯!

  6. HDFS 02 - HDFS 的机制:副本机制、机架感知机制、负载均衡机制

    目录 1 - HDFS 的副本机制 2 - HDFS 的机架感知机制 3 - HDFS 的负载均衡机制 参考资料 版权声明 1 - HDFS 的副本机制 HDFS 中的文件,在物理上都是以分块(blo ...

  7. JavaScript:什么是回调?

    翻译练习 原博客地址:JavaScript: What the heck is a Callback? 在6分钟内通过简单的例子学习和理解回调的基本原理. 什么是回调? 简单地说:回调就是一个在另一个 ...

  8. 后端程序员之路 49、SSDB

    正如Redis似乎是为替换memcached一样,SSSB是一个国人开发的旨在替换Redis的kv数据库. SSDB - 高性能的支持丰富数据结构的 NoSQL 数据库, 替代 Redishttp:/ ...

  9. 后端程序员之路 36、Apache Kafka

    Apache Kafkahttp://kafka.apache.org/ Kafka,很容易就联想到<海边的卡夫卡>,文艺程度和Casablanca有得一拼.Kafka是一个分布式消息系统 ...

  10. Pyqt5——变色的表格

    需求:鼠标左键点击表格后,对应的单元格背景颜色发生变化. 实现:(1)使用Qt的model-view模式生成表格视图. (2)重写表格的点击事件. (3)设置表格的背景颜色. 正常情况下,当用户选中单 ...