JavaScript 项目实战工具类

Rkatsiteli

已于 2022-12-15 14:39:14 修改

阅读量2.4k

点赞数 1

分类专栏： JavaScript + JQuery 文章标签： javascript

于 2016-04-11 20:28:45 首次发布

本文链接：https://blog.csdn.net/qq_16559905/article/details/51125218

版权

JavaScript + JQuery 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

自己封装的一些项目工具类，留着以后难免会用到！

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;
    };
  };```

Rkatsiteli

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
1
评论
JavaScript 项目实战工具类

自己封装的一些项目工具类，留着以后难免会用到！1、通过参数名获取URL传递的参数值GetQueryString:function(name){//通过参数名获取URL传递的参数值var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");var r = window.location.search.substr(1).match(reg
复制链接

扫一扫