随身笔记

作者： admin

  • 禁用 关闭手机自动识别数字为手机号码功能

    html5手机拨号短信

    关闭Android/iPhone浏览器自动识别数字为手机号码

    对于前端有时候乱加一些标签就会导致页面错乱，手机有一项功能就是可以默认可以把类似手机号码的数字自动识别为手机号码自动添加了<a>标签，这种自作聪明的做法需要禁止，代码如下：

    <meta content="telephone=no" name="format-detection" />

    我们可以自行手动添加例如

    <a href="tel:139xxxxxxxx">一键拨打号码</a>
<a href="sms:139xxxxxxx">一键发送短信</a>

  • 正则笔记

    js 正则

    最新笔记正则笔记.txt

    百度正则资料参考

    正则就是对字符串进行处理，过滤筛选出我们需要的指定的字符串，这样增加了用户体验也减轻了服务器
    的负担。

     

    创建正则方法一：（代码有点冗余）

    var box=new RegExp('box','ig');

    如果使用此方法遇到\还需要多次转义：new RegExp(“\\s”,’ig’) 相当于 /\s/ig

     

    创建正则方法二：(推荐使用)

    var box=/box/ig

    遇到字符串需要拼接可以这么使用要用到eval：

    var str='aa';
console.log( eval('/^'+str+'[0-9]$/').test('aa4') );

    （可以把创建正则理解为创建一个规则，一段字符串经过这个规则过滤后就是我们需要的内容）

     

    test() //匹配字符串 返回的是布尔值

    var box=new RegExp('Box','i'); //i 不区分大小写
var str='box';
alert(box.test(str)); //true
可以一句话写完
alert(/Box/i.test('box'));


简单的了解正则的作用
var box =new RegExp('Box','i');
var str='this is box';
alert(box.test(str)); //检查这段字符串中是否含有 模式中的正则。

     

    exec() //匹配字符串 返回数组

    var box =new RegExp('Box','i');
var str='this is box';
alert(box.exec(str)); //存在就返回 数组的值 没有就返回null

     

     

    String对象提供 4个正则表达式的方法

    match() //把所有匹配到的字符串组合成数组，记得要开启g全局模式

    'this is box,that is box'.match(new RegExp('Box','ig'))   //["box", "box"]

     

    replace() //替换字符串

    'this is box,that is box'.replace(new RegExp('Box','ig'),'tom')  // 'this is tom,that is tom'

     

    search() //返回第一个匹配到的位置 索引从0开始 无需开启 正则无需开启g全局模式，找不到返回-1

    'this is box,that is Box'.search(new RegExp('Box'))  // 20  索引从0开始Box在第20个位置

     

    split()

     

    ———————————————————

     

    RegExp对象的静态属性
    var box=/google/i;
    var str=’this is a google’;
    box.test(str); //*必须要执行一下，静态属性才有校

    alert(RegExp.input); // this is a google

    RegExp1
    RegExp对象实例属性 （功能没什么用）

    RegExp2

     

    获取控制

    . 点 // 可以匹配任意字符串，必须要有不能为0个

    var box=/g.ogle/;

var str='g2ogle';

alert(box.test(str)); //true

     

    * // 可以匹配 0个 1个 或者 多个

    var box=/go*ogle/; //*的前面是o ,就对前面的o起作用

var str='gogle';

var str='google';

var str='gooooooogle';

     

    + // 至少1个 或者 多个

     

    ? // 0个 或者 1个

     

     

    {}允许重复的个数 // 重复匹配指定的范围

    var box=/go{2,4}gle/; // o的数量只能是 2个到4个之间 可以是2个或者4个

var box=/go{3}gle/; //只能3个o

var box=/go{3,}gle/; //至少3个o

     

    []允许出现的范围 // 26个字母只能任意匹配 一个,默认是区分大小写的如果不想就开启i

    var box=/[a-z]oogle/; //26个字母任意匹配一个

var box=/[0-9]oogle/; //匹配0到9一个数字

     

    注意一个例子：

    var box=/[0-9]oogle/;
    var str=’444444444oogle’; //*这里也一样匹配成功因为匹配的是后面6位，不管是后6位还是前6位正则自动去寻找能匹配成功的一段字符串中的某一小段
    alert(box.test(str)); //true

     

    [a-zA-Z0-9] 复合 //可以匹配到a-z A-Z 0-9任意一个

     

    | //或

     

    ()  // 多结构，一般和|配合使用

    var box=/(c|b|e)/ig;
