问题总结（三）

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

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

1. .demo{
2. width:100px;
3. height:1px;
4. background:red;
5. overflow:hidden;
6. }

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既是保持原形不缩放。 

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

注意书写顺序，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并将参数解析成为一个对象 。

1. function parseQueryString(url){
2. var ob ={};
3. var str = url.substring(url.indexOf('?')+1);
4. var arr = str.split('&');
5. var len = arr.length;
6. for(var i =0;i < len;i ++){
7. var item = arr[i];
8. var sub = item.slice(0,item.indexOf('='));
9. ob[sub]= item.slice(item.indexOf('=')+1);
10. }
11. return ob;
12. }

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. 常见的结果输出

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

7. 下列的输出值

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

1. function A(){
3. }
4. function B(a){
5. this.a = a;
6. }
7. function C(a){
8. if(a){
9. this.a = a;
10. }
11. }
12. //调用原型链上赋值
13. A.prototype.a =1;
14. B.prototype.a =1;
15. C.prototype.a =1;
17. console.log(new A().a);//1
18. console.log(new B().a);//undefined
19. console.log(new C(2).a);//2

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

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

1. <!--题目-->
2. <divstyle="________">
3. 颜海镜
4. </div>
5. <!--答案-->
6. <divstyle="position: absolute; transform: translate(-50%,-50%); left:50%; top:50%; background: red;">
7. peter
8. </div>

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

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

1. function test(){
2. var m = 2;
3. var mt = setInterval(function(){ //建立定时器
4. console.log(m);
5. if(m==0){
6. clearInterval(mt);//清除定时器
7. };
8. m--;
9. },1000);
10. };

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

来自为知笔记(Wiz)