計算距離下次生日還有多少天
注意這里借助 moment 實現
getBirthdayFun(){
// 首先要獲取到今年的生日
let birthdayTime = moment().format('YYYY-') + '12-19'
// 通過時間戳 去判斷當前的時間戳是否大于今年生日的時間戳
if (moment().unix() >= moment(birthdayTime).unix()) {
// 如果大于的話，那么就在今年的生日上再添加一年，已達到獲取下次生日的時間
birthdayTime = moment(birthdayTime).add(1, 'y').format('YYYY-MM-DD')
}
// 這個直接通過計算 （下次生日的時間戳 - 當前日期的時間戳) / (60 * 60 * 24) 最后求出來的就是 XX 天
return parseInt(
(moment(birthdayTime).unix() - moment().unix()) / (60 * 60 * 24)
)
}
回到頂部
// 這里我把 vue3 的案例拿過來
const bindTop = () => {
// 方法一 這樣可以實現，但是效果不太行
window.scrollTo(0, 0)
document.documentElement.scrollTop = 0;
// 方法二 通過計時器去滾動 視覺上會絲滑一些，沒有太大的卡頓效果
const timeTop = setInterval(() => {
// 去控制他的滑行距離
document.documentElement.scrollTop = scrollTopH.value -= 50
// 當滑到頂部的時候記得清除計時器(*) 重點
if (scrollTopH.value <= 0) {
clearInterval(timeTop)
}
}, 10)
}
復制文本
const copyText = (text) => {
// clipboardData 在頁面上將需要的東西復制到剪貼板上
const clipboardData = window.clipboardData
if (clipboardData) {
clipboardData.clearData()
clipboardData.setData('Text', text)
return true
} else if (document.execCommand) { // 注意 document.execCommand 已棄用 但是有些瀏覽器依舊支持 用的時候記得看兼容情況
// 通過創建 dom 元素，去把要復制的內容拿到
const el = document.createElement('textarea')
el.value = text
el.setAttribute('readonly', '')
el.style.position = 'absolute'
el.style.left = '-9999px'
document.body.AppendChild(el)
el.select()
// 拷貝當前內容到剪貼板
document.execCommand('copy')
// 刪除 el 節點
document.body.removeChild(el)
return true
}
return false
}
copyText('hello!') // ctrl + v = copyText | true
復制代碼
防抖/節流
簡單介紹
- 防抖：指定時間內 頻繁觸發一個事件，以最后一次觸發為準
- 節流：指定時間內 頻繁觸發一個事件，只會觸發一次
應用場景有很多比如:
防抖是： input搜索，用戶在不斷輸入內容的時候，用防抖來減少請求的次數并且節約請求資源
節流：場景普遍就是按鈕點擊，一秒點擊 10 下會發起 10 次請求，節流以后 1 秒點再多次，都只會觸發一次
下面我們來實現
// 防抖
// fn 需要防抖的函數，delay 為定時器時間
function debounce(fn,delay){
let timer = null // 用于保存定時器
return function () {
// 如果timer存在 就清除定時器，重新計時
if(timer){
clearTimeout(timeout);
}
//設置定時器，規定時間后執行真實要執行的函數
timeout = setTimeout(() => {
fn.apply(this);
}, delay);
}
}
// 節流
function throttle(fn) {
let timer = null; // 首先設定一個變量，沒有執行定時器時,默認為 null
return function () {
if (timer) return; // 當定時器沒有執行的時候timer永遠是false,后面無需執行
timer = setTimeout(() => {
fn.apply(this, arguments);
// 最后在setTimeout執行完畢后再把標記設置為true(關鍵)
// 表示可以執行下一次循環了。
timer = null;
}, 1000);
};
}
過濾特殊字符
function filterCharacter(str){
// 首先設置一個模式
let pattern = new RegExp("[`~!@#$^&*()=：”“'。，、？|{}':;'%,\[\].<>/?~！@#￥……&*（）&;—|{ }【】‘；]")
let resultStr = "";
for (let i = 0; i < str.length; i++) {
// 主要通過 replace ，pattern 規則 去把字符替換成空 最后拼接在 resultStr
resultStr = resultStr + str.substr(i, 1).replace(pattern, '');
}
// 當循環結束的時候返回最后結果 resultStr
return resultStr;
}
// 示例
filterCharacter('gyaskjdhy12316789#$%^&!@#1=123,./[') // 結果:gyaskjdhy123167891123
常用正則判斷
// 校驗2-9位文字 不符合為 false 符合為 true
const validateName = (name) => {
const reg = /^[u4e00-u9fa5]{2,9}$/;
return reg.test(name);
};
// 校驗手機號
const validatePhoneNum = (mobile) => {
const reg = /^1[3,4,5,6,7,8,9]d{9}$/;
return reg.test(mobile);
};
// 校驗6到18位大小寫字母數字下劃線組成的密碼
const validatePassword = (password) => {
const reg = /^[a-zA-Z0-9_]{6,18}$/;
return reg.test(password);
};
初始化數組
// fill()方法 是 es6新增的一個方法 使用指定的元素填充數組,其實就是用默認內容初始化數組
const arrList = Array(6).fill()
console.log(arrList) // 此處打印的是 ['','','','','','']
將 RGB 轉換為十六進制
function getColorFun(r,g,b) {
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
}
getColorFun(178,232,55) // 這里輸出的是 #b2e837
檢測是否是一個函數
// 檢測是否是一個函數 其實寫法以后直接 isFunction 就好了，避免重復寫判斷
const isFunction = (obj) => {
return typeof obj === "function" && typeof obj.nodeType !== "number" && typeof obj.item !== "function";
};
檢測是否為一個安全數組
// 檢測是否為一個安全數組,若不是返回空數組 這里借助isArray 方法
const safeArray = (array) => {
return Array.isArray(array) ? array : []
}
檢測對象是否為一個安全對象
// 首先要去判斷 當前對象是否為有效對象
const isVaildObject = (obj) => {
return typeof obj === 'object' && !Array.isArray(obj) && Object.keys(obj).length
}
// 這里直接用上面的函數 如果有效就返回本身，無效就返回空對象
const safeObject = obj => isVaildObject(obj) ? obj : {}
