js监听滚动事件
window.onscroll=function(){ getScrollTop(); }
function getScrollTop() { console.log(document.documentElement.scrollTop) }
获取一个元素到视图顶部的距离
var height = $(this).offset().top;
向上滚动相应的距离
$('html,body').animate({scrollTop:height})
页面跳转带参数传值
页面参数传值的作用就是从一个页面跳到另一个页面，比方说从标题跳到详情，需要传递参数到详情页面再调这个，可以使用这个方法进行传值，然后再请求接口。
使用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);
判断是否在微信浏览器打开
有时候我们写的前端页面，需要在不同的终端中显示，比如微信浏览器、h5、WebApp，不用的终端需要不同的显示方法，比如顶部导航栏在微信浏览器内是不需要显示的，因为用户体验不太友好，就可以使用这个方法进行隐藏。
function is_weixn() {
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == "micromessenger") {
//TODO
} else {
//TODO
}
}
判断是Android还是IOS
写好的网页需要在不同终端显示，但h5在苹果和安卓有些显示效果是不同的，比如input标签和font-weight属性。因为苹果会将有些属性进行处理，所以调用这个方法可以对有些显示不同的标签进行校正，以达到相同的显示结果。
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)
优化
预先判断arr1、arr2两个数组哪个更大，然后使用大数组合并小数组，这样就减少了数组元素操作的次数！
for in 和 for of
-
for in 是es5标准,遍历key
-
for of 是es6标准，遍历value,
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回去 闭包不仅可以读书函数内部的变量，还能让这些变量始终保持在内存中。所以内存消耗很大 所以不能滥用闭包，否则会造成性能问题
