问题总结（三）

1. 如何实现高度很小的容器

、在高级浏览器中直接设置，但是在IE6中要添加overflow: hidden;

.demo{
width:100px;
height:1px;
background:red;
overflow:hidden;
}

2. 高级浏览器用display: inline-block定义行内块级元素

在IE6、IE7中不识别display:inline-block属性，加不加display:inline-block;对于它们完全没有任何影响。添加 zoom: 1; 属性即可解决.

加了个 zoom: 1 来触发 haslayout; zoom 的值设置为除了 auto 外的任何值都会触发 haslayout，之所以经常用 zoom: 1; 是因为 zoom 这个属性本身是 ie 的缩放属性，设置为其他值会导致元素在 ie 下变形，设置为1既是保持原形不缩放。

li {
display:inline-block;/* firefox等标准浏览器识别*/
*display:inline;/* 只有ie6和ie7识别*/
zoom:1;/* 触发ie6和ie7下的haslayout */
width:80px;
height:20px;
margin:10px;
padding:10px;
text-align: center;
background:#cfc;
}

注意书写顺序，display: inline 一定要写在 display: inline-block 后面，IE6是识别inline-block的，但并不是我们想要的效果，虽然display:inline-block对ie6，7中的元素表现没有任何直接影响，但是它会触发inline元素的haslayout。

3. 使用js截取"abcdefg"中的"efg"

"abcdefg".substr(4);

"abcdefg".substring(4);

"abcdefg".slice(4);

"abcdefg".replace("abcd","");

4 .解析url并将参数解析成为一个对象。

function parseQueryString(url){
var ob ={};
var str = url.substring(url.indexOf('?')+1);
var arr = str.split('&');
var len = arr.length;
for(var i =0;i < len;i ++){
var item = arr[i];
var sub = item.slice(0,item.indexOf('='));
ob[sub]= item.slice(item.indexOf('=')+1);
}
return ob;
}

5. form中的input可以设置readonly和disabled，请问这两种属性有什么区别

Readonly和Disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：

Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。

但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去（这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly，但是submit button却是可以使用的）。

两项属性由于差异的存在，使用的场景也有所不同

在某个表单中为用户预填了某个唯一识别代码，不允许用户改动，但是在提交时需要传递该值，此时应该将它的属性设置为readonly。

我们常常在用户按了提交按钮后，利用javascript将提交按钮disabled掉，这样可以防止网络条件比较差的环境下，用户反复点提交按钮导致数据冗余地存入数据库。

6. 常见的结果输出

&&如果前面是假，不管后面是什么都取值为0，如果前面为真，则最后的值就是这个表达式的值(短路与)
console.log(0&&2);//0
console.log(1&&2);//2
console.log(2&&1);//1
&是将所有的转化成2进制再求与（逻辑与）
console.log(1&2);//0
||如果第一个值为真，就直接取为最终值，如果前面为假，就取后面值为最终值。（短路或）
console.log(2||1);//2
console.log(2||0);//2
console.log(0||2);//2
console.log(0||1);//1
|是将所有的转化成2进制再求求并8|1=9（逻辑或）
console.log(2|1);//3

7. 下列的输出值

var obj ={
a:1,
b:function(){console.log(this.a)}
};
var a =2;
var objb = obj.b;
obj.b();//调用环境是obj，所以是1
objb();//调用环境是window，值为2
obj.b.call(window);//window.a不存在所以2

function A(){
}
function B(a){
this.a = a;
}
function C(a){
if(a){
this.a = a;
}
}
//调用原型链上赋值
A.prototype.a =1;
B.prototype.a =1;
C.prototype.a =1;
console.log(new A().a);//1
console.log(new B().a);//undefined
console.log(new C(2).a);//2

原型链的使用
var a =1;
function b(){
var a =2;//如果是var = a;值为undefined 如果没有此句，就是1
function c(){
console.log(a);
}
return c;
}
b()();//2

8. 添加样式使得水平垂直居中


<divstyle="________">
颜海镜
</div>

<divstyle="position: absolute; transform: translate(-50%,-50%); left:50%; top:50%; background: red;">
peter
</div>

9. .书写代码，点击时从1分钟开始，每秒递减到0。

<div onclick="test();">60</div>

function test(){
var m = 2;
var mt = setInterval(function(){ //建立定时器
console.log(m);
if(m==0){
clearInterval(mt);//清除定时器
};
m--;
},1000);
};

<div onclick='javascript:this.style.color="#fff";this.style.backgroundColor="#000";'>前景色白色，背景黑色</div>

来自为知笔记(Wiz)