Front-end summary of common tools

js:

// Class 1 type detection
// string
function isString(o){
return Object.prototype.toString.call(o).slice(8,-1) === 'String'
}
//digital
function isNumber(o){
return Object.prototype.toString.call(o).slice(8,-1) === 'Number'
}
// Objects
function isObject(o){
return Object.prototype.toString.call(o).slice(8,-1) === 'Object'
}
// Array
function isArray(o){
return Object.prototype.toString.call(o),sllice(8,-1) === 'Array'
}
//cellphone type
function mobileType(){
let u = navigator.userAgent;
if(u.indexOf('Android') > -1 || u.indexOf('Linux' > -1)){
return 'Android'
}
else if(u.indexOf('iPhone') > -1){
return 'iPhone'
}
else if(u.indexOf('iPad') > -1){
return 'iPad'
}
}
// string detection
function strCheck(str,type){
switch(type){
case 'phone': // phone number
return /^1[3|4|5|6|7|8|][0-9]{9}$/.test(str);
case 'tel': // landline
return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);
case 'card': // ID
return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(str);
case 'pwd':
return /^[a-zA-z]\w{5,17}$/.test(str);
case 'email':
return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);
case 'number':
return /^[0-9]{6}$/.test(str)
}
}

// class Date
//format
function timeFormat(obj){
let temDate = obj.date || new Date(),format = obj.format || "-";
// let y = temDate.getFullYear(),
// m = temDate.getMonth() + 1 > 9 ? temDate.getMonth() + 1 : '0' + temDate.getMonth() + 1,
// d = temDate.getDate() > 9 ? temDate.getDate() : '0' + temDate.getDate(),
// h = temDate.getHours() > 9 ? temDate.getHours() : '0' + temDate.getHours(),
// I temDate.getMinutes => 0? temDate.getMinutes '0' + temDate.getMinutes,
// s = temDate.getSeconds() > 9 ? temDate.getSeconds() : '0' + temDate.getSeconds();
let y = temDate.getFullYear(),
m = compareNine(temDate.getMonth() + 1),
d = compareNine(temDate.getDate()),
h = compareNine(temDate.getHours()),
mi = compareNine (temDate.getMinutes ()),
s = compareNine(temDate.getSeconds());
return y + format + m + format + d + " " + h + ":" + mi + ":" + s
}
function compareNine(val){
return val > 9 ? val : '0' + val
}
// compare the size Date
function timeCompare(one,two){
let oneDate = new Date(Date.parse(one));
let twoDate = new Date(Date.parse(two));
return oneDate<twoDate
}
// week ago
function beforeWeekDate(date,format){
let temDate = date || new Date();
if(!(temDate instanceof Date)){
temDate = new Date(temDate.replace(/-/g, '/'));
}
let temDateTime = temDate.getTime(),
weekDate = new Date(temDateTime - 7*24*60*60*1000);
return timeFormat(weekDate,format)
}
// array class
// determine whether an element within the array
function contains(str,arr){
return arr.indexOf(str) > -1
}
// package map
function myMap(arr,fn,thisObj){
let scope = thisObj || window,
returnArray = [];
for(let i=0,j=arr.length;i<j;i++){
let res = fn.call(scope,arr[i],i,this);
if(res != null){
returnArray.push(res)
}
}
return returnArray;
}
// each package
function myEach(arr,fn){
let returnArray = [],_fn = fn || Function;
let args = Array.prototype.slice.call(arguments,1);
for(let i=0,j=arr.length;i<j;i++){
let res = fn.apply(arr,[arr[i],i].concat(args))
if(res != null){
returnArray.push(res)
}
}
}
// Sort Descending 1 2 3 Random ascending own 4
function mySort(arr,type){
let arrLen = arr.length;
if(arrLen === 0 || arrLen === 1){
return arr;
}
return arr.sort(function(a,b){
switch(type){
case 1:
return a - b;
case 2:
return b - a;
case 3:
return Math.random() - 0.5;
default:
return arr
}
})
}
// deduplication
function myUinique(arr){
if(Array.hasOwnProperty('from')){
return Array.from(new Set(arr))
}
else{
let a = [],o = {};
for(let i=0,j=arr.length;i<j;i++){
if(!o[arr[i]]){
o[arr[i]] = true;
a.push(arr[i])
}
}
return a
}
}
// maximum
function myMax(arr){
return Math.max.apply(null,arr)
}
// minimum
function myMin(arr){
return Math.min.apply(null,arr)
}
// array of classes -> Array
function arrLikeToArr(arrLike){
let arr = [];
if(Array.isArray(arrLike)){
arr = arrLike
}
else{
arr = Array.prototype.slice.call(arrLike)
}
return arr;
}

