1、深拷贝
export function deepClone(source) {
if (!source && typeof source !== 'object' || source==null || source==undefined) {
throw new Error('error arguments', 'shallowClone')
}
const targetObj = source.constructor === Array ? [] : {}
Object.keys(source).forEach(keys => {
if (source[keys] && typeof source[keys] === 'object') {
targetObj[keys] = deepClone(source[keys])
} else {
targetObj[keys] = source[keys]
}
})
return targetObj
}
2、时间转化格式
export function format(time, format) {
var t = new Date(time);
var tf = function (i) {
return (i < 10 ? '0' : '') + i
};
return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
switch (a) {
case 'yyyy':
return tf(t.getFullYear());
break;
case 'MM':
return tf(t.getMonth() + 1);
break;
case 'mm':
return tf(t.getMinutes());
break;
case 'dd':
return tf(t.getDate());
break;
case 'HH':
return tf(t.getHours());
break;
case 'ss':
return tf(t.getSeconds());
break;
};
});
};
3、正整数判断
export function isInte(num) {
let reg = /^[1-9][0-9]*$/;
return reg.test(num);
}
4、过滤特殊字符
export function stripscript(str) {
var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~!@#¥……&*()&;—|{ }【】‘;:”“'。,、?]")
var rs = "";
for (var i = 0; i < str.length; i++) {
rs = rs + str.substr(i, 1).replace(pattern, '');
}
return rs;
}
5、验证邮箱
export function validateEmail(value){
let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
return !reg.test(value) ? true : false;
}
6、验证密码 6至20位的字母+数字
export function validatePass(value){
let reg = /^(?!\D+$)(?![^a-zA-Z]+$)\S{6,20}$/;
return !reg.test(value) ? true : false;
}
7、验证验证码
export function validateVCode(value){
let reg = /^[a-z0-9]{6}$/;
return !reg.test(value) ? true : false;
}
8、将参数转成form格式
export function formParams(data) {
let form = new FormData();
for (let i in data) {
form.append(i, data[i]);
}
return form;
};
9、截取字符长度
cutStrLength(str, Ilength) {
let tmp = 0;
let len = 0;
let okLen = 0
for (let i = 0; i < Ilength; i++) {
if (str.charCodeAt(i) > 255)
tmp += 2
else
len += 1
okLen += 1
if (tmp + len == Ilength) {
return (str.substring(0, okLen));
}
if (tmp + len > Ilength) {
return (str.substring(0, okLen - 1) + "");
}
}
},
10、对象数据拷贝
dataCopy: function (data) {
if (typeof data == "object") {
let _data = JSON.stringify(data);
return JSON.parse(_data);
};
return data;
},
11、检测浏览器是否支持svg
function isSupportSVG () {
var SVG_NS = 'http://www.w3.org/2000/svg';
return !!document.createElementNS && !!document.createElementNS(SVG_NS, 'svg').createSVGRect;
}
console.log(isSupportSVG());
12、检测浏览器是否支持canvas
function isSupportCanvas () {
if ( document.createElement('canvas').getContext ) {
return true;
}
else {
return false;
}
}
console.log(isSupportCanvas());
13、检测是否是微信浏览器
function isWeiXinClient () {
var ua = navigator.userAgent.toLowerCase();
if ( ua.match(/MicroMessenger/i) == "micromessenger" ) {
return true;
}
else {
return false;
}
}
alert(isWeiXinClient());
14、检测是否移动端及浏览器内核
var browser = {
versions : function () {
var u = navigator.userAgent;
return {
trident : u.indexOf('Trident') > -1, //IE内核
presto : u.indexOf('Presto') > -1, //opera内核
webKit : u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko : u.indexOf('Firefox') > -1, //火狐内核Gecko
mobile : !!u.match(/AppleWebKit.*Mobile.*/), //是否移动终端
ios : !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
android : u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android
iPhone : u.indexOf('iPhone') > -1, //iPhone
iPad : u.indexOf('iPad') > -1, //iPad
webApp : u.indexOf('Safari') > -1 //Safari
};
}
};
if ( browser.versions.mobile() || browser.versions.ios() || browser.versions.android()
|| browser.versions.iPhone() || browser.versions.iPad() ) {
alert('移动端');
}
15、检测是否电脑端 / 移动端
var browser = {
versions : function () {
var u = navigator.userAgent, app = navigator.appVersion;
var sUserAgent = navigator.userAgent;
return {
trident : u.indexOf('Trident') > -1,
presto : u.indexOf('Presto') > -1,
isChrome : u.indexOf("chrome") > -1,
isSafari : !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u),
isSafari3 : !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u) && u.indexOf('webkit/5') != -1,
webKit : u.indexOf('AppleWebKit') > -1,
gecko : u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
mobile : !!u.match(/AppleWebKit.*Mobile.*/),
ios : !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
android : u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
iPhone : u.indexOf('iPhone') > -1,
iPad : u.indexOf('iPad') > -1,
iWinPhone : u.indexOf('Windows Phone') > -1
};
}()
};
if ( browser.versions.mobile || browser.versions.iWinPhone ) {
window.location = "http:/www.baidu.com/m/";
}
16、检测浏览器内核
function getInternet () {
if ( navigator.userAgent.indexOf("MSIE") > 0 ) {
return "MSIE"; //IE浏览器
}
if ( isFirefox = navigator.userAgent.indexOf("Firefox") > 0 ) {
return "Firefox"; //Firefox浏览器
}
if ( isSafari = navigator.userAgent.indexOf("Safari") > 0 ) {
return "Safari"; //Safan浏览器
}
if ( isCamino = navigator.userAgent.indexOf("Camino") > 0 ) {
return "Camino"; //Camino浏览器
}
if ( isMozilla = navigator.userAgent.indexOf("Gecko/") > 0 ) {
return "Gecko"; //Gecko浏览器
}
}
17、强制移动端页面横屏显示
$(window).on("orientationchange", function ( event ) {
if ( event.orientation == 'portrait' ) {
$('body').css('transform', 'rotate(90deg)');
}
else {
$('body').css('transform', 'rotate(0deg)');
}
});
$(window).orientationchange();
18、电脑端页面全屏显示
function fullscreen ( element ) {
if ( element.requestFullscreen ) {
element.requestFullscreen();
}
else if ( element.mozRequestFullScreen ) {
element.mozRequestFullScreen();
}
else if ( element.webkitRequestFullscreen ) {
element.webkitRequestFullscreen();
}
else if ( element.msRequestFullscreen ) {
element.msRequestFullscreen();
}
}
fullscreen(document.documentElement);
19、获得 / 失去焦点
//1、JavaScript实现
<input id = "i_input" type = "text" value = "会员卡号/手机号" />
// JavaScript
window.onload = function () {
var oIpt = document.getElementById("i_input");
if ( oIpt.value == "会员卡号/手机号" ) {
oIpt.style.color = "#888";
}
else {
oIpt.style.color = "#000";
};
oIpt.onfocus = function () {
if ( this.value == "会员卡号/手机号" ) {
this.value = "";
this.style.color = "#000";
this.type = "password";
}
else {
this.style.color = "#000";
}
};
oIpt.onblur = function () {
if ( this.value == "" ) {
this.value = "会员卡号/手机号";
this.style.color = "#888";
this.type = "text";
}
};
}
//2、jQuery实现
< input type = "text" class= "oldpsw" id = "showPwd" value = "请输入您的注册密码" / >
< input type = "password" name = "psw" class= "oldpsw" id = "password" value = "" style = "display:none;" / >
// jQuery
$("#showPwd").focus(function () {
var text_value = $(this).val();
if ( text_value == '请输入您的注册密码' ) {
$("#showPwd").hide();
$("#password").show().focus();
}
});
$("#password").blur(function () {
var text_value = $(this).val();
if ( text_value == "" ) {
$("#showPwd").show();
$("#password").hide();
}
});
20、获取上传文件大小
< input type = "file" id = "filePath" onchange = "getFileSize(this)" / >
// 兼容IE9低版本
function getFileSize ( obj ) {
var filesize;
if ( obj.files ) {
filesize = obj.files[ 0 ].size;
}
else {
try {
var path, fso;
path = document.getElementById('filePath').value;
fso = new ActiveXObject("Scripting.FileSystemObject");
filesize = fso.GetFile(path).size;
}
catch ( e ) {
// 在IE9及低版本浏览器,如果不容许ActiveX控件与页面交互,点击了否,就无法获取size
console.log(e.message); // Automation 服务器不能创建对象
filesize = 'error'; // 无法获取
}
}
return filesize;
}
21、限制上传文件类型
//1、高版本浏览器
< input type = "file" name = "filePath" accept = ".jpg,.jpeg,.doc,.docxs,.pdf" / >
//2、限制图片
< input type = "file" class = "file" value = "上传" accept = "image/*" >
//3、低版本浏览器
< input type = "file" id = "filePath" onchange = "limitTypes()" >
/* 通过扩展名,检验文件格式。
* @parma filePath{string} 文件路径
* @parma acceptFormat{Array} 允许的文件类型
* @result 返回值{Boolen}:true or false
*/
function checkFormat ( filePath, acceptFormat ) {
var resultBool = false,
ex = filePath.substring(filePath.lastIndexOf('.') + 1);
ex = ex.toLowerCase();
for ( var i = 0; i < acceptFormat.length; i++ ) {
if ( acceptFormat[ i ] == ex ) {
resultBool = true;
break;
}
}
return resultBool;
};
function limitTypes () {
var obj = document.getElementById('filePath');
var path = obj.value;
var result = checkFormat(path, [ 'bmp', 'jpg', 'jpeg', 'png' ]);
if ( !result ) {
alert('上传类型错误,请重新上传');
obj.value = '';
}
}
22、正则表达式
//验证邮箱
/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/
//验证手机号
/^1[3|5|8|7]\d{9}$/
//验证URL
/^http:\/\/.+\./
//验证身份证号码
/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/
//匹配字母、数字、中文字符
/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/
//匹配中文字符
/[\u4e00-\u9fa5]/
//匹配双字节字符(包括汉字)
/[^\x00-\xff]/
23、限制字符数
<input id="txt" type="text">
//字符串截取
function getByteVal ( val, max ) {
var returnValue = '';
var byteValLen = 0;
for ( var i = 0; i < val.length; i++ ) {
if ( val[ i ].match(/[^\x00-\xff]/ig) != null ) byteValLen += 2;
else byteValLen += 1;
if ( byteValLen > max ) break;
returnValue += val[ i ];
}
return returnValue;
};
$('#txt').on('keyup', function () {
var val = this.value;
if ( val.replace(/[^\x00-\xff]/g, "**").length > 14 ) {
this.value = getByteVal(val, 14);
}
});
24、验证码倒计时
<input id="send" type="button" value="发送验证码">
// JavaScript
var times = 60, // 时间设置60秒
timer = null;
document.getElementById('send').onclick = function () {
// 计时开始
timer = setInterval(function () {
times--;
if ( times <= 0 ) {
send.value = '发送验证码';
clearInterval(timer);
send.disabled = false;
times = 60;
}
else {
send.value = times + '秒后重试';
send.disabled = true;
}
}, 1000);
};
var times = 60,
timer = null;
$('#send').on('click', function () {
var $this = $(this);
// 计时开始
timer = setInterval(function () {
times--;
if ( times <= 0 ) {
$this.val('发送验证码');
clearInterval(timer);
$this.attr('disabled', false);
times = 60;
}
else {
$this.val(times + '秒后重试');
$this.attr('disabled', true);
}
}, 1000);
});
25、时间倒计时
<p id="_lefttime"></p>
var times = 60,timer = null;
26、倒计时跳转
<div id="showtimes"></div>
// 设置倒计时秒数
var t = 10;
// 显示倒计时秒数
function showTime () {
t -= 1;
document.getElementById('showtimes').innerHTML = t;
if ( t == 0 ) {
location.href = 'error404.asp';
}
//每秒执行一次 showTime()
setTimeout("showTime()", 1000);
}
showTime();
27、时间戳、毫秒格式化
function formatDate ( now ) {
var y = now.getFullYear();
var m = now.getMonth() + 1; // 注意 JavaScript 月份+1
var d = now.getDate();
var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds();
return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s;
}
var nowDate = new Date(1442978789184);
alert(formatDate(nowDate));
28、当前日期
var calculateDate = function () {
var date = new Date();
var weeks = [ "日", "一", "二", "三", "四", "五", "六" ];
return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" +
date.getDate() + "日 星期" + weeks[ date.getDay() ];
};
$(function () {
$("#dateSpan").html(calculateDate());
});
29、判断周六 / 周日
<p id = "text" > < / p >
function time ( y, m ) {
var tempTime = new Date(y, m, 0);
var time = new Date();
var saturday = new Array();
var sunday = new Array();
for ( var i = 1; i <= tempTime.getDate(); i++ ) {
time.setFullYear(y, m - 1, i);
var day = time.getDay();
if ( day == 6 ) {
saturday.push(i);
}
else if ( day == 0 ) {
sunday.push(i);
}
}
var text = y + "年" + m + "月份" + "<br />"
+ "周六:" + saturday.toString() + "<br />"
+ "周日:" + sunday.toString();
document.getElementById("text").innerHTML = text;
};
time(2018, 5);