當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
工作常用的工具类JS+reset.css
生活随笔
收集整理的這篇文章主要介紹了
工作常用的工具类JS+reset.css
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
var tools = (function() {var _urlIndex = '請求的域名'/*** POST 請求*/function doPost(url, params, callback, errorCallback) {url = _urlIndex + url;$.ajax({type: "POST",url: url,dataType: "json",contentType: "application/x-www-form-urlencoded;charset=UTF-8",// data: JSON.stringify(params), application/json;charset=UTF-8data:params,success: function(responseJson) {callback(responseJson);},error: errorCallback});};/*** GET 請求*/function doGet(url, params, callback) {url = _urlIndex + url;$.ajax({url: url,type: 'GET',data: params,dataType: 'json',success: function(respondeData) {callback(respondeData);}});};// 把參數添加到url上function addParamsForUrl(url, params) {if (typeof params !== "object") return urlfor (var key in params) {if (params.hasOwnProperty(key)) {if (params[key] && params[key] != 'undefined') {if (url.indexOf('?') != -1) {url += '&' + '' + key + '=' + params[key] || '' + ''} else {url += '?' + '' + key + '=' + params[key] || '' + ''}}}}return url};// 判斷是否為空function isEmpty(val) {if (val == null || typeof(val) == 'undefined' ||(typeof(val) == 'string' && (trim(val) == '' || trim(val) == 'null'))) {return true;} else {return false;}};// 清除前后空格function trim(val) {return val.replace(/(^\s*)|(\s*$)/g, '');};// 清除所有空格let str1=' 1 23 1233 123 123 'str1 = str1.replace(/\s*/g,"");// 清除左邊空格 str1 = str1.replace(/^\s*/g,"")// 清除右邊空格str1 = str1.replace(/(\s*$)/g,"")// 大于等于0，整數5位，可以包含2位小數，不能是0.0 0.00// (?!^0\.0?0$) 正向否定查找 僅僅當沒有0.0 0.00匹配后面的邏輯 簡單講就是過濾掉0.0 0.00這兩個條件，在進行后面的查找const decReg=/(?!^0\.0?0$)^(0|([1-9]\d{0,4}))(\.\d{1,2})?$/// 字符串按照多少位進行空格分隔// 匹配\w{4}，僅當后面跟著\w \w 字母數字下劃線let str='1231232132312323213213'str = str.replace(/(\w{4})(?=\w)/g, '$1 ')// 判斷是安卓手機還是蘋果手機function iosOrAndroid() {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終端if (isiOS == true) {return isiOS;} else {return isAndroid;}};// 驗證身份證function isIdentityCardNo(card) {var pattern = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;return pattern.test(card);};//號碼驗證正則function regPhone(phone) {var regPhone = /^1[3|4|5|6|7|8][0-9]{9}$/;return regPhone.test(phone)};/*** 手機號碼驗證運營商* 移動：134(0 - 8) 、135、136、137、138、139、147、150、151、152、157、158、159、178、182、183、184、187、188、198 * 聯通：130、131、132、145、155、156、175、176、185、186、166* 電信：133、153、173、177、180、181、189、199 * */function regPhoneType(phone) {var $CM = /^((13[456789])|(147)|(15[012589])|(178)|(18[2348])|(198))\d{8}$/g,$CU = /^((13[012])|(145)|(15[56])|(166)|(17[0156])|(18[56]))\d{8}$/g,$CT = /^((133)|(153)|(17[37])|(18[019])|(199))\d{8}$/g;if ($CM.test(phone)) {return { type: 'zgyd', name: '中國移動' }}if ($CU.test(phone)) {return { type: 'zglt', name: '中國聯通' }}if ($CT.test(phone)) {return { type: 'zgdx', name: '中國電信' }}return { type: null, name: '' }};// 郵箱驗證正則function regEmail(email) {var regEmail = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;return regEmail.test(email)};//從 canvas 提取圖片 base64 imagefunction convertCanvasToImage(canvas) {//新Image對象，可以理解為DOM//alert(typeof(canvas));var image = new Image();// canvas.toDataURL 返回的是一串Base64編碼的URL，當然,瀏覽器自己肯定支持// 指定格式 PNGimage.src = canvas.toDataURL("image/png");return image;};// 把base64 轉換成文件對象function dataURLtoFile(base64Str, fileName) {var arr = base64Str.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), //對base64串進行操作，去掉url頭，并轉換為bytelen = bstr.length,ab = new ArrayBuffer(len), //將ASCII碼小于0的轉換為大于0u8arr = new Uint8Array(ab);while (len--) {u8arr[len] = bstr.charCodeAt(len)};// 創建新的 File 對象實例[utf-8內容，文件名稱或者路徑，[可選參數，type：文件中的內容mime類型]]return new File([u8arr], fileName, {type: mime})};/*** 自定義提示框* 顯示信息用于請求回調的錯誤信息顯示* 需要檢查reset.css中是否有tipsBox樣式* @param {*} str */function showMsg(str, time) {time = time || 1500;var timer1 = null,timer2 = null;// 判斷是否已經存在tipsbox元素，如果存在就不用添加了var oldtipsbox = document.getElementById('tipsbox');if (oldtipsbox != null) {clearTimeout(timer1);oldtipsbox.getElementsByClassName('tips')[0].innerHTML = str;oldtipsbox.style.display = "flex";timer1 = window.setTimeout(function() {oldtipsbox.style.display = "none";}, time)} else {clearTimeout(timer2);var fragment = document.createDocumentFragment();var tipsbox = document.createElement('div');var tips = document.createElement('div');tipsbox.setAttribute("class", "tipsbox");tipsbox.setAttribute("id", "tipsbox");tips.setAttribute("class", "tips");tips.innerHTML = str;tipsbox.appendChild(tips);fragment.appendChild(tipsbox);// 把文檔碎片添加到body中document.body.appendChild(fragment);// 默認顯示的時間timer2 = window.setTimeout(function() {tipsbox.style.display = "none";}, time)}};/*** 自定義顯示loading*/function showLoading() {var oldLoadingBox = document.getElementById("loadingBox");if (oldLoadingBox != null) {oldLoadingBox.style.display = 'flex';} else {var fragment = document.createDocumentFragment();var loadingBox = document.createElement('div');loadingBox.setAttribute('class', 'loadingBox');loadingBox.setAttribute('id', 'loadingBox');var containerStr = '<div class="spinner">' +'<div class="spinner-container container1">' +'<div class="circle1"></div>' +'<div class="circle2"></div>' +'<div class="circle3"></div>' +'<div class="circle4"></div>' +'</div>' +'<div class="spinner-container container2">' +'<div class="circle1"></div>' +'<div class="circle2"></div>' +'<div class="circle3"></div>' +'<div class="circle4"></div>' +'</div>' +'<div class="spinner-container container3">' +'<div class="circle1"></div>' +'<div class="circle2"></div>' +'<div class="circle3"></div>' +'<div class="circle4"></div>' +'</div>' +'</div>';loadingBox.innerHTML = containerStr;loadingBox.style.display = 'flex';fragment.appendChild(loadingBox);// 把文檔碎片添加到body中document.body.appendChild(fragment);}};/*** 隱藏loading*/function hideLoading() {var loadingBox = document.getElementById('loadingBox');loadingBox.style.display = 'none'};// 判斷是否是微信瀏覽器環境function isWeiXin() {var ua = window.navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == 'micromessenger' || ua.match(/_SQ_/i) == '_sq_') {return true;} else {return false;}};/*** 獲取臨時URL地址，用于圖片回顯*/function getObjectURL(file) {var url = null;if (window.createObjectURL != undefined) {// 正常瀏覽器url = window.createObjectURL(file)} else if (window.URL != undefined) {// mozilla firefoxurl = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) {// webkit chromeurl = window.webkitURL.createObjectURL(file);}return url};/*** 時間格式化*/function dateFormat(value, format) {let nowDate = new Date(value),year = nowDate.getFullYear(),month = (nowDate.getMonth() + 1).toString().padStart(2, "0"),day = (nowDate.getDate()).toString().padStart(2, "0"),ymd = null;if (format == "yyyy-mm-dd") {ymd = year + "-" + month + "-" + day;} else if (format == "yyyy-mm") {ymd = year + "-" + month;} else {ymd = year + "年" + month + "月" + day + "日";}return ymd};/*** *獲取cookie*/function getCookie(c_name) {var c_start = null,c_end = null;if (document.cookie.length > 0) {c_start = document.cookie.indexOf(c_name + "=")if (c_start != -1) {c_start = c_start + c_name.length + 1c_end = document.cookie.indexOf(";", c_start)if (c_end == -1) c_end = document.cookie.lengthreturn unescape(document.cookie.substring(c_start, c_end))}}return ""};/*** 設置cookie*/function setCookie(c_name, value, expiredays) {var exdate = new Date();exdate.setDate(exdate.getDate() + expiredays);document.cookie = c_name + "=" + escape(value) +((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()) + ';path=/';};/*** 獲取當前頁面導航參數值*/function getQueryString(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);if (r != null) return unescape(r[2]);return null;};function appendParams(url, params) {if (params) {var baseWithSearch = url.split('#')[0];var hash = url.split('#')[1];for (var key in params) {var attrValue = params[key];if (attrValue !== undefined) {var newParam = key + "=" + attrValue;if (baseWithSearch.indexOf('?') > -1) {var oldParamReg = new RegExp('^' + key + '=[-%.!~*\'\(\)\\w]*', 'g');if (oldParamReg.test(baseWithSearch)) {baseWithSearch = baseWithSearch.replace(oldParamReg, newParam);} else {baseWithSearch += "&" + newParam;}} else {baseWithSearch += "?" + newParam;}}}if (hash) {url = baseWithSearch + '#' + hash;} else {url = baseWithSearch;}}return url;};return {doPost,doGet,isEmpty,iosOrAndroid,isIdentityCardNo,regPhone,regPhoneType,convertCanvasToImage,dataURLtoFile,showMsg,showLoading,hideLoading,addParamsForUrl,isWeiXin,getObjectURL,regEmail,dateFormat,setCookie,getCookie,getQueryString,appendParams}
})();
// 初始化樣式，包含上述工具中的loading 和 showmsg 樣式html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
div,
section,
span,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
a,
img,
i,
em,
s,
del,
button,
input,
textarea,
th,
td {box-sizing: border-box;outline: 0;padding: 0;margin: 0;border: 0;-webkit-tap-highlight-color: transparent
}body {width: 100%;font-style: normal;font-family: "PingFangSC-Medium", "Microsoft YaHei", "微軟雅黑", "PingFang-SC", "Arial", "Helvetica", "sans-serif";font-size: .28rem;
}small {font-size: 12px
}h1 {font-size: 18px
}h2 {font-size: 16px
}h3 {font-size: 14px
}h4,
h5,
h6 {font-size: 100%
}ul,
ol {list-style: none
}a {display: block;text-decoration: none;background-color: transparent
}a:hover,
a:active,
a:focus {outline-width: 0;text-decoration: none;
}table {border-collapse: collapse;border-spacing: 0
}hr {border: 0;height: 1px
}img {border-style: none
}img:not([src]) {display: none
}svg:not(:root) {overflow: hidden
}html {-webkit-touch-callout: none;-webkit-text-size-adjust: 100%
}input,
textarea,
button,
a {-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}input,
textarea {border: 0 none;outline: 0 none;display: block;width: 100%;height: 100%
}input[type='text'],
input[type='search'],
input[type="number"],
input[type='text']:focus,
input[type="number"]:focus,
input[type='text']:hover,
input[type="number"]:hover,
input[type='text']:checked,
input[type="number"]:checked,
textarea {text-decoration: none;-webkit-appearance: none;background: transparent
}input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {color: #7A818C;font-size: 14px
}input:-moz-placeholder,
textarea::-webkit-input-placeholder {color: #7A818C;font-size: 14px
}input::-moz-placeholder,
textarea::-webkit-input-placeholder {color: #7A818C;font-size: 14px
}input::-ms-input-placeholder,
textarea::-webkit-input-placeholder {color: #7A818C;font-size: 14px
}article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {display: block
}audio,
canvas,
progress,
video {display: inline-block
}audio:not([controls]),
video:not([controls]) {display: none;height: 0
}progress {vertical-align: baseline
}mark {background-color: #ff0;color: #000
}sub,
sup {position: relative;font-size: 75%;line-height: 0;vertical-align: baseline
}sub {bottom: -0.25em
}sup {top: -0.5em
}button,
input,
select,
textarea {font-size: 100%;outline: 0
}button,
input {overflow: visible
}button,
select {text-transform: none
}textarea {overflow: auto
}button,
html [type="button"],
[type="reset"],
[type="submit"] {-webkit-appearance: button
}button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {border-style: none;padding: 0
}button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {outline: 1px dotted ButtonText
}[type="checkbox"],
[type="radio"] {box-sizing: border-box;padding: 0
}[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {height: auto
}[type="search"] {-webkit-appearance: textfield;outline-offset: -2px
}[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {-webkit-appearance: none
}::-webkit-input-placeholder {color: inherit;opacity: .54
}::-webkit-file-upload-button {-webkit-appearance: button;font: inherit
}.clearfix:after {display: block;height: 0;content: "";clear: both
}/* 提示框樣式 */
.tipsbox {-webkit-box-align: center;align-items: center;-webkit-box-pack: center;justify-content: center;display: -webkit-box;display: flex;width: 100%;height: 100%;position: fixed;top: 0;left: 0;bottom: 0;z-index: 90000
}.tipsbox .tips {padding: .4rem .3rem;background: rgba(0, 0, 0, 0.7);border-radius: 12px;color: #fff;font-size: .28rem;max-width: 6.0rem;line-height: .6rem;text-align: center
}/* flex 公用樣式 */
.d-flex {display: -webkit-box;display: flex;
}.flex-1 {-webkit-box-flex: 1;flex: 1;
}.flex-column {-webkit-box-orient: vertical !important;-webkit-box-direction: normal !important;flex-direction: column !important;
}.flex-row {-webkit-box-orient: horizontal !important;-webkit-box-direction: normal !important;flex-direction: row !important;
}.flex-wrap {flex-wrap: wrap !important;
}.justify-content-start {-webkit-box-pack: start !important;justify-content: flex-start !important;
}.justify-content-end {-webkit-box-pack: end !important;justify-content: flex-end !important;
}.justify-content-center {-webkit-box-pack: center !important;justify-content: center !important;
}.justify-content-between {-webkit-box-pack: justify !important;justify-content: space-between !important;
}.align-items-center {-webkit-box-align: center !important;align-items: center !important;
}.align-items-stretch {-webkit-box-align: stretch !important;align-items: stretch !important;
}/* loading樣式區域 */
.loadingBox {position: fixed;top: 0;left: 0;bottom: 0;right: 0;z-index: 10001;width: 100%;background: rgba(0, 0, 0, 0.4);/* TWEENER - IE 10 */display: -webkit-box;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-box-pack: center;-moz-justify-content: center;justify-content: center;-webkit-box-align: center;-moz-align-items: center;align-items: center;
}.loadingBox .loding-tips {line-height: .9rem;font-size: .32rem;color: #fff;
}.spinner {width: 30px;height: 30px;position: relative;
}.spinner .spinner-container {position: absolute;width: 100%;height: 100%;
}.container1>div,
.container2>div,
.container3>div {width: 8px;height: 8px;background-color: #F13115;border-radius: 100%;position: absolute;-webkit-animation: bouncedelay 1.2s infinite ease-in-out;animation: bouncedelay 1.2s infinite ease-in-out;-webkit-animation-fill-mode: both;animation-fill-mode: both;
}.container2 {-webkit-transform: rotateZ(45deg);transform: rotateZ(45deg);
}.container2 .circle1 {-webkit-animation-delay: -1.1s;animation-delay: -1.1s;
}.container3 {-webkit-transform: rotateZ(90deg);transform: rotateZ(90deg);
}.container3 .circle1 {-webkit-animation-delay: -1s;animation-delay: -1s;
}.circle1 {top: 0;left: 0;
}.circle2 {top: 0;right: 0;
}.circle3 {right: 0;bottom: 0;
}.circle4 {left: 0;bottom: 0;
}.container1 .circle2 {-webkit-animation-delay: -0.9s;animation-delay: -0.9s;
}.container2 .circle2 {-webkit-animation-delay: -0.8s;animation-delay: -0.8s;
}.container3 .circle2 {-webkit-animation-delay: -0.7s;animation-delay: -0.7s;
}.container1 .circle3 {-webkit-animation-delay: -0.6s;animation-delay: -0.6s;
}.container2 .circle3 {-webkit-animation-delay: -0.5s;animation-delay: -0.5s;
}.container3 .circle3 {-webkit-animation-delay: -0.4s;animation-delay: -0.4s;
}.container1 .circle4 {-webkit-animation-delay: -0.3s;animation-delay: -0.3s;
}.container2 .circle4 {-webkit-animation-delay: -0.2s;animation-delay: -0.2s;
}.container3 .circle4 {-webkit-animation-delay: -0.1s;animation-delay: -0.1s;
}@-webkit-keyframes bouncedelay {0%,100%,80% {-webkit-transform: scale(0);}40% {-webkit-transform: scale(1);}
}@keyframes bouncedelay {0%,100%,80% {transform: scale(0);-webkit-transform: scale(0);}40% {transform: scale(1);-webkit-transform: scale(1);}
}
// find() 方法返回數組中滿足提供的測試函數的第一個元素的值。否則返回 undefined。// 對比一個數組中是否包含了另一個數組的值var A =[1,2,3,4,5]var B =[2,3,4,5,56]A.find(item=>B.includes(item)) //如果沒有相同項，結果是undefined
總結
以上是生活随笔為你收集整理的工作常用的工具类JS+reset.css的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mfc之IDC,IDI,IDD等的含义
- 下一篇： glibc-2.15.tar.gz