javascript常用方法封装
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.文本复制
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常用方法封装的更多相关文章
- 2016/11/17 周四 <javascript的封装简单示例>
这是一个简单的javascript代码封装的示例以及封装后的调用方法: var ticker={ n:0, add:function() { this.n++; }, show:function() ...
- Javascript常用方法函数收集(二)
Javascript常用方法函数收集(二) 31.判断是否Touch屏幕 function isTouchScreen(){ return (('ontouchstart' in window) || ...
- 第一百三十五节,JavaScript,封装库--拖拽
JavaScript,封装库--拖拽 封装库新增1个拖拽方法 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:一般需要在css文件将元素里的某一个区块光标设置成提示可以拖拽, ...
- 第一百三十四节,JavaScript,封装库--遮罩锁屏
JavaScript,封装库--遮罩锁屏 封装库新增1个方法 /** zhe_zhao_suo_ping()方法,将一个区块元素设置成遮罩锁屏区块 * 注意:一般需要在css文件将元素设置成隐藏 ** ...
- 第一百三十三节,JavaScript,封装库--弹出登录框
JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...
- 第一百三十二节,JavaScript,封装库--下拉菜单
JavaScript,封装库--下拉菜单 封装库,增加了3个方法 shu_biao_yi_ru_yi_chu()方法,给元素设置鼠标移入移出事件,接收两个参数,参数是移入和移出时的执行函数(包含代码) ...
- 第一百三十一节,JavaScript,封装库--CSS
JavaScript,封装库--CSS 将封装库里的方法,改成了原型添加方法 增加4个方法 tian_jia_class()方法,给获取到的元素添加class属性,参数是class属性值,可以连缀1 ...
- 第一百三十节,JavaScript,封装库--连缀
JavaScript,封装库--连缀 学习要点: 1.连缀介绍 2.改写库对象 本章我们重点来介绍,在调用库的时候,我们需要能够在前台调用的时候可以同时设置多个操作,比如设置CSS,设置innerHT ...
- Openlayer3之C++接口在javaScript的封装使用
0.写在前面: 1)涉及的关键词定义: 传入:JavaScript向CAPI传值 传出:CAPI向JavaScript传值 2)关于类和结构体的封装,需要严格执行内存对齐,以防止读取越界,但是避免不了 ...
随机推荐
- Publish/Subscribe Pattern & Vanilla JavaScript
Publish/Subscribe Pattern & Vanilla JavaScript https://en.wikipedia.org/wiki/Publish–subscribe_p ...
- js in depth: closure function & curly function
js in depth: closure function & curly function 闭包, 科里化 new js 构造函数 实例化, 不需要 new var num = new Ar ...
- 什么是USDN稳定币?USDN的应用价值是什么?
9月22日,美国货币监理署(OCC)发布了一项稳定币指南,主要内容围绕的是稳定币的监管及相关规定.一时间,稳定币得到了市场上广泛的关注.那么,什么是稳定币呢?什么又是USDN稳定币呢? 1.什么是稳定 ...
- Captain Technology INC浅谈新能源汽车的未来
近日全世界上最大的资管公司贝莱德向位于的英国电动汽车初创公司Arrival投资1.18亿美元,且该公司已有投资者亚马逊和美国第二大汽车制造商福特汽车参投.中国最知名的电动车公司蔚来股价单日大涨22%, ...
- 内存包装类 Memory 和 Span 相关类型
1. 前言 2. 简介 3. Memory<T>和Span<T>使用准则 3.1. 所有者, 消费者和生命周期管理 3.2. Memory<T> 和所有者/消费者模 ...
- (转)IP协议详解之子网寻址、子网掩码、构造超网
原文网址:http://www.cnblogs.com/way_testlife/archive/2010/10/05/1844399.html 子网寻址 1. 从两级IP地址到三级IP地址 < ...
- 通过setMouseTracking实现用鼠标拖动控件
1 import sys 2 from PyQt5.Qt import * 3 4 class Mwindow(QWidget): 5 leftclick = False 6 7 def __init ...
- Vue为何采用异步渲染
Vue为何采用异步渲染 Vue在更新DOM时是异步执行的,只要侦听到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更,如果同一个watcher被多次触发,只会被推入到队列中一次 ...
- Java自学第8期——多线程
1.多线程: 操作系统支持同时运行多个任务,一个任务通常是一个程序,所有运行中的程序就是一个进程().程序内部包含多个顺序执行流,每个顺序执行流就是一个线程. 并发:两个或者多个事件在同一个时间段内交 ...
- WPF -- 一种添加静态资源的方式
本文介绍使用独立的xaml文件添加静态资源的方式. 步骤 创建XAML文件,如ImageButton.xaml,添加ResourceDictionary标签,并添加静态资源: 在App.xaml的Ap ...