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
