前端日常笔记
版权声明：需要转载的话，请先联系我哦！ https://blog.csdn.net/wwt20180911/article/details/83088957
1、去除字符串左右两端空格
function trim(str) {
return str.replace(/(^\s*)|(\s*$)/g, "");
}
2、数字输入
function clearNoNum(obj) {
obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
if(obj.value.indexOf(".") < 0 && obj.value != "") { //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
obj.value = parseFloat(obj.value);
}
if(obj.value == 'NaN') {
obj.value = 1;
}
}
3、生成随机颜色值
function getRandomColor () {
const rgb = []
for (let i = 0 ; i < 3; ++i){
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? '0' + color : color
rgb.push(color)
}
return '#' + rgb.join('')
}
4、有效手机号码判断
function phone() {
const myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
if(!myreg.test(15860795766)){
console.log('手机号码无效');
return false;
}
}
5、电话格式判断
function phoneCheck() {
const reg = /^(1\d{10})$|^((0\d{2,3}-?)?\d{7,8})$/g;
if (!reg.test(12345678900)) {
message.warning('客服电话号码格式为1XXXXXXXXXX或者0XX(X)-XXXXXXX(X)或者XXXXXXX(X)，请重新输入！', 3);
return false;
}
}
6、图片文件判断
function imagesCheck() {
var rg=/^image.*/;
if(!rg.test(f.type)){
console.log('文件格式不正确');
return;
}
}
7、视频文件判断
function videoCheck() {
if(!/video\/\w+/.test(files[0].type)){
console.log("请上传视频文件！");
return false;
}
}
8、身份证格式判断
function idCardCheck() {
const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if (reg.test(idCard) === false) {
console.log('身份证号输入不合法');
return false;
}
}
9、移动端media
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
10、对localStorage的封装，使用更简单
//在get时，如果是JSON格式，那么将其转换为JSON，而不是字符串。以下是基础代码：
var Store = {
get: function(key) {
var value = localStorage.getItem(key);
if (value) {
try {
var value_json = JSON.parse(value);
if (typeof value_json === 'object') {
return value_json;
} else if (typeof value_json === 'number') {
return value_json;
}
} catch(e) {
return value;
}
} else {
return false;
}
},
set: function(key, value) {
localStorage.setItem(key, value);
},
remove: function(key) {
localStorage.removeItem(key);
},
clear: function() {
localStorage.clear();
}
};
在此基础之上，可以扩展很多方法，比如批量保存或删除一些数据：
// 批量保存，data是一个字典
Store.setList = function(data) {
for (var i in data) {
localStorage.setItem(i, data[i]);
}
};
// 批量删除，list是一个数组
Store.removeList = function(list) {
for (var i = 0, len = list.length; i < len; i++) {
localStorage.removeItem(list[i]);
}
};
11、js判断滚动条是否到底部：
12、js操作cookie
JS设置cookie:
假设在A页面中要保存变量username的值("jack")到cookie中,key值为name，则相应的JS代码为：
document.cookie="name="+username;
JS读取cookie:
假设cookie中存储的内容为：name=jack;password=123
则在B页面中获取变量username的值的JS代码如下：
var username=document.cookie.split(";")[0].split("=")[1];
//JS操作cookies方法!
//写cookies
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//读取cookies
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
//删除cookies
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
//使用示例
setCookie("name","hayden");
alert(getCookie("name"));
//如果需要设定自定义过期时间
//那么把上面的setCookie 函数换成下面两个函数就ok;
//程序代码
function setCookie(name,value,time)
{
var strsec = getsec(time);
var exp = new Date();
exp.setTime(exp.getTime() + strsec*1);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getsec(str)
{
alert(str);
var str1=str.substring(1,str.length)*1;
var str2=str.substring(0,1);
if (str2=="s")
{
return str1*1000;
}
else if (str2=="h")
{
return str1*60*60*1000;
}
else if (str2=="d")
{
return str1*24*60*60*1000;
}
}
//这是有设定过期时间的使用示例：
//s20是代表20秒
//h是指小时，如12小时则是：h12
//d是天数，30天则：d30
setCookie("name","hayden","s20");
/***************************************/
function getCookie(name){
if(name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return (decodeURIComponent(arr[2]));
else
return null;
}
return null;
};
function setCookie(name,value,Days){
if(!Days)Days=3000;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000000);
document.cookie = name + "="+ encodeURIComponent(value) + ";domain=weshare.com.cn;expires=" + exp.toGMTString() + ";path=/";
};
13、获取URL参数：
function GetURLlist(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r != null) return unescape(r[2]);
return null;
};
14、IOS和安卓判断：
var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isAndroid){
$(".down0").css('display','none')
}else if(isiOS){
$(".down").css('display','none')
}
else{
return false;
}
15、判断微信：
function isWeiXin(){
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
}else{
return false;
}
}
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1|| u.indexOf('MI') > -1||
u.indexOf('XiaoMi') > -1; //android终端或者uc，小米等奇葩浏览器
if(!isAndroid) {}
if(isAndroid) {}
16、判断页面滚动方向：
17、排序
18、倒计时：
下班倒计时
00天
00时
00分
00秒
19、封装了一个ajax的函数
var Ajax = function(url, type success, error) {
$.ajax({
url: url,
type: type,
dataType: 'json',
timeout: 10000,
success: function(d) {
var data = d.data;
success && success(data);
},
error: function(e) {
error && error(e);
}
});
};
// 使用方法：
Ajax('/data.json', 'get', function(data) {
console.log(data);
});
20、要使用jsonp的方法，跨域，我也封装了一个函数
function jsonp(config) {
var options = config || {}; // 需要配置url, success, time, fail四个属性
var callbackName = ('jsonp_' + Math.random()).replace(".", "");
var oHead = document.getElementsByTagName('head')[0];
var oScript = document.createElement('script');
oHead.appendChild(oScript);
window[callbackName] = function(json) { //创建jsonp回调函数
oHead.removeChild(oScript);
clearTimeout(oScript.timer);
window[callbackName] = null;
options.success && options.success(json); //先删除script标签，实际上执行的是success函数
};
oScript.src = options.url + '?' + callbackName; //发送请求
if (options.time) { //设置超时处理
oScript.timer = setTimeout(function () {
window[callbackName] = null;
oHead.removeChild(oScript);
options.fail && options.fail({ message: "超时" });
}, options.time);
}
};
// 使用方法：
jsonp({
url: '/b.com/b.json',
success: function(d){
//数据处理
},
time: 5000,
fail: function(){
//错误处理
}
});
21、JS生成随机字符串的最佳实践
var random_str = function() {
var len = 32;
var chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
var max = chars.length;
var str = '';
for (var i = 0; i < len; i++) {
str += chars.charAt(Math.floor(Math.random() * max));
}
return str;
};
//这样生成一个32位的随机字符串，相同的概率低到不可能。
22、CSS修改滚动条样式：
::-webkit-scrollbar {
width: 10px;
background-color: #ccc;
}
::-webkit-scrollbar-track {
background-color: #ccc;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background-color: rgb(255, 255, 255);
background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(rgb(77, 156, 65)), color-stop(0.6, rgb(84, 222, 93)), to(rgb(25, 145, 29)));
border-radius: 10px;
}
22、遮罩：
RGBA 遮罩
23、js模糊查询（表格td）
$("#filterName").keyup(function() {
$("table tbody tr").hide();
$(".inv_neirong").filter(":contains('" + ($(this).val()) + "')").parent().show();
})
24、视频插件
25、js深拷贝方式2，利用json对象转化为字符串的方法
var clone2 = function(v) {
return (
JSON.parse(JSON.stringify(v))
);
}
26、数组去重
function unique(arr){
var res =[];
var json = {};
for(var i=0;i27、判断手机端与PC端
function browserRedirect() {
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
// h5
}else{
// pc
window.open("index.html", '_self');
}
}
browserRedirect();
作者：涛兄
来源：CSDN
原文：https://blog.csdn.net/wwt20180911/article/details/83088957
版权声明：本文为博主原创文章，转载请附上博文链接！