自己封装的一些项目工具类,留着以后难免会用到!
1、通过参数名获取URL传递的参数值
- 方法一
GetQueryString:function(name){//通过参数名获取URL传递的参数值
var resultValue = "";
var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)", "i");
var value = (window.location.search).substr(1).match(reg);
if (value != null)
resultValue = value[2];
return resultValue;
}
- 方法二
GetRequest:function(){//通过参数名获取URL传递的参数值(js获取url传递参数)
var url = location.search || location.href;
var _ParamObj = new Object();
//判断获取url中"?"符后的字串,并截取存储
if (url.indexOf("?") != -1) {
var paramStr = url.substr(url.indexOf("?") + 1);
var paramArray = paramStr.split("&");
for (var i = 0; i < paramArray.length; i++) {
_ParamObj[paramArray[i].split("=")[0]] = (paramArray[i].split("=")[1]);
}
}
return _ParamObj;
}
2、重点内容生成6位数的单号
generateMixed:function(){//生成6位数的单号
varNum = "";
for (var i = 0; i < 6; i++) {
Num += Math.floor(Math.random() * 10);
}
return Num;
}
3、日期时间
showDate:function(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
if (minute < 10) {
minute = "0" + minute;
}
if (second < 10) {
second = "0" + second;
}
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute;
}
4、判断是哪个终端
versions:function(){//判断是哪个终端
var u = window.navigator.userAgent;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者安卓QQ浏览器
iPad: u.indexOf('iPad') > -1, //是否为iPad
webApp: u.indexOf('Safari') == -1, //是否为web应用程序,没有头部与底部
weixin: u.indexOf('MicroMessenger') == -1 //是否为微信浏览器
};
}()
5、判断客户端是否为 PC 还是手持设备 true为pc,false为手持设备
IsPC:function(){//判断客户端是否为 PC 还是手持设备 true为pc,false为手持设备
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) >= 0) {
flag = false;
break;
}
}
//如果是PC浏览器的话,显示移动端打开,
if(flag){
$("body").empty().append("<div style='text-align: center;position:absolute;top:30%;left:0;bottom:0;right:0;font-size:2rem'>请使用手持设备访问<div>");
}
return flag;
}
6、窗口响应事件
responseWin:function(){//窗口响应事件
return function(){
/*window.onresize = function(){
return common.IsPC();
};*/
return common.IsPC();
}();
}
7、get/post设置参数,同步异步请求。
postAjax(type,path,params,dataType,async){//设置参数,同步异步请求。
var datas = "";
$.ajax({
type : type?type:"post",
url : path,
data : params,
dataType: dataType?dataType:"json",
async : async?async:false,
success : function(data){
datas = data;
}
});
return datas;
}
8、localStorage
var v = localStorage.getItem('n') ? localStorage.getItem('n') : "";
// 如果名称是 n 的数据存在 ,则将其读出 ,赋予变量v 。
localStorage.setItem('n', v);
// 写入名称为 n、值为 v 的数据
localStorage.removeItem('n');
// 删除名称为 n 的数据
9、判断是否为iPhone
// 判断是否为 iPhone :
function isAppleMobile() {
return (navigator.platform.indexOf('iPad') != -1);
};
10、双手指滑动事件
// 双手指滑动事件
addEventListener('load',function(){
window.onmousewheel = twoFingerScroll;
}, false); // false-->兼容各浏览器,表示在冒泡阶段调用事件处理程序 (true 捕获阶段)
function twoFingerScroll(ev) {
var delta =ev.wheelDelta/120;
//对 delta 值进行判断(比如正负) ,而后执行相应操作
return true;
};
11、隐藏地址栏 并且 处理事件的时候,防止滚动条出现
// 隐藏地址栏 & 处理事件的时候 ,防止滚动条出现
addEventListener('load', function(){
setTimeout(function(){ window.scrollTo(0, 1); }, 100);
});
12、屏幕旋转事件(onorientationchange)
//添加屏幕旋转事件侦听,可随时发现屏幕旋转状态(左旋、右旋还是没旋)。
// 判断屏幕是否旋转
function orientationChange() {
switch(window.orientation) {
case 0:
alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case -90:
alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 90:
alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 180:
alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
};
};
// 添加事件监听
addEventListener('load', function(){
orientationChange();
window.onorientationchange = orientationChange;
});
13、移动事件收集
// 手势事件
touchstart //当手指接触屏幕时触发
touchmove //当已经接触屏幕的手指开始移动后触发
touchend //当手指离开屏幕时触发
touchcancel
// 触摸事件
gesturestart //当两个手指接触屏幕时触发
gesturechange //当两个手指接触屏幕后开始移动时触发
gestureend
// 屏幕旋转事件
onorientationchange
// 检测触摸屏幕的手指何时改变方向
orientationchange
// touch事件支持的相关属性
touches
targetTouches
changedTouches
clientX // X coordinate of touch relative to the viewport (excludes scroll offset)
clientY // Y coordinate of touch relative to the viewport (excludes scroll offset)
screenX // Relative to the screen
screenY // Relative to the screen
pageX // Relative to the full page (includes scrolling)
pageY // Relative to the full page (includes scrolling)
target // Node the touch event originated from
identifier // An identifying number, unique to each touch event
14、特殊链接(电话、发短信)
如果你关闭自动识别后 ,又希望某些电话号码能够链接到 iPhone 的拨号功能 ,那么可以通过这样来声明电话链接 ,
<a href="tel:12345654321">打电话给我</a>
<a href="sms:12345654321">发短信</a>
// 或用于单元格:
<td onclick="location.href='tel:122'">
15、自动大写与自动修正
要关闭这两项功能,可以通过autocapitalize
与autocorrect
这两个选项:
<input type="text" autocapitalize="off" autocorrect="off" />
16、浏览器链接跳转。
window.location.href = "xx.html";
// 或者
window.open();
17、更改浏览器链接“ 不 ”跳转。
history.pushState
history.pushState({}, "页面标题", "xxx.html");
history.pushStatehistory.replaceState
history.replaceState(null, "页面标题", "xxx.html");
window.onpopstate
window.addEventListener("popstate", function() {
var currentState = history.state;
/*
* 代码块
*/
});
18、链接 获取 http://
或者 https://
的请求头 。
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
//获取请求头的http
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F382f81c966395258f239157654081890' type='text/javascript'%3E%3C/script%3E"));
19、Js 流量测速 。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Generator" content="EditPlus">
</head>
<body>
<SCRIPT language=JavaScript>
var st = new Date();
</SCRIPT>
<IMG alt="测试图片" src="http://sp2.yokacdn.com/photos/f3/4f/702018/photo_322092_500.jpg" onload="showspeed();">
<div id='showtxt'></div>
<script>
var arr = ["网速低于50KB", "网速在50-100KB之间", "网速在100-200KB之间", "网速在200-300KB之间", "视频通讯"];
function showspeed() {
var filesize = 35.4; //measured in KB
var et = new Date();
var speed = Math.round(filesize * 1000) / (et - st);
document.title = speed;
var scope = (speed > 0 && speed <= 50) ? 0 : (speed > 50 && speed <= 100) ? 1 : (speed >= 100 && speed < 200) ? 2 : (speed >= 200 && speed < 300) ? 3 : 4;
alert(scope)
console.log("您的下载速度为:" + arr[scope] + " (K/秒)");
}
</script>
</body>
</html>
20、点赞+1效果。
function anp(e) {
var $i = $("<b>").text("+" + 1);
var x = e.pageX,
y = e.pageY;
$i.css({
top: y - 20,
left: x,
position: "absolute",
color: "#E94F06"
});
$("body").append($i);
$i.animate({
top: y - 120,
opacity: 0,
"font-size": "1.4em"
}, 1500, function() {
$i.remove();
});
e.stopPropagation();
}
21、div contenteditable
光标定位到最后。
div[contenteditable=true]
的组件作为文本输入框,在非手动输入值后,光标会丢失,经测试以下这段代码可用,直接将光标定位到最后。
function keepLastIndex(obj) {
if (window.getSelection) { //ie11 10 9 ff safari
obj.focus(); //解决ff不获取焦点无法定位问题
var range = window.getSelection(); //创建range
range.selectAllChildren(obj); //range 选择obj下所有子内容
range.collapseToEnd(); //光标移至最后
} else if (document.selection) { //ie10 9 8 7 6 5
var range = document.selection.createRange(); //创建选择对象
//var range = document.body.createTextRange();
range.moveToElementText(obj); //range定位到obj
range.collapse(false); //光标移至最后
range.select();
}
}
使用
setTimeout(()=>{
keepLastIndex(e.target)
},5);
22、防抖函数(debounce)
// 这个是用来获取当前时间戳的
function now() {
return +new Date()
}
/**
* 防抖函数,返回函数连续调用时,空闲时间必须大于或等于 wait,func 才会执行
*
* @param {function} func 回调函数
* @param {number} wait 表示时间窗口的间隔
* @param {boolean} immediate 设置为ture时,是否立即调用函数
* @return {function} 返回客户调用函数
*/
function debounce (func, wait = 50, immediate = true) {
let timer, context, args
// 延迟执行函数
const later = () => setTimeout(() => {
// 延迟函数执行完毕,清空缓存的定时器序号
timer = null
// 延迟执行的情况下,函数会在延迟函数中执行
// 使用到之前缓存的参数和上下文
if (!immediate) {
func.apply(context, args)
context = args = null
}
}, wait)
// 这里返回的函数是每次实际调用的函数
return function(...params) {
// 如果没有创建延迟执行函数(later),就创建一个
if (!timer) {
timer = later()
// 如果是立即执行,调用函数
// 否则缓存参数和调用上下文
if (immediate) {
func.apply(this, params)
} else {
context = this
args = params
}
// 如果已有延迟执行函数(later),调用的时候清除原来的并重新设定一个
// 这样做延迟函数会重新计时
} else {
clearTimeout(timer)
timer = later()
}
}
}
23、节流函数(throttle)
/**
* underscore 节流函数,返回函数连续调用时,func 执行频率限定为 次 / wait
*
* @param {function} func 回调函数
* @param {number} wait 表示时间窗口的间隔
* @param {object} options 如果想忽略开始函数的的调用,传入{leading: false}。
* 如果想忽略结尾函数的调用,传入{trailing: false}
* 两者不能共存,否则函数不能执行
* @return {function} 返回客户调用函数
*/
_.throttle = function(func, wait, options) {
var context, args, result;
var timeout = null;
// 之前的时间戳
var previous = 0;
// 如果 options 没传则设为空对象
if (!options) options = {};
// 定时器回调函数
var later = function() {
// 如果设置了 leading,就将 previous 设为 0
// 用于下面函数的第一个 if 判断
previous = options.leading === false ? 0 : _.now();
// 置空一是为了防止内存泄漏,二是为了下面的定时器判断
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
return function() {
// 获得当前时间戳
var now = _.now();
// 首次进入前者肯定为 true
// 如果需要第一次不执行函数
// 就将上次时间戳设为当前的
// 这样在接下来计算 remaining 的值时会大于0
if (!previous && options.leading === false) previous = now;
// 计算剩余时间
var remaining = wait - (now - previous);
context = this;
args = arguments;
// 如果当前调用已经大于上次调用时间 + wait
// 或者用户手动调了时间
// 如果设置了 trailing,只会进入这个条件
// 如果没有设置 leading,那么第一次会进入这个条件
// 还有一点,你可能会觉得开启了定时器那么应该不会进入这个 if 条件了
// 其实还是会进入的,因为定时器的延时
// 并不是准确的时间,很可能你设置了2秒
// 但是他需要2.2秒才触发,这时候就会进入这个条件
if (remaining <= 0 || remaining > wait) {
// 如果存在定时器就清理掉否则会调用二次回调
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
result = func.apply(context, args);
if (!timeout) context = args = null;
} else if (!timeout && options.trailing !== false) {
// 判断是否设置了定时器和 trailing
// 没有的话就开启一个定时器
// 并且不能不能同时设置 leading 和 trailing
timeout = setTimeout(later, remaining);
}
return result;
};
};```