常用技巧记录

来源：互联网发布：server-u mac不能编辑：程序博客网时间：2024/05/09 15:49

1、 Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

2、存储cookie 的时候有‘=’，‘ ’等的时候，会出现读取错误的情况，存的时候应该encodeURIComponent 一下。参考

3、 ios自动识别数字为手机号码，导致部分设置好的样式无效（字体颜色等）
原因分析：
ios 自动设别数字后会给数字加上数字标签，所以数字得部分样式继承了a标签得样式，导致部分样式无效。
解决办法：

4、为按钮加上disabled 属性效果
css 实例：

.disabled {    opacity: 0.6;    cursor: not-allowed;}

meta标签加上

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

阻止默认识别数字为电话；

2、原生修改找ios 开发人员。

一些有用技能点

通过设置css属性 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);取消掉手机端webkit浏览器点击按钮或超链接之类的默认灰色背景色。
设置css属性 -webkit-user-select:none; 控制用户不可选择文字。
区域性 overflow: scroll | auto 滚动时使用原生效果：-webkit-overflow-scrolling: touch （ios8+，Android4.0+）
单行、多行溢出省略

/* 单行省略 */.ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}/* 多行省略 */.ellipsis-2l {overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;    /* 数值代表显示几行 */-webkit-box-orient: vertical;}

retina 屏幕实现真正的1px 边框。

<!-- html结构 --><body><div class="box retina-border rt-bd-all"></div></body>/* css样式 */.box {width: 200px;heigth: 100px;box-sizing: border-box;border: 1px solid #aaa;}/* 去掉元素原有的边框 */.retina-border {position: relative;border: none;}/* 通过设置伪元素放大到2倍的宽高，设置1px边框，再缩小1倍，以达到0.5px边框的效果*/.retina-border:after {content: '';display: block;width: 200%;height: 200%;position: absolute;left: 0;top: 0;box-sizing: border-box;border: 0px solid #aaa;-webkit-transform-origin: left top;transform-origin: left top;-webkit-transform: scale(.5);transform: scale(.5);}.rt-bd-all:after {border-width: 1px;}/* 如果只是想设置一条边框，可以这样改一下，以此类推 */<!-- html结构 --><body><div class="box retina-border rt-bd-b"></div></body>/* css样式 */.tr-bd-b:after {border-bottom-width: 1px;}.tr-bd-t:after {border-top-width: 1px;}.tr-bd-l:after {border-left-width: 1px;}.tr-bd-r:after {  border-right-width: 1px;}

Promise 规范重点内容

    // private awaitTime(){    //     return new Promise( function( resolve ){    //         setTimeout( function(){    //             console.log( 56666)    //             resolve( true )    //         } ,1000 )    //     } )    // }

过滤HTML 字符串，防止用户输入恶意内容

function saferHTML( template ){    let s = template[0];    for( let i=1;i<arguments.length;i++ ){        let arg = String( arguments[i] );        s += arg.replace(/&/g,"&amp;")                .replace(/</g,"&lt;")                .replace(/>/g,"&gt;");        s += template[i] ;    }    return s;}

阅读全文

0 0