我来了……

JS和CSS使用的一些小技巧

定制间隔线

需要上面这样一条虚线,怎么搞?

方法一:

border-top: 1px dashed #eee;

方法二:

//基于渐变
.dash {
        height: 1px;
        background-image: linear-gradient(90deg, #eee 0%, #eee 50%, transparent 50%, transparent 100%);
        background-size: 15px 1px;
        margin: 9px 0;
    }

PS: 看过一篇文章,一位大牛用css渐变写了超级玛丽:链接

append与appendChild

这里说的append是dom的方法,目前处于草案,虽然有很多浏览器支持,但是在开发h5页面时,偶尔还是会有报错,有些极个别浏览器拿不支持。mdn:https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append

append的功能和jquery的append没有多大差别。

appendChild这个api是DOM level2的,现在基本所有浏览器都支持的。注意后面appendChild的参数必须是一个节点node

隐藏iframe的src

怎么搞?两种方法:

  1. 可以自己创建一个iframe,然后可以拿到iframe的contentWindow,contentDocument往里面写内容,
  2. 基于form表单的target属性,可以指定一个iframe的name来打开,这样表单提交后的结果会在iframe中展示,而iframe不会回显src的url。
postToIframe: function(iframeName, actionUrl, dataKey, data) {
                var _form = document.createElement("form")
                  , _input = document.createElement("input");
                _form.setAttribute("id", "hideForm"),
                _form.setAttribute("method", "POST"),
                _form.setAttribute("action", actionUrl),
                _form.setAttribute("target", iframeName),
                _input.setAttribute("type", "hidden"),
                _input.setAttribute("name", dataKey),
                _input.value = encodeURIComponent(JSON.stringify(data));
                var o = document.getElementById("hideForm");
                o && document.body.removeChild(o),
                document.body.appendChild(_form), 
                _form.appendChild(r),
                _form.submit() 
}

js设置important的css

function myFunction() {
    var x = document.querySelectorAll("#testDiv p.example");
    x[0].style.setProperty("background-color", "red", "important");
}

注意:直接使用document.querySelector("#xxx").style.marginTop="0 !important"是不行的。不能带后面的!important,只能通过setProperty来实现。

js操作class

function addClass(sel, cls) {
        document.querySelector(sel).classList.add(cls)
}
function removeClass(sel, cls) {
        document.querySelector(sel).classList.remove(cls)
}

classList这个属性是DOM2支持的,包含了add和remove方法。

promise执行then之后的reject

new Promise(function(resolve, reject){
    resolve(Promise.reject(5))
}).then(function(value){
    console.log('fulfill', value)
}, function(reason){
    console.log('reject', reason)
})
// reject 5

上面的大家都知道,那么第二次then会怎样?

new Promise(function(resolve, reject){
    resolve(Promise.reject(5))
}).then(function(value){
    console.log('fulfill', value)
    return 1;
}, function(reason){
    console.log('reject', reason)
    return 2;
}).then(res=>{
    console.log(res) //all gos here
},err=>{
    console.log(err)
})

你会发现,第一次then中的resolve或者reject的返回值都会走到第二次then的resolve。那么怎么走到第二次then的reject呢?

new Promise(function(resolve, reject){
    resolve(Promise.reject(5))
}).then(function(value){
    console.log('fulfill', value)
    return 1;
}, function(reason){
    console.log('reject', reason)
    //1. Promise.reject, goes next then reject
    Promise.reject(1)
    //2. throw Error, go next then reject
    throw new Error("2")
}).then(res=>{
    console.log(res) 
},err=>{
    console.log(err)
})

两种方法,使用Promise.reject 或者抛出一个异常

js 正则表达式判断非法字符 常用正则表达式


var pat=new RegExp("[^a-zA-Z0-9\_\u4e00-\u9fa5]","i"); 	  
var strTest = $("#testId").val();	  
if(pat.test(strTest)==true) 	  { 	      
    showMess("项目名称中含有非法字符"); 	      
    return false; 	  
}

示例其他正则代码:

验证数字的正则表达式集(转载)
验证数字:^[0-9]*$
验证n位的数字:^\d{n}$
验证至少n位数字:^\d{n,}$
验证m-n位的数字:^\d{m,n}$
验证零和非零开头的数字:^(0|[1-9][0-9]*)$
验证有两位小数的正实数:^[0-9]+(.[0-9]{2})?$
验证有1-3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$
验证非零的正整数:^\+?[1-9][0-9]*$
验证非零的负整数:^\-[1-9][0-9]*$
验证非负整数(正整数 + 0) ^\d+$
验证非正整数(负整数 + 0) ^((-\d+)|(0+))$
验证长度为3的字符:^.{3}$
验证由26个英文字母组成的字符串:^[A-Za-z]+$
验证由26个大写英文字母组成的字符串:^[A-Z]+$
验证由26个小写英文字母组成的字符串:^[a-z]+$
验证由数字和26个英文字母组成的字符串:^[A-Za-z0-9]+$
验证由数字、26个英文字母或者下划线组成的字符串:^\w+$
验证用户密码:^[a-zA-Z]\w{5,17}$ 正确格式为:以字母开头,长度在6-18之间,只能包含字符、数字和下划线。
验证是否含有 ^%&’,;=?$\” 等字符:[^%&’,;=?$\x22]+
验证汉字:^[\u4e00-\u9fa5],{0,}$
验证Email地址:^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
验证InternetURL:^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ;^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$
验证电话号码:^(\d3,4\d3,4|\d{3,4}-)?\d{7,8}$:–正确格式为:XXXX-XXXXXXX,XXXX-XXXXXXXX,XXX-XXXXXXX,XXX-XXXXXXXX,XXXXXXX,XXXXXXXX。
验证身份证号(15位或18位数字):^\d{15}|\d{}18$
验证一年的12个月:^(0?[1-9]|1[0-2])$ 正确格式为:“01”-“09”和“1”“12”
验证一个月的31天:^((0?[1-9])|((1|2)[0-9])|30|31)$ 正确格式为:01、09和1、31。
整数:^-?\d+$
非负浮点数(正浮点数 + 0):^\d+(\.\d+)?$
正浮点数 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
非正浮点数(负浮点数 + 0) ^((-\d+(\.\d+)?)|(0+(\.0+)?))$
负浮点数 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
浮点数 ^(-?\d+)(\.\d+)? ——————— 作者:zgcy123456 来源:CSDN 原文:https://blog.csdn.net/zgcy123456/article/details/8912057?utm_source=copy 版权声明:本文为博主原创文章,转载请附上博文链接!

H5页面在 ios 端滑动不流畅没有惯性的问题

在ios 下,只有body的overflow:auto有滑动惯性效果,

其他地方需要添加

-webkit-overflow-scrolling : touch;

知道吗

未经允许不得转载:前端学堂fed123 » JS和CSS使用的一些小技巧

分享到:更多 ()