常用技巧记录

最新推荐文章于 2020-01-19 08:48:49 发布

oo灵性

最新推荐文章于 2020-01-19 08:48:49 发布

阅读量245

点赞数

分类专栏： JavaScript 文章标签： web

本文链接：https://blog.csdn.net/u010427666/article/details/76154737

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

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;
}

聊天内容html标签处理（a标签识别）

/*
 *   聊天内容并加入a
 * */
String.prototype.httpParse = function () {
    let htmlDecode = (html) => {
        var temp = document.createElement('div')
        if (typeof html !== 'String') {
            html.toString()
        }
        (temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html)
        var output = temp.innerHTML
        temp = null
        return output
    }
    let reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-|:)+)/g
    return htmlDecode(this).replace(reg, '<a class="link" href="$1$2" target="_blank">$1$2</a>')
}

oo灵性

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常用技巧记录

1、 Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。2、存储cookie 的时候有‘=’，‘ ’等的时候，会出现读取错误的情况，存的时候应该encodeURIComponent 一下。参考
复制链接

扫一扫

专栏目录