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)关于类和结构体的封装,需要严格执行内存对齐,以防止读取越界,但是避免不了 ...
随机推荐
- OTA development
OTA development OTA update OTA Over the Air / 无线下载 https://en.wikipedia.org/wiki/Over-the-air_progra ...
- Rust learning notes
Rust learning notes Rust Version 1.42.0 $ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs ...
- js destructuring assignment bug
js destructuring assignment bug https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Op ...
- WEB 硬件设备联网
在js中与第三方设备的通信 这是一个Xbox One手柄的demo,将手柄使用USB连接到PC上: See also: video Device APIs 通过JavaScript与蓝牙设备通信 在网 ...
- js 创建简单的表单同步验证器
SyncValidate declare const uni: any; export interface SyncValidateOpt { [key: string]: SyncValidateF ...
- Redis 博文索引
博文索引 Redis 对象与编码 Redis 持久化 Redis 主从复制 Redis 哨兵 Redis 缓存淘汰 Redis 集合统计 Redis 简介
- PBN离场定高转弯保护区插件发布测试
昨天2月29日,是四年才有一次的日子,本想着应该写点什么,但一测试发现还有问题,只能先放下. 今天是三月份的第一天,一年已经过去了六分之一.疫情的关系,原本并不紧急的工作,现在也开始积压的有些多了,时 ...
- 教你玩转CSS 居中
1.元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;. 设置到元素的宽度将防止它溢出到容器的边缘. 元素通过指定宽度,并将两边的空外边距平均分 ...
- django学习-22.admi管理后台页面的文案展示等相关配置
目录结果 1.前言 2.完整的操作步骤 2.1.第一步:对[settings.py]里的相关常量的值做如下修改 2.2.第二步:重启django项目[helloworld]的服务 2.3.第三步:重新 ...
- JAVA 8 新特性实用总JAVA 8 新特性实用总结结
JAVA 8 新特性实用总结 作为一个工作两年多的 老 程序猿,虽然一开始就使用 jdk1.8 作为学习和使用的版本,随着技术的迭代,现有的 JDK 版本从两年前到现在,已经飞速发展到了 JDK 15 ...