var str='this is a gogle';
console.log(box.test(str))  //可以匹配到e

注意：/(0-9)/ig  这个意思是匹配'0-9'的字符串

     

     

    ^ 两种用法

    ^  // 非 ，通常和[]配合使用
var box=/[^0-9]oogle/; //非 0到9的 任意一个字符
str.replace(/[^\d\.\,]/ig,'')  //除了数字和,和.   其他的都替换为空格


^ //强制首匹配
 var box=/^[0-9]oogle/;
 var str='444444444oogle';
 alert(box.test(str)); //false 这里就从头开始匹配了 位数一一对应

     

     

    $ //强制尾匹配

    var box=/google$/;
 var str='fadf3w3fsdfgoogle'; //字符串的结尾必须是google才能匹配

     

     

    \  //转义

    /\.|\\/ig   //匹配.或者\ 这两个字符串

     

     

    ?:
    例如
    industr(?:y|ies) 等同于 industry|industries

     

    ?=
    /aa(?=95|2000)/ig.test(e.value) 只能匹配到 ‘aa95’,’aa2000’中的aa,以外的都不行,如果’aa2001’就不能匹配到里面的aa

     

    ?!
    跟?=相反，只要不是’aa95′,’aa2000’都可以匹配,例如’fdfs23aa’,’$%^&aa&&’都可以匹配里面的aa

     

    ?<=
    跟?=类似，最好理解是用/(?=95|2000)aa/ig 来进行匹配，发现不会成功。但是使用以下方法就成功
    /(?<=95|2000)aa/ig.test(e.value)，能匹配”95aa”中的”aa”,但是不能匹配”96aa”中的”aa”

     

     

    可以组合使用例如

    var box=/g.?ogle/; // 意思是字符串 可以放0个或1个任意的字符串

     

    var box = /[a-z0-9]+/;