// string class
// go to space after all 1 2 3 before and after the first four
function myTrim(str,tp){
let type = tp || 1;
switch(type){
case 1:
return str.replace(/s+/g,'')
case 2:
return str.replace(/(^\s*)|(\s*$)/g,'')
case 3:
return str.replace(/(^\s*)/g,'')
case 4:
return str.replace(/(\s*$)/g,'')
}
}
// Changes in case 1: Initial Capitals 2: 3 home mother lowercase: case conversion 4: 5 in all caps: All lowercase
function changeCase(str,tp){
let type = tp || 1;
switch(type){
case 1:
return str.replace(/\b\w+\b/g,function(word){
return word.substring(0,1).toUpperCase() + word.substring(1).toLowerCase()
})
case 2:
return str.replace(/\b\w+\b/g/g,function(word){
return word.substring(0,1).toLowerCase() + word.substring(1).toUpperCase()
})
case 3:
return str.split('').map(function(word){
if(/[a-z]/.test(word)){
return word.toUpperCase()
}
else{
return word.toLowerCase()
}
}).join('');
case 4:
return str.toUpperCase();
case 5:
return str.toLowerCase();
}
}
//password strength
function pwdCheck(str){
let LV = 0;
if(str.length < 6){
return Lv;
}
if(/[0,9]/.test(str)){
return LV ++
}
if(/[a-z]/.test(str)){
return LV ++
}
if(/[A-Z]/.test(str)){
return LV ++
}
if(/[\.|-|_]/.test(str)){
return LV ++
}
return LV ++
}
// number category
//random number
function randomNumber(min,max){
if(arguments.length === 2){
return Math.floor(min + Math.random() * (max + 1 - min))
}
else{
return null
}
}
// zero-padding position: 1 before the returned data length 2 _length
function addZero(param,_length,position){
let len = param + "",
dataArr = len.split(""),
lenHandle = dataArr.length,
num = _length - lenHandle;
if(num<0){
return param;
}
for (let i = 0; i < num; i++) {
if(position === 1){
dataArr.unshift("0")
}
else if(position === 2){
dataArr.push("0")
}
}
let nowData = dataArr.join("");
return nowData;
}

// storage class
function setSession(name,val){
return sessionStorage.setItem(name,val)
}
function getSession(name){
return sessionStorage.getItem(name)
}
function setCookie(name,val,time){
let setting = arguments[0];
if(Object.prototype.toString.call(setting).slice(8,-1) === 'Object'){
for(let i in setting){
let oDate = new Date();
oDate.setDate(oDate.getDate() + time);
document.cookie = name + '=' + val + ';expires=' + oDate;
}
}
else{
let oDate = new Date();
oDate.setDate(oDate.getDate() + time);
document.cookie = name + '=' + val + ';expires=' + oDate;
}
}
function getCookie(name){
let arr = document.cookie.split(';');
for(let i=0,j=arr.length;i<j;i++){
let arr2 = arr[i].split('=');
if(arr2[0] === name ){
return arr2[1]
}
}
}

// Image Stabilization
// throttle
// Listen input box
// Countdown
// Bind event, monitoring, unbundling
// stop the event bubbling bubbling prevents the default behavior
 
 
css
*{
padding:0;
margin:0
}
html,body{
-webkit-text-size-adjust: 100%;
width: 100%;
height: 100%;
font-family: "Microsoft elegant black."
}
acticle,aside,footer,header,nav,section{
display: block
}
ul,li{
list-style: none;
}
a{
text-decoration: none
}


