琐碎小问题！

1、去除select的默认三角样式

select{
  -webkit-appearance: none;
  -webkit-tap-highlight-color: #fff;
  outline: 0;
}

2、文字超出隐藏

div{
    overflow: hidden;
    white-space: nowrap;      //不换行
    text-overflow: ellipsis;  //超出省略号
}

3、iframe通过下列代码可以实现去除边框，滚动条，但是需要调整好高度，而且对应的子页面，高度应该是固定的，才容易使用

<iframe src="http://www.zhixin001.com/test/about.html" style="width:100%;height:1100px" name="iframe_a"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>

4、如何控制窗体滚动高度的问题？

如果只是为了获取当前网页的窗体的滚动高度，直接使用window.pageYOFFset就可以了（IE9+），桌面和移动端都支持

但是window.pageYOFFset是一个只读属性，我们无法用来设置窗体的滚动高度，此时，就要找到对应的滚动元素，通过设置scrollTop值来改变窗体的滚动位置

然而，桌面和移动端的窗体滚动元素是不一样的

document.documentElement.scrollTop;（只在PC端生效）
document.body.scrollTop;（只在移动端生效）

使用document.scrollingElement.scrollTop来控制

如：

document.scrollingElement.scrollTop = 400

5、超出部分隐藏

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap

6、查看本机ip地址

命令行输入 ipconfig

7、input框只能输入整数

onkeyup="value=value.replace(/[^0-9]/g,'')"       (包括0)
onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"     （不包括0）

8、input框限制输入长度 （可以在type为number时 maxlength无效时使用）

oninput="if(value.length>5)value=value.slice(0,5)"

9、H5和原生交互

var u = navigator.userAgent,
	app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
function showToast(data){
	if(getCookie("VERSION")||getCookie("PHONETYPE")||getCookie("DEVICEID")){
		
		if(isIOS) {
			window.webkit.messageHandlers.showToast.postMessage(data);
		} else if(isAndroid) {
			window.android.showToast(JSON.stringify(data));			
		}		
	}else{
		if(data.type==1){
			$.showLoading(" ");			
		}else if(data.type==2){
			$.hideLoading();
		}else if(data.type==3){
			$.toast(data.title, "text");
		}
	}
}

10、修改单选框和复选框的样式

<!-- html -->
<input type="checkbox" id="check" name="check" />
<label for="check">Checkbox</label>

input[type=checkbox] {display: none;}
input[type=checkbox] + label:before {  
		content: "";
		border: 1px solid #000;
		font-size: 11px;    
		line-height: 10px;
		margin: 0 5px 0 0;
		height: 10px;
		width: 10px;
		text-align: center;
		vertical-align: middle;
}

input[type=checkbox]:checked + label:before {  
		content: "\2713";
}

11、动画卡顿时，开启硬件加速

选择器{
	transform: translateZ(0);
}

12、Color + Border = Border-Color

input[type="text"] {  
		color: red;
		border: 1px solid;
}

13、高德的事件绑定

$(document).on('click','类名',function(){

})

14、禁止移动端背景层滚动

弹出时设置

document.body.style.overflow = 'hidden';
document.documentElement.style.overflow = 'hidden'

关闭弹出层时设置

把值设置成auto即可

15、ios的回弹效果

$('').on('touchmove',function(){
	event.preventDefault();
})

16、box-shadow

box-shadow: 10px 10px 5px #88888

第一个值：水平阴影的偏移量，为正值时生成右边阴影，为负时，生成左边阴影
第二个值：垂直阴影的偏移量，为正值时生成底部阴影，为负值时，生成顶部阴影
第三个值：阴影模糊值
第四个值：阴影颜色