JS经常使用代码片断

时间  2019-12-05
标签 经常 使用 代码 片断 栏目 JavaScript 繁體版
原文   原文链接

js监听滚动事件

window.onscroll=function(){ getScrollTop(); } 
function getScrollTop() { console.log(document.documentElement.scrollTop) }
复制代码

获取一个元素到视图顶部的距离

var height = $(this).offset().top;
复制代码

向上滚动相应的距离

$('html,body').animate({scrollTop:height})
复制代码

页面跳转带参数传值

页面参数传值的做用就是从一个页面跳到另外一个页面，比方说从标题跳到详情，须要传递参数到详情页面再调这个，可使用这个方法进行传值，而后再请求接口。html

使用location跳转:

location.href = "url.html?id=" + id
复制代码

使用a标签跳转

<a :href="'url.html?id=' + id"></a>
复制代码

获取地址参数的方法

function getUrlParam(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
	var r = window.location.search.substr(1).match(reg);
	if(r != null) {
		return(r[2]);
	}
}
复制代码

调用地址参数的方法

getUrlParam('id')
复制代码

控制手机物理返回按键

pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#"); }, 
复制代码

进行调用

pushHistory();
window.addEventListener("popstate", function(e) {
  location.href=""''
}, false);
复制代码

判断是否在微信浏览器打开

有时候咱们写的前端页面，须要在不一样的终端中显示，好比微信浏览器、h五、WebApp，不用的终端须要不一样的显示方法，好比顶部导航栏在微信浏览器内是不须要显示的，由于用户体验不太友好，就可使用这个方法进行隐藏。前端

function is_weixn() {
	var ua = navigator.userAgent.toLowerCase();
	if(ua.match(/MicroMessenger/i) == "micromessenger") {		
	  //TODO
	} else {
	  //TODO
}
}
复制代码

判断是Android仍是IOS

写好的网页须要在不一样终端显示，但h5在苹果和安卓有些显示效果是不一样的，好比input标签和font-weight属性。由于苹果会将有些属性进行处理，因此调用这个方法能够对有些显示不一样的标签进行校订，以达到相同的显示结果。vue

var u = navigator.userAgent;
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
				var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				var b = document.getElementById('titleId');
				if(isAndroid) {
					//TODO

			}else if(isiOS) {
					//TODO

			};
复制代码

判断是pc端仍是移动端

browserRedirect() {
		const that = this;
		var sUserAgent = navigator.userAgent.toLowerCase();
		var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
		var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
		var bIsMidp = sUserAgent.match(/midp/i) == "midp";
		var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
		var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
		var bIsAndroid = sUserAgent.match(/android/i) == "android";
		var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
		var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
		document.writeln("您的浏览设备为：");
		if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
			that.plant='wap';
		} else {
			that.plant='pc';
		}
	}
复制代码

分页加载数据 后台拿到数据，前端进行渲染，数据多的状况下要进行分页显示，提高用户体验，减小过的请求形成没必要要的数据浪费和卡顿

//获取滚动条当前的位置 
	getScrollTop() {
		var scrollTop = 0;
		if(document.documentElement && document.documentElement.scrollTop) {
			scrollTop = document.documentElement.scrollTop;
		} else if(document.body) {
			scrollTop = document.body.scrollTop;
		}
		return scrollTop;
	},

	//获取当前可视范围的高度 
	getClientHeight() {
		var clientHeight = 0;
		if(document.body.clientHeight && document.documentElement.clientHeight) {
			clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
		} else {
			clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
		}
		return clientHeight;
	},

	//获取文档完整的高度 
	getScrollHeight() {
		return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
	}
	//分页加载数据实现
	window.onscroll = function() {
	if(that.getScrollTop() + that.getClientHeight() == that.getScrollHeight()) {
		axios.post(apiurl, {
				'page': that.page++; //滑动到底部让页码数+1
			}).then(function(res) {
				data= data.concat(res.data.data.data);//使用js数组的concat方法将数据拼接起来.
			})
			.catch(function(error) {
				console.log(error);
			});
	}
}
复制代码

可视化区域加载

$(function(){
				var object=$("object"); //获得导航对象
				var win=$(window); //获得窗口对象
				var sc=$(document);//获得document文档对象。
				win.scroll(function(){
				  if(sc.scrollTop()>=20){ //距离顶部大于20执行操做
						//TODO 
				  }else{
						//TODO
				  }
				}) 
				});
复制代码

获取验证码倒计时

jquery实现方法

