前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript 项目实战工具类

JavaScript 项目实战工具类

作者头像
White feathe
发布2021-12-08 14:17:42
5350
发布2021-12-08 14:17:42
举报
文章被收录于专栏:White feathe 的博客

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

1、通过参数名获取URL传递的参数值

方法一

代码语言:javascript
复制
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;
}

方法二

代码语言:javascript
复制
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、日期时间**

代码语言:javascript
复制
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、判断是哪个终端**

代码语言:javascript
复制
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为手持设备**

代码语言:javascript
复制
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、窗口响应事件**

代码语言:javascript
复制
responseWin:function(){//窗口响应事件
		return function(){
			/*window.onresize = function(){
				return common.IsPC();
			};*/
			return common.IsPC();
		}();
	}

**7、get/post设置参数,同步异步请求。**

代码语言:javascript
复制
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**

代码语言:javascript
复制
var v = localStorage.getItem('n') ? localStorage.getItem('n') : "";  
// 如果名称是  n 的数据存在 ,则将其读出 ,赋予变量v  。 

localStorage.setItem('n', v);                                           
// 写入名称为 n、值为  v  的数据 

localStorage.removeItem('n');                                           
// 删除名称为  n  的数据   

**9、判断是否为iPhone**

代码语言:javascript
复制
// 判断是否为 iPhone : 

function isAppleMobile() { 

    return (navigator.platform.indexOf('iPad') != -1); 

}; 

**10、双手指滑动事件**

代码语言:javascript
复制
// 双手指滑动事件

addEventListener('load',function(){
 window.onmousewheel = twoFingerScroll;
}, false); // false-->兼容各浏览器,表示在冒泡阶段调用事件处理程序 (true 捕获阶段)
     

function twoFingerScroll(ev) { 
    var delta =ev.wheelDelta/120;              
    //对 delta 值进行判断(比如正负) ,而后执行相应操作 
    return true; 
}; 

**11、隐藏地址栏 并且 处理事件的时候,防止滚动条出现**

代码语言:javascript
复制
// 隐藏地址栏  & 处理事件的时候 ,防止滚动条出现

addEventListener('load', function(){ 
   setTimeout(function(){ window.scrollTo(0, 1); }, 100); 
});

**12、屏幕旋转事件(onorientationchange)**

代码语言:javascript
复制
//添加屏幕旋转事件侦听,可随时发现屏幕旋转状态(左旋、右旋还是没旋)。

// 判断屏幕是否旋转

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、移动事件收集**

代码语言:javascript
复制
// 手势事件

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 的拨号功能 ,那么可以通过这样来声明电话链接 ,

代码语言:javascript
复制
<a href="tel:12345654321">打电话给我</a>

<a href="sms:12345654321">发短信</a>

或用于单元格:

<td onclick="location.href='tel:122'">

**15、自动大写与自动修正**

     要关闭这两项功能,可以通过autocapitalize 与autocorrect 这两个选项:

代码语言:javascript
复制
<input type="text" autocapitalize="off" autocorrect="off" />

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

代码语言:javascript
复制
window.location.href = "xx.html";

或者

window.open();

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

(a)history.pushState

代码语言:javascript
复制
history.pushState({}, "页面标题", "xxx.html");

(b)history.pushStatehistory.replaceState

代码语言:javascript
复制
history.replaceState(null, "页面标题", "xxx.html");

(c)window.onpopstate

代码语言:javascript
复制
window.addEventListener("popstate", function() {
    var currentState = history.state;
    /*
     * 代码块
    */											
});

**18、链接 获取 http:// 或者 https:// 的请求头 。**

代码语言:javascript
复制
 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 流量测速 。**

代码语言:javascript
复制
<!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效果。**

代码语言:javascript
复制
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();
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016/04/11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
短信
腾讯云短信(Short Message Service,SMS)可为广大企业级用户提供稳定可靠,安全合规的短信触达服务。用户可快速接入,调用 API / SDK 或者通过控制台即可发送,支持发送验证码、通知类短信和营销短信。国内验证短信秒级触达,99%到达率;国际/港澳台短信覆盖全球200+国家/地区,全球多服务站点,稳定可靠。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档