web前端几个小知识点笔记

Posted 2020-10-21 libo0125ok

1、css实现宽度是百分比的盒子为正方形

<div style="width:50%;padding-bottom:50%;height:0px;background:#ccc;"></div>

只需要保证width的百分比值和padding-bottom的百分比值一样即可

 

2、手机端判断是横屏还是竖屏

function checkOrient() {?
    if (window.orientation == 0 || window.orientation == 180){?
        alert(‘竖屏‘);?
    }else if (window.orientation == 90 || window.orientation == -90){?
        alert(‘横屏‘);?
    }
}
// 添加事件监听?
addEventListener(‘load‘, function(){?
    checkOrient();?
});

 

3、不固定行数的文字垂直居中

需求：一个盒子div中有一段文字，文字行数不确定，如何实现该段文字在盒子内垂直居中
方法1：
在div盒子上使用两个css属性：display:table-cell;vertical-align:middle;
方法2：
在div盒子内部放置另外一个盒子p元素，把文字放置到p元素中，
然后div盒子设置：position:relative;
p元素设置：position:absolute;top:50%;transform:translate(-50%);

 

4、动态正则校验

function dynamicReg(text) {?    
　　eval("var reg = /^" + text + "$/;");?    
　　console.log(reg);?    
　　console.log(reg.test(‘123456‘));?
}??
dynamicReg(‘34‘);   //false?
dynamicReg(‘123456‘);   //true

 

5、不固定宽高的盒子水平垂直居中

.parent {
    width: 60%;
    height: 500px;
    position: relative;
    border: 1px solid #000;
}
.box{
    width: 30%;
    height: 20%;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin: auto;
    background-color: blue;
}

<div class="parent">
    <div class="box"></div>
</div>

 

6、移动设备上实现滚动回弹效果

-webkit-overflow-scrolling: touch; //手指离开屏幕后，还会滚动一段距离
-webkit-overflow-scrolling: auto;    //手指离开屏幕后，立即停止滚动

 

7、盒子四周阴影效果

div {
    box-shadow: 0px 0px 15px #000;
}

 

8、正则验证是否是汉字或全角

/[^\x00-\xff]/g.test(‘abc‘)   //false?
/[^\x00-\xff]/g.test(‘表达‘) 　//true
/[^\x00-\xff]/g.test(‘.‘) 　　 //false
/[^\x00-\xff]/g.test(‘。‘) 　　//true