實戰
時間
js 格式化時間
<script type="text/javascript">function formatDate(date) { let year = date.getFullYear(); let month = String(date.getMonth() + 1).padStart(2, '0'); // getMonth() 返回的月份是從0開始的，所以要加1，并使用padStart確保總是兩位數 let day = String(date.getDate()).padStart(2, '0'); // 使用padStart確保總是兩位數 return `${year}-${month}-${day}`; } // 使用示例 let date = new Date(); // 你可以傳遞任何你想要的日期對象 console.log(formatDate(date)); // 輸出格式為 "YYYY-MM-DD" 的日期字符串</script>判斷img圖片是否存在，不存在給默認
<img src="${Config.carouselData[i].ext.avatar}" onerror="javascript:this.src='https://game.gtimg.cn/images/fz/cp/a20231206fsn0o2/tx_img.png'" alt="" />
字符串中間“***”代替
hideString: function (name) {let newStr = '';if (name){if (name.length <= 2) {newStr = name + '*';} else if (name.length >= 3 && name.length <= 4) {let char = '***';newStr = name.substr(0, 1) + char + name.substr(-1, 1);} else if (name.length > 4) {let char = '***';newStr = name.substr(0, 2) + char + name.substr(-2, 2);} else {newStr = name;}}else {newStr = "**";}return newStr;},是否是Android系統
isAndroid: function () {return /android/i.test(window.navigator.userAgent.toLowerCase());
},
HTML 標簽轉實體
htmlEncode: function (str) {var simpleStr = str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/'/g, ''').replace(/"/g, '"');return simpleStr;
},
HTML實體 轉標簽
htmlDecode: function (str) {var simpleStr = str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/'/g, "'").replace(/"/g, '"');return simpleStr;
}
json轉對象
JSON.parse(obj)
對象轉JSON
JSON.stringify()
JSON.stringify()的幾種妙用
- 判斷數組是否包含某對象，或者判斷對象是否相等
//判斷數組是否包含某對象
let data = [{name:'echo'},{name:'聽風是風'},{name:'天子笑'},],val = {name:'天子笑'};
JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1;//true//判斷兩數組/對象是否相等
let a = [1,2,3],b = [1,2,3];
JSON.stringify(a) === JSON.stringify(b);//true
- 讓localStorage/sessionStorage可以存儲對象
localStorage/sessionStorage默認只能存儲字符串，而實際開發中，我們往往需要存儲的數據多為對象類型，那么這里我們就可以在存儲時利用json.stringify()將對象轉為字符串，而在取緩存時，只需配合json.parse()轉回對象即可。
//存
function setLocalStorage(key,val){window.localStorage.setItem(key,JSON.stringify(val));
};
//取
function getLocalStorage(key){let val = JSON.parse(window.localStorage.getItem(key));return val;
};
//測試
setLocalStorage('demo',[1,2,3]);
let a = getLocalStorage('demo');//[1,2,3]
3. 實現對象深拷貝
實際開發中，如果怕影響原數據，我們常深拷貝出一份數據做任意操作，其實使用JSON.stringify()與JSON.parse()來實現深拷貝是很不錯的選擇。
//深拷貝
function deepClone(data) {let _data = JSON.stringify(data),dataClone = JSON.parse(_data);return dataClone;
};
//測試
let arr = [1,2,3],_arr = deepClone(arr);
arr[0] = 2;
console.log(arr,_arr)//[2,2,3] [1,2,3]
JSON.stringify()與toString()的區別
這兩者雖然都可以將目標值轉為字符串，但本質上還是有區別的，比如
let arr = [1,2,3];
JSON.stringify(arr);//'[1,2,3]'
arr.toString();//1,2,3
其次，JSON.stringify()的受眾更多是對象，而toString()雖然可以將數組轉為字符串，但并不能對{name:‘天子笑’}這類對象實現你想要的操作，它的受眾更多是數字。
那么大概整理這么多了，后面工作中遇到再添加吧。
獲取url
獲取url參數
function queryURLParams(URL) {var url = URL.split("?")[1];var obj = {}; // 聲明參數對象var arr = url.split("&"); // 以&符號分割為數組for (var i = 0; i < arr.length; i++) {var arrNew = arr[i].split("="); // 以"="分割為數組obj[arrNew[0]] = arrNew[1];}return obj;
}
獲取去重后的url
function getUniqueUrl(url) { // 解析URL的查詢字符串部分 const queryParams = new URLSearchParams(url.split('?')[1] || ''); // 創建一個Map來自動去重 const uniqueParams = new Map(queryParams.entries()); // 將去重后的參數轉換回字符串 const uniqueQueryString = new URLSearchParams(uniqueParams).toString(); // 如果有參數，則重新構建URL；否則，返回原始URL（不包含查詢字符串） return uniqueQueryString ? `${url.split('?')[0]}?${uniqueQueryString}` : url;
} // 使用示例
const url = location.href;
const uniqueUrl = getUniqueUrl(url); console.log(uniqueUrl);
獲取指定的url參數的值
function getParams(param){try{if (!param) {return '參數不能為空';}// 創建 URLSearchParams 對象并傳入要處理的 URLconst params = new URLSearchParams(window.location.search);// 通過 get() 方法獲取特定參數的值const value = params.get(param); // 'paramName'為需要獲取的參數名稱//console.log(value);return value;}catch (e){console.log(e);}}console.log(getParams('a'));
url解碼與編碼
/**
isTrue true 解碼，false 轉碼*/
function urlCode(url,isTrue = true){let urls = "";if (isTrue) {urls = decodeURIComponent(uniqueUrl); }else{urls = encodeURIComponent(uniqueUrl); }return urls;
}
倒計時為0是才能點擊
css樣式
.disabled {pointer-events: none; /* 禁止點擊 */}
js文件
$("#checkBigPag").click( function(event){var i=3;$(".clock1").html("3");var timehwnd=setInterval(function () {i--;if(i <= 0){$('#bigRed').removeClass('disabled'); // 移除 disabled 類名，表示可再次點擊$(".clock1").html("0");clearInterval(timehwnd);}else{$('#bigRed').addClass('disabled');$(".clock1").html(""+i+"");}},1000);} );
正則
手機號（以中國大陸的手機號碼為例，支持13、14、15、16、17、18、19開頭的號碼）：
/^(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$/
郵箱：
/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
網址：
/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/
用戶名（以字母或數字開頭，可以包含字母、數字、下劃線，長度在6~18位之間）：
/^[a-zA-Z0-9_]{6,18}$/
身份證（15位或18位，18位身份證包含校驗碼）：
/^(^[1-9]\d{5}(?:\d{18}|?:\d{15})$)/
數字：
/^\d+$/
字母：
/^[a-zA-Z]+$/
)
的使用和示例)
)
、選擇器、事件、動畫)
