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)关于类和结构体的封装,需要严格执行内存对齐,以防止读取越界,但是避免不了 ...
随机推荐
- Arctic Code Vault Contributor
Arctic Code Vault Contributor GitHub Archive Program https://archiveprogram.github.com/ Preserving o ...
- kahoot
kahoot Make learning awesome! https://kahoot.it/ https://kahoot.com/ 我们的平台可让您在几分钟内轻松创建,共享和玩学习游戏或琐事测验 ...
- iOS remote debug & Android remote debug & Chrome & APP
iOS remote debug & Android remote debug & Chrome & APP iOS remote debugging 如何在 iOS 真机上调 ...
- react 异步的setState
import React from "react"; class App extends React.Component { state = { a: 0 }; component ...
- Echarts制作一张全球疫情图
一.获取全球疫情数据 1)获取API 使用用友提供的新冠肺炎实时数据,登录注册之后可以免费使用. 2)点击用户信息 这里的AIPCODE,复制并保存,用于后续的使用. 3)API的使用 用友有提供一个 ...
- django学习-14.sys.argv用法和使用场景
1.前言 sys是python自带的一个内置模块. "sys.argv[0]"的含义:表示代码本身所在的文件路径. sys.argv说白了就是一个从程序外部获取参数的桥梁,这个&q ...
- 关于Python 编码的一点认识
在计算机中,所有数据的存储.运算以及传输都必须是二进制数字,因为计算机只认识0和1. 当一个人把一份数据传给另一个人时,计算机传递的是其实是二进制数字,但这些数字需要被还原为原始信息. 这个工作当然是 ...
- hadoop环境搭建:高可用
目录 1.硬件配置 2.软件版本 3.准备工作 3.1.配置网络环境 3.2.安装JDK 3.3.安装ZOOKEEPER 4.安装Hadoop 5.启动 6.问题 7.配置文件 1.硬件配置 采用3台 ...
- Hive安装与配置——2.3.5版本
Hive安装配置 Hive是一个数据仓库基础工具在Hadoop中用来处理结构化数据.它架构在Hadoop之上,提供简单的sql查询功能,可以将sql语句转换为MapReduce任务进行运行,使查询和分 ...
- 6. vue组件详解(一)
主要内容: 1. 组件的基本使用 2. 全局组件和局部组件 3. 父组件和子组件 4. 组件语法糖的写法 5. 组件data关联的写法 6. 父子组件的通信 组件系统是 Vue 的一个重要概念,因为它 ...