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回去 閉包不僅可以讀書函式內部的變數，還能讓這些變數始終保持在記憶體中。所以記憶體消耗很大 所以不能濫用閉包，否則會造成效能問題