var str='fa8sd9f8s09df8sd90f'; // true 只要是数字和字母组合成的都能匹配成功

     

     

     

    /^(?:\s|(.+\s))?problem_tip(?:\s|(\s.+))?$/ig     //除了…只能，前后只能匹配空格，并且可以是0个或者多个空格

     

    \w // [a-zA-Z0-9_]
    \W // [^a-zA-Z0-9_]
    \d // [0-9]
    \D // [^0-9]

     

    密码正则：

    能匹配的组合为：数字+字母，数字+特殊字符，字母+特殊字符，数字+字母+特殊字符组合，而且不能是纯数字，纯字母，纯特殊字符

    ^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$

    如果要限定特殊字符，例如，特殊字符的范围为 !#$%^&* ，那么可以这么改

    ^(?![\d]+$)(?![a-zA-Z]+$)(?![!#$%^&*]+$)[\da-zA-Z!#$%^&*]{6,20}$

     

    正则 密码 正则密码 数字字母组合

    if (pwd == null || pwd == "") {
 regTip.tupwd.show().html("密码不能为空");
 return false;
}else if (pwd.length < 6 || pwd.length > 18) {
 regTip.tupwd.show().html("密码长度不对");
 return false;
}else if ( !(/^(?=.*[0-9])(?=.*[a-zA-Z])(.{6,})$/ig.test(pwd)) ) {
 regTip.tupwd.show().html("请输入6-18位数字+字母组合密码");
 return false;
}

     

    正则 输入金额，例如类似这样格式：　12345.99

    <input type="text" onkeyup="fn.call(this)">
    function fn(){

 if( !(/^([1-9][0-9]*\.?[0-9]{0,2})$/ig.test(this.value)) ){
 this.value=(this.value).replace(/[^0-9/.]|^[^1-9]/ig,''); //将开头为0或者非数字的字符串都替换为空

 if( !(!(this.value.match(/\./ig)) && typeof((this.value.match(/\./ig)))!="undefined" && (this.value.match(/\./ig))!=0) ){ //这里是防止匹配不到正则是返回null而报错，做了防止报错处理，即使不要这判断效果还在
 if( this.value.match(/\./ig).length>1 ){ //如果之前已经输入了小数点，后面就无法继续输入小数点。（但如果转牛角尖把光标移动前面在继续输入还是可以输的）
 this.value=(this.value).replace(/\.$/ig,'')
 }else if( this.value.split('.')[1].length>2 ){
 this.value= Math.floor(this.value*100)/100
 }
 }
 }

}

    https://sdeno.com/wp-content/uploads/2018/08/test.html

     

  • linear-gradient实用详解

    css3 background 条纹 背景 渐变

    linear-gradient是background-image属性下的参数，在网上找遍了许多教程讲的都很详细
    但是往往都没有讲到重点，说的也长篇大论。花了几十分钟看完也没看懂那些参数具体是
    怎么实用。这里图文并茂讲解快速上手linear-gradient。

    首先看下这个效果：

    bglinear1
    这里教大家如何用CSS3代码绘画出这个图案，例子简单重点是叫大家里面的参数具体是什么意思
    1，首先做出一个小图片
    bglinear2

    background-image: linear-gradient(135deg,#fff 16%, #0ae 17%,#0ae 33%, #fff 34%,#fff 66%, #0ae 67%,#0ae 83%, #fff 84%);
background-image: linear-gradient(顺时针角度, 开始颜色 结束位置, 中间颜色1 开始位置,中间颜色1 结束位置, 中间颜色2 开始位置,中间颜色2 结束位置, 中间颜色3 开始位置,中间颜色3 结束位置, 结束颜色 开始位置);

如果数字不是连续的，他们之间存在数值差，那么数值差的之间的两种颜色默认就是渐变效果。

    (*注意：百分比指的不是大小而是位置，可以用PX 来代替)

    此时绘制完的只是一张单张的图片想实现图1的效果需要追加入以下属性

    background-repeat:repeat;
background-size:50px 50px;

    写到这里应该会明白了吧，只要做出一个小图片剩下的就是平铺。

    http://www.cnblogs.com/lhb25/archive/2013/02/17/css3-linear-gradient.html

  • 基于jquery 幻灯片自适应淡入淡出

    基于jquery 幻灯片自适应淡入淡出

    drdc

    http://pan.baidu.com/s/1bnbC6nH

     

  • 介绍:
    这是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式（比如人见人烦的IE6），以此来解决部分兼容问题，例如模拟IE7的具体方式如下：
    < meta http-equiv = “X-UA-Compatible” content = “IE=EmulateIE7” />
    但令我好奇的是，此处这个标记后面竟然出现了chrome这样的值，难道IE也可以模拟chrome了？
    迅速搜索了一下，才明白原来不是微软增强了IE，而是谷歌做了个外挂：Google Chrome Frame（谷歌内嵌浏览器框架GCF）。这个插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器，谷歌这个墙角挖的真给力！
    而上文提到的那个meta标记，则是在是安装了GCF后，用来指定页面使用chrome内核来渲染。
    GCF下载地址: http://code.google.com/intl/zh-CN/chrome/chromeframe/
    安装完成后,如果你想对某个页面使用GCF进行渲染，只需要在该页面的地址前加上 gcf： 即可，例如： gcf:http://cooleep.com
    但是如果想要在开发时指定页面默认首先使用GCF进行渲染，如果未安装GCF再使用IE内核进行渲染，该如何进行呢？
    就是使用这个标记。

    < meta http-equiv = "X-UA-Compatible" content = "chrome=1" >

    用以声明当前页面用chrome内核来渲染。
    复杂一些的就是本文一开始看到的那中用法：

    < meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
    这样写可以达到的效果是如果安装了GCF，则使用GCF来渲染页面，如果为安装GCF，则使用最高版本的IE内核进行渲染。
2.通过修改HTTP头文件的方法来实现让指定的页面使用GCF内核进行渲染：
在HTTP的头文件中加入以下信息：X-UA-Compatible: chrome=1
在Apache服务器中，确保 mod_headers 和 mod_setenvif文件可用，然后在httpd.conf中加入以下配置信息：
< IfModule mod_setenvif.c>
< IfModule mod_headers.c>
BrowserMatch chromeframe gcf
Header append X-UA-Compatible "chrome=1" env=gcf
</ IfModule >
</ IfModule >
在IIS7或者更高版本的服务器中，只需要修改web.config文件,添加如下信息即可即可:
< configuration >
< system.webServer >
< httpProtocol >
< customHeaders >
< add name = "X-UA-Compatible" value = "chrome=1" />
</ customHeaders >
</ httpProtocol >
</ system.webServer >
</ configuration >