常用的js封装方法
文章目录
- 1解决ie和其他浏览器解决事件冒泡的问题
- 2解决ie 和其它浏览器为元素绑定事件的函数
- 3同理 解决ie和其它浏览器为元素移出绑定事件的函数
- 4兼容ie和其他浏览器 获取事件对象本身
- 5兼容ie和其它浏览器 获取事件发生源头元素（标签）
- 6兼容ie和其它浏览器阻止元素默认事件的方法
- 7兼容ie和其它浏览器获取css样式
- 8写一个查看屏幕尺寸的方法，想办法做到兼容
- 9兼容多浏览器的获取当前滚动条位置的方法
- 10兼容ie浏览器关于ajax的封装
- 11兼容所有浏览器，清除字符串前后空格
- 12倒计时的封装函数
- 13 js canvas 封装扇形图
- 14将文件转为base64
- 15时间常用封装函数
- 16将number转为ABC
1解决ie和其他浏览器解决事件冒泡的问题
function stopBubble(e) {
if(e.stopPropagation)
{
e.stopPropagation();
}
else{
e.cancelBubble();
}
}
2解决ie 和其它浏览器为元素绑定事件的函数
function addEvent (element,eventtype,handle){
if(element.addEventListener){
element.addEventListener(eventtype,handle,false);
//优先使用这种方法添加事件，是因为这种方法可以反复为同一个元素添加多个事件
}
else if(element.attachEvent){
element.attachEvent('on' + eventtype,function(){
handle.call(element); //ie浏览器添加事件
} )
}
else {
element['on' + eventtype] = handle;
// element.onclick = function () {}
}
}
3同理 解决ie和其它浏览器为元素移出绑定事件的函数
function removeEvent(element, type, handler) {
if (element.removeEventListener) {
//非IE浏览器采用dom2级事件处理，type为事件类型如：click，handler为事件处理函数，false代表事件采用冒泡处理模型，如果是true代表 采用捕获型处理模型
//除了netbeans采用捕获型处理模型，其他都采用冒泡型处理模型
//如果是非IE浏览器添加事件为：removeEventListener
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
//如果为IE浏览器，添加事件采用 detachEvent
element.detachEvent('on' + type, handler);
} else {
//dom0级事件处理，如果删除事件采用赋值null
element['on' + type] = null;
}
},
4兼容ie和其他浏览器 获取事件对象本身
function getEvent(event) {
return event ? event : window.event;
},
5兼容ie和其它浏览器 获取事件发生源头元素（标签）
function getEventElement(event) {
//获取事件作用元素
return event.target || event.srcElement;
}
6兼容ie和其它浏览器阻止元素默认事件的方法
function preventDefault(event) {
//阻止默认的事件行为
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
7兼容ie和其它浏览器获取css样式
第一个形参被获取样式的元素,第二个形参样式的名称，用来获取css上的样式具体的值
第一参数举例 document.getElementsByClassName(“test”)[0]
第二参数举例 “color”
function getCssStyle(element,attribute){
if(window.getComputedStyle){
return window.getComputedStyle(element,null)[attribute];
}
else{
return element.currentStyle[attribute];
}
}
8写一个查看屏幕尺寸的方法，想办法做到兼容
window.getScreenSize = function(){
//在标准模式下执行，w3c标准
if(window.innerWidth){
return {
width : window.innerWidth,
height : window.innerHeight,
}
}
//在标准模式下执行
else if(document.documentElement.clientWidth){
return{
width : document.documentElement.clientWidth,
height : document.documentElement.clientHeight,
}
}
else if (document.compatMode === 'BackCompat' )
{
//在怪异模式下执行
return{
width : document.body.clientWidth,
height : document.body.clientHeight,
}
}
else {
}
}
9兼容多浏览器的获取当前滚动条位置的方法
window.getScrollOffset = function(){
if(window.pageXOffset){
return {
x : window.pageXOffset,
y : window.pageYOffset,
}
}
else{
return{
x: document.body.scrollLeft + document.documentElement.scrollLeft,
y: document.body.scrollTop + document.documentElement.scrollTop,
}
}
}
10兼容ie浏览器关于ajax的封装
/* 封装ajax函数
* @param {string}opt.method http连接的方式，包括POST和GET两种方式
* @param {string}opt.url 发送请求的url
* @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
* @param {object}opt.data 发送的参数，格式为对象类型
* @param {function}opt.success ajax发送并接收成功调用的回调函数
*/
/*1常规封装*/
function ajax(opt) {
opt = opt || {};
opt.method = opt.method.toUpperCase() || "GET"; //GET：用"GET"方式发送数据,只能256KB;POST：用"POST"方式发送数据,可以大到4MB
opt.url = opt.url || "";
opt.async = opt.async || true; //同步异步
opt.dataType = opt.dataType || "text"; //所传的数的数据类型
opt.contentType = opt.contentType || "application/x-www-form-urlencoded; charset=utf-8"; //默认表单格式 opt.dataType='json'
opt.data = opt.data || null;
var xmlHttp = getXmlHttp(); //获取XML 对象
var postData = getAjaxParama(opt.data); //data
if (opt.contentType === "application/json;charset=utf-8" && opt.dataType === "json") {
postData = JSON.stringify(opt.data); //转化为字符串
}
if (opt.method === 'POST') {
xmlHttp.open(opt.method, opt.url, opt.async);
xmlHttp.setRequestHeader('Content-Type', opt.contentType); //而POST请求需要设置请求头，用来传递参数
} else if (opt.method === 'GET') {
postData = opt.url.indexOf("?") >= 0 ? "&" + postData : "?" + postData; //GET请求，参数是拼接到url上面；
xmlHttp.open(opt.method, opt.url + postData, opt.async);
postData = null; //重置参数
}
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
var status = xmlHttp.status;
if (status >= 200 && status < 300) {
opt.success && opt.success(xmlHttp.responseText);
} else {
opt.error && opt.error(status);
}
}
};
xmlHttp.send(postData);
function getXmlHttp() {
var obj = null;
//非IE浏览器创建XmlHttpRequest对象
if (window.XMLHttpRequest) obj = new XMLHttpRequest();
//IE浏览器创建XmlHttpRequest对象
if (window.ActiveXObject) {
try {
obj = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {
try {
obj = new ActiveXObject("msxml2.XMLHTTP");
} catch (ex) {}
}
}
return obj;
}
function getAjaxParama(data) {
var params = [];
for (var key in data) {
params.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
}
return params.join('&'); //添加&字符串
}
}
11兼容所有浏览器，清除字符串前后空格
function trim(str) {
if (str & typeof str === "string") {
return str.replace(/(^s*)|(s*)$/g,""); //去除前后空白符
}
}
12倒计时的封装函数
/**
* [limitFormatTime js倒计时函数]
* @param {[type]} date [2019.05.09 20:10:10]
* @return {[type]} [description]
*/
function limitFormatTime(date) {
// 日期格式为
date = date.replace(/\./g,'/');
var timestamp = (new Date(date)).valueOf();
var nowstr = (new Date()).valueOf();
var chazhi = (timestamp - nowstr)/1000;
if (chazhi < 0) {
chazhi = 0;
}
var d = Math.floor(chazhi / 3600 / 24),
h = Math.floor((chazhi / 3600) % 24),
m = Math.floor((chazhi % 3600) / 60),
s = Math.floor((chazhi % 3600) % 60);
if (h < 10) {
h = "0" + h;
}
if (m < 10) {
m = "0" + m;
}
if (s < 10) {
s = "0" + s;
}
return {
d: d, // 天
h: h, // 时
m: m, // 分
s: s // 秒
}
}
13 js canvas 封装扇形图
//原型
var Canvas = function(ele,num,color){
this.ele = ele;
this.num = num;
this.ctx = this.ele.getContext("2d");
this.color = color || ["#21a74f","#b3e5f1","#3498db","#2ecc71","#f1c40f","#e67e22","#ff2d52"];
this.draw();
}
Canvas.prototype.draw=function(){
var j=0,j1=0,j2=0,angle=0;
var sum=0;
for(var i=0;i<this.num.length;i++){
sum=sum+this.num[i];
}
for(var i=0;i<this.num.length;i++){
j=2*Math.PI*this.num[i]/sum;
j2=j1+j;
this.ctx.beginPath();
this.ctx.fillStyle=this.color[i];
this.ctx.arc(this.ele.width/2,this.ele.height/2,120,j1,j2,false);
this.ctx.lineTo(this.ele.width/2,this.ele.height/2);
this.ctx.closePath();
this.ctx.fill();
angle=j1+j/2;
j1=j1+j;
}
}
//实例调用
var ele1=document.getElementById("canvas");
ele1.width = 600; //改变画布的分辨率宽度
ele1.height = 600; //改变画布分辨率高度
var num1=[1,1,1,1,1,1,1]; //数组之间数的比例将会影响对应所占扇形的大小，
//将圆平均分为七份
//可以自己定义颜色为数组，第三个参数，与第二个数组参数的长度一致
// 第一个参数为canvas对应的dom节点，第二个参数为不同扇形所占比例数组，第三个参数为颜色数组
var can1 = new Canvas(ele1,num1);
14将文件转为base64
const File2Base64 = (f) =>
new Promise((resolve, reject) => {
try {
const reader = new FileReader();
reader.onload = function () {
resolve(reader.result);
};
reader.readAsDataURL(f);
} catch (e) {
reject(e);
}
});
15时间常用封装函数
时间格式函数封装
/**
* 格式化时间
* @param {Date} t 时间戳
* @param {string} format yyyy-MM-dd hh:mm:ss
* @returns {string} 2011-11-11 11:11:11
*/
export const formatTime = (t, format = 'yyyy-MM-dd hh:mm:ss') => {
const date = {
'M+': t.getMonth() + 1,
'd+': t.getDate(),
'h+': t.getHours(),
'm+': t.getMinutes(),
's+': t.getSeconds(),
'q+': Math.floor((t.getMonth() + 3) / 3),
'S+': t.getMilliseconds(),
};
if (/(y+)/i.test(format)) {
format = format.replace(RegExp.$1, (t.getFullYear() + '').substr(4 - RegExp.$1.length));
}
for (const k in date) {
if (new RegExp('(' + k + ')').test(format)) {
format = format.replace(
RegExp.$1,
RegExp.$1.length == 1 ? date[k] : ('00' + date[k]).substr(('' + date[k]).length),
);
}
}
return format;
};
/**
* 格式化时间成时间实例 2020-02-02 22:22:22 -> 2020/02/02 22:22:22
* @param {string} t 时间 2020-02-02 22:22:22
*/
export const formatTime2Date = (t) => {
// 2020-02-02 22:22:22 -> 2020/02/02 22:22:22
// 避免 iOS 出问题
return new Date(t.replace(/-/g, '/'));
};
时间距今函数封装，格式化时间成文字
/**
* 格式化时间成文字
* @param {Date} t 时间
*/
export const formatTime2Text = (t) => {
const st = t.getTime();
const now = new Date().getTime();
const timeLag = Math.ceil((now - st) / 1000);
if (timeLag <= 60) {
return '一分钟前';
}
if (timeLag <= 60 * 4) {
return '三分钟前';
}
if (timeLag <= 60 * 6) {
return '五分钟前';
}
if (timeLag <= 60 * 11) {
return '十分钟前';
}
if (timeLag <= 60 * 31) {
return '半小时前';
}
if (timeLag <= 60 * 61) {
return '一小时前';
}
if (timeLag <= 60 * 61 * 2) {
return '两小时前';
}
if (timeLag <= 60 * 60 * 3) {
return '三小时前';
}
if (timeLag <= 60 * 60 * 6) {
return '半天前';
}
if (timeLag <= 60 * 60 * 24) {
return '一天前';
}
if (timeLag <= 60 * 60 * 24 * 2) {
return '两天前';
}
if (timeLag <= 60 * 60 * 24 * 3) {
return '三天前';
}
return formatTime(t).split(' ')[0];
};
16将number转为ABC
export const getStrAZ = (n: number) => {
return String.fromCharCode(65 + n);
};