var yzm = $('.get-yzm');//获取验证码节点
    function time() {
        if (wait < 0) {
        yzm.text("获取验证码"); //改变文字
        yzm.removeAttr("disabled"); //按钮设置为可点击状态
        wait = 60; //设置60秒倒计时
    		} else {
            yzm.attr("disabled", "true"); //开始计时，将按钮设置为不可点击
            yzm.text(wait + "秒后重获取"); //改变文字
            	wait--;
            setTimeout(function () {
            	time();
            }, 1000)
                }
            }
复制代码

vue实现方法

<button class="getYZM" @click="onGetYZM()" :disabled="yzmBtn">{{yzmTip}}<button>
data:{
	yzmBtn:false,
	yzmTip:'获取验证码',
}
methods:{
	function time() {
		if (wait < 0) {
	   that.yzmTip="获取验证码"
		that.yzmBtn=false
		  wait = 60;
	 } else {
			that.yzmBtn=true;
			 that.yzmTip= wait + "秒后获取";
			 wait -- ;
			setTimeout(function () {
				time();
			}, 1000)
		}
}
复制代码

时间格式化输出

制做时间倒计时的时候，只要传入相应的秒数单位，就能够转化成年月日时分秒的时间戳。使用实例以下:

time(){
				var time = $('#times');//获取要显示倒计时的时间节点
					if (wait < 0) {
						time.text("00:00:00");                            
						wait = 10; //倒计时时间熟，设置起始秒数
					} else {
					   time.text(this.formatSeconds(wait)); //调用格式化的方法
						wait--;
						//调用计时器，开始计时
						setTimeout(function () {
							that.time();
						}, 1000)
					}
				},
//格式化时秒分
	 formatSeconds(s) {							          
						if(s > -1){
							var hour = Math.floor(s/3600);
							var min = Math.floor(s/60) % 60;
							var sec = s % 60;
							if(hour < 10) {
								t = '0'+ hour + ":";
						} else {
							t = hour + ":";
						}

						if(min < 10){t += "0";}
						t += min + ":";
						if(sec < 10){t += "0";}
						t += sec;
					}
					return t;
				}
复制代码

合并两个数组

var arr1 = [1,2,3,4,5,6];
var arr2 = [2,4,6];
复制代码

ES5

concat (返回新数组，不会改变原来的数组,会形成内存浪费)

arr1.concat(arr2)
复制代码

for循环(代码阅读性太差)

for(var i in arr2){
	arr1.push(arr2[i])
}
复制代码

apply

arr1.push.apply(arr1,arr2);
复制代码

ES6

[...arr1,...arr2]
arr1.push(...arr2)
复制代码

优化

预先判断arr一、arr2两个数组哪一个更大，而后使用大数组合并小数组，这样就减小了数组元素操做的次数！
复制代码

for in 和 for of

  • for in 是es5标准,遍历keyjquery

  • for of 是es6标准，遍历value,android

    for (var key in arr){
  	console.log(arr[key]);
  }

  for (var value of arr){
  	console.log(value);
  }
复制代码

for of若是要得到数组的键值，使用entries()方法

for(let i of b.entries()){
			console.log(i)
		}
复制代码

获取最大值

ES5

Math.max.apply(null,[14,3,77])
复制代码

ES6

Math.max(...[14,3,77])	
复制代码

获取数组并集、交集、差集

并集

let union = new Set([...a,...b]);
//Set{1,2,3,4}
复制代码

交集

let intersect = new Set([...a].filter(x=>b.has(x)));
//Set{2,3}
复制代码

差集

let diffenence = new Set([...a].filter(x=>!b.has(x)));
//Set{1}
复制代码

数组求和

ES5

for (var i = 0; i < array.length; i++){
sum += parseInt(array[i]);
}
复制代码

ES6

var a=[4,5,6,7,8,9];
		var b;
		a.reduce(function(m,n){
				b=m+n;
				return m+n;
		});
		console.log(b);
复制代码

闭包

保存即将要销毁的数据 闭包就是可以读取其余函数内部变量的函数。闭包就是将函数内部和函数外部链接起来的一座桥梁。 能够读取其余函数内部变量的函数，只要知足这一点的函数，均可以叫闭包 由于js做用域的问题，函数外部没法范文函数内部的值，只有经过巧妙的方法去实现(闭包) 解决方法，就是在本身的函数内部定义一个函数E，而后再讲函数E的值return回去 闭包不只能够读书函数内部的变量，还能让这些变量始终保持在内存中。因此内存消耗很大 因此不能滥用闭包，不然会形成性能问题ios

apply()是函数对象的一个方法，它应用某一对象的一个方法，用另外一个对象替换当前对象。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程