button,
input,
OPTGROUP,
select,
textarea {
font-family: sans-serif;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/ * Do not select text * /

.usn{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}



textarea {
overflow: auto;
}

.box-sizing-border{
box-sizing: border-box
}
.box-sizing-content{
box-sizing: content-box
}

.display-block{
display: block
}
.display-inline{
display: inline;
}
.display-inline-block{
display:inline-block
}
.display-flex{
display:flex;
}

.shadow-5-111{
box-shadow:0 0 5px #111;
}
.shadow-10-111{
box-shadow:0 0 10px #111;
}
.shadow-5-eee{
box-shadow:0 0 5px #eee;
}
.shadow-10-eee{
box-shadow:0 0 10px #eee;
}
/ * Content is centered * /
.content-center{
display:flex;
justify-content: center;
align-items:center
}
/ * The remaining three sides of the triangular side transparent color * /
.triangle{
width:0;
height:0;
border-style:solid;
border-width: 20px;
border-color: red yellow green lightblue
}


.fz-12{
font-size: 12px;
}
.fz-14{
font-size: 14px;
}
.fz-16{
font-size: 16px;
}


.color-red{
color:red;
}
.color-green{
color:green;
}
.color-white{
color:white;
}
.color-black{
color:black
}
.color-blue{
color:blue
}
.color-gray{
color:gray;
}

.bg-eee {
background:#eee;
}
.bg-111{
background:#111;
}
.bg-fff {
background: #fff;
}


.margin-10{
margin:10px
}
.margin-20{
margin:20px
}
.margin-30{
margin:30px;
}
.margin-40{
margin:40px;
}

.padding-10{
padding:10px
}
.padding-20{
padding:20px
}
.padding-30{
padding:30px;
}
.padding-40{
padding:40px;
}

.input-36{
width:100%;
height:38px
}
.input-20{
width:100%;
height:20px
}


.div-20{
height: calc( 100vh - 20px);
}

.div-40{
height: calc( 100vh - 40px);
}

.div-100{
height: calc( 100vh - 100px);
}

.div-200{
height: calc( 100vh - 200px);
}
/ * Positioning * /
.position-fixed{
position:fixed
}
.position-absolute{
position:absolute
}
.position-relative{
position: relative;
}

/ * Float * /
.fl{
float: left;
}
.fr{
float:right;
}
/ * Clear float * /
.clear-fix:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
/ * Input is hidden behind the number icon * /

input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* placeholder */

input::-webkit-input-placeholder{
color:#c0c3cc;
}
input::-moz-placeholder{
color:#c0c3cc;
}
input:-ms-input-placeholder{
color:#c0c3cc;
}

/ * Input is pwd ie remove icons * /
::-ms-clear,::-ms-reveal{display:none;}

/* loading层 */
.cover{
position:fixed;
height: 100%;
width:100%;
top:0;
left:0;
display: flex;
justify-content: center;
align-items: center;
}



/ * Wrap * /
/ * Does not wrap * /
.word-none{
word-wrap: normal;
word-wrap: nowrap;
}
/ * Wrap * /
.word-break{
white-space: normal;
word-wrap: break-word;
word-break: break-all
}
/ * Exceeding the excess width ellipsis custom * /
.wote {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/ * Style Mouse * /
.cursor-pointer{
cursor:pointer
}
.cursor-help{
cursor:help
}
.cursor-default{
cursor:default
}
.cursor-move{
cursor:move
}
/ * Default scroll bar style modifications ie9 google Firefox browsers effective high-* /
/*::selection {background: #D03333;color: white;text-shadow: none;}
::-webkit-scrollbar-track-piece{width:10px;font-style: italic;">::-webkit-scrollbar{width:10px;height:6px}
::-webkit-scrollbar-thumb{height:50px;}
::-webkit-scrollbar-thumb:hover{background:#cc0000}*/

Guess you like

Origin www.cnblogs.com/tuhazi/p/11095915.html