前端日常笔记

最新推荐文章于 2021-04-01 09:29:08 发布

wwt20180911

最新推荐文章于 2021-04-01 09:29:08 发布

阅读量406

点赞数

分类专栏： javscript jQuery 文章标签： javscript jQuery 常用代码块

本文链接：https://blog.youkuaiyun.com/wwt20180911/article/details/83088957

版权

javscript 同时被 2 个专栏收录

2 篇文章

订阅专栏

jQuery

2 篇文章

订阅专栏

版权声明：需要转载的话，请先联系我哦！ https://blog.youkuaiyun.com/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判断滚动条是否到底部：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src=""></script>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			#main {
				width: 100%;
				height: 2000px;
				background: pink;
			}
		</style>
		<script type="text/javascript">
			$(window).scroll(function() {　　
				var scrollTop = $(this).scrollTop();　　
				var docHeight = $(document).height();　　
				var windowHeight = $(this).height();
				var scrollHeight=document.body.scrollHeight;
				console.log("scrollTop:"+scrollTop);
				console.log("scrollbottom:"+(docHeight-scrollTop-windowHeight));
				if(scrollTop + windowHeight == docHeight) {　　　　
					alert("已经到最底部了！");　　
				}
			});
		</script>
	</head>

	<body>
		<div id="main"></div>
	</body>

</html>

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|| <br>u.indexOf('XiaoMi') > -1; //android终端或者uc，小米等奇葩浏览器
    if(!isAndroid) {} 
    if(isAndroid)  {}

16、判断页面滚动方向：

 <script type="text/javascript">
        var windowHeight = $(window).height();
        $("body").css("height", windowHeight);
        var startX, startY, moveEndX, moveEndY, X, Y;
        $("body").on("touchstart", function(e) {
            e.preventDefault();
            startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEvent.changedTouches[0].pageY;
        });
        $("body").on("touchmove", function(e) {
            e.preventDefault();
            moveEndX = e.originalEvent.changedTouches[0].pageX, moveEndY = e.originalEvent.changedTouches[0].pageY, X = moveEndX - startX, Y = moveEndY - startY;
            if (Math.abs(X) > Math.abs(Y) && X > 0) {
                alert("left to right");
            } else if (Math.abs(X) > Math.abs(Y) && X < 0) {
                alert("right to left");
            } else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
                alert("top to bottom");
            } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
                alert("bottom to top");
            } else {
                alert("just touch");
            }
        });
    </script>

17、排序

<script type="text/javascript">
            var a = [1, 18, 23, 9, 16, 10, 29, 17];
            var t = 0;
            for(var i = 0; i < a.length; i++) {
                for(var j = i + 1; j < a.length; j++) {
                    if(a[i] > a[j]) {
                        t = a[i];
                        a[i] = a[j];
                        a[j] = t;
                    }
                }
            }
            console.log(a);  //[1, 9, 10, 16, 17, 18, 23, 29]
        </script>

18、倒计时：

 <!Doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>下班倒计时</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            body {
                font-size: 16px;
                text-align: center;
                font-family: arial;
            }

            .time {
                margin-top: 10px;
                border: 1px solid red;
                height: 30px;
                padding: 2px;
                line-height: 30px;
            }
        </style>
    </head>

    <body>
        <div class="time">
            <span id="t_d">00天</span>
            <span id="t_h">00时</span>
            <span id="t_m">00分</span>
            <span id="t_s">00秒</span>
        </div>
        <script>
            setInterval(function() {
                var EndTime = new Date('2016/06/13 00:00:00');
                var NowTime = new Date();
                var t = EndTime.getTime() - NowTime.getTime();
                var d = 0;
                var h = 0;
                var m = 0;
                var s = 0;
                if (t >= 0) {
                    d = Math.floor(t / 1000 / 60 / 60 / 24);
                    h = Math.floor(t / 1000 / 60 / 60 % 24);
                    m = Math.floor(t / 1000 / 60 % 60);
                    s = Math.floor(t / 1000 % 60);
                }
                document.getElementById("t_d").innerHTML = d + "天";
                document.getElementById("t_h").innerHTML = h + "时";
                document.getElementById("t_m").innerHTML = m + "分";
                document.getElementById("t_s").innerHTML = s + "秒";
            }, 10);
        </script>

    </body>

</html>

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、遮罩：

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>RGBA 遮罩</title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			
			html,
			body {
				width: 100%;
				min-height: 100%;
				background: white;
			}
			
			div.mask {
				display: none;
				position: fixed;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.7);
			}
			
			div.masks-body {
				width: 300px;
				height: 300px;
				position: absolute;
				top: 0px;
				left: 0px;
				bottom: 0px;
				right: 0px;
				background: green;
				margin: auto;
			}
			
			p {
				position: absolute;
				width: 30px;
				height: 30px;
				background: red;
				right: 0px;
				top: -30px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				document.querySelector("#main").onclick = function() {
					document.querySelector(".mask").style.display = "block";
				}
				document.querySelector("p#close").onclick=function(){
					document.querySelector(".mask").style.display = "none";
				}
			}
		</script>
	</head>

	<body>
		<button id="main">点我</button>
		<div class="mask">
			<div class="masks-body">
				<p id="close"></p>
			</div>
		</div>
	</body>

</html>

23、js模糊查询（表格td）

$("#filterName").keyup(function() {
    $("table tbody tr").hide();
    $(".inv_neirong").filter(":contains('" + ($(this).val()) + "')").parent().show();
})

24、视频插件

<object width='541' height='450'>
    <param name='allowFullScreen' value='true'>
    <param name='movie' value='http://img1.c0.letv.com/ptv/player/swfPlayer.swf?autoPlay=0&id=31121775'/>
    <embed src='http://img1.c0.letv.com/ptv/player/swfPlayer.swf?autoPlay=0&id=31121775' width='541' height='450' allowFullScreen='true' type='application/x-shockwave-flash'/>
</object>

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;i<arr.length;i++){
　　　　if(!json[arr[i]]){
　　　　　　res.push(arr[i]);
　　　　　　json[arr[i]] = 1;
　　　　}
　　}
　　return res;
}

27、判断手机端与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();

作者：涛兄
来源：优快云
原文：https://blog.youkuaiyun.com/wwt20180911/article/details/83088957
版权声明：本文为博主原创文章，转载请附上博文链接！