JavaScript 项目实战工具类

╰半橙微兮° 2022-07-26 12:25 137阅读 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位数的单号 var Num = ""; 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; 
        };<br>};
    
    
    // 添加事件监听 
    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 这两个选项：

\*\*16、浏览器链接跳转。\*\*

window.location.href = "xx.html";
    
    或者
    
    window.open();

\*\*17、更改浏览器链接“ 不 ”跳转。\*\*

（a）history.pushState

history.pushState({}, "页面标题", "xxx.html");

（b）history.pushStatehistory.replaceState

history.replaceState(null, "页面标题", "xxx.html");

（c）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效果。\*\*