闭包定时器bom

题目1: 下面的代码输出多少？修改代码让 fnArr[i]() 输出 i。使用 两种以上的方法

var fnArr = [];
for (var i = 0; i < 10; i ++) {
    fnArr[i] =  function(){
        return i;
    };
}
console.log( fnArr[3]() );  //'10'

//方法一
var fnArr = [];
for (var i = 0; i < 10; i ++) {
    (function(i){
        fnArr[i] =  function(){
        return i;
    };
    })(i)
    }
console.log( fnArr[3]() );
//方法二
var fnArr = [];
for (var i = 0; i < 10; i ++) {
    fnArr[i] =  (function(i){
        return function () {
            return i;
        };
    })(i);
}
console.log( fnArr[3]() );
//方法三
var fnArr = [];
for (let i = 0; i < 10; i ++) {
    fnArr[i] =  function(){
        return i;
    };
}
console.log( fnArr[3]() );

题目2： 封装一个汽车对象，可以通过如下方式获取汽车状态

var Car = (function(){
    var speed = 0;
    function setSpeed(s){
        return speed = s;
    }
    function getSpeed() {
        return speed;
    }
    function accelerate() {
        return speed += 10;
    }
    function decelerate() {
        return speed > 0 ? speed -= 10 : speed;
    }
    function getStatus() {
        return speed > 0 ? 'running':'stop';
    }
    return {
        "setSpeed": setSpeed,
        "getSpeed": getSpeed,
        "accelerate": accelerate,
        "decelerate": decelerate,
        "getStatus": getStatus
    }
})();
Car.setSpeed(30);
Car.getSpeed(); //30
Car.accelerate();
Car.getSpeed(); //40;
Car.decelerate();
Car.decelerate();
Car.getSpeed(); //20
Car.getStatus(); // 'running';
Car.decelerate();
Car.decelerate();
Car.getStatus();  //'stop';
//Car.speed;  //error

题目3：下面这段代码输出结果是? 为什么?

var a = 1;
setTimeout(function(){
    a = 2;
    console.log(a);//‘2’,setTimeout指定的代码，必须等到本次执行的所有代码都执行完，才会执行
}, 0);
var a ;
console.log(a);//'1'
a = 3;
console.log(a);//'3'

题目4：下面这段代码输出结果是? 为什么?

var flag = true;
setTimeout(function(){//等到本次执行的所有代码都执行完，才会执行
    flag = false;
},0)
while(flag){}//首先执行，此时setTimeout未执行，flag恒为true，因此这一句会无限循环
console.log(flag);//因为上一句代码无限循环，所以这一句不会执行

题目5： 下面这段代码输出？如何输出 delayer: 0, delayer:1...（使用闭包来实现）

for(var i=0;i<5;i++){
    setTimeout(function(){
         console.log('delayer:' + i );
    }, 0);
    console.log(i);
}

输出：

0
1
2
3
4
delayer:5
delayer:5
delayer:5
delayer:5
delayer:5

使用闭包实现输出delayer: 0, delayer:1...：

for(var i=0;i<5;i++){
    setTimeout((function(i){
        return function () {
            console.log('delayer:' + i );
        }
    })(i), 0);
    console.log(i);
}

或

for(var i=0;i<5;i++){
    (function (i) {
        setTimeout(function(){
            console.log('delayer:' + i );
        }, 0);
    })(i);

    console.log(i);
}

题目6： 如何获取元素的真实宽高

1. clientWidth和clientHeight
   这组属性可以获取元素可视区的大小，可以得到元素内容及内边距所占据的空间大小。返回了元素大小，但没有单位，默认单位是px，如果你强行设置了单位，比如100em之类，它还是会返回px的大小。(CSS获取的话，是照着你设置的样式获取)。对于元素的实际大小，clientWidth和clientHeight理解方式如下：
   a. 增加边框，无变化；
   b. 增加外边距，无变化；
   c. 增加滚动条，最终值等于原本大小减去滚动条的大小；
   d. 增加内边距，最终值等于原本大小加上内边距的大小；

#test{
   background-color: green;
   width: 200px;
   height: 200px;
   border: solid 5px red;  /* 对应a理解，结果：200,200 */
   margin: 10px;  /* 对应b理解，结果：200,200*/
   padding: 20px;  /* 对应c理解，结果：240,240*/
   overflow: scroll;  /* 对应d理解，结果：223,223，>223=200（css大小）+40（两边内边距）-17（滚动条宽度）*/
}
window.onload = function(){
   var obj = document.getElementById("test");
   alert(obj.clientWidth + "," + obj.clientHeight);
};

如果没有设置任何CSS的宽和高度，那么非IE浏览器会算上滚动条和内边距的计算后的大小，而IE浏览器则返回0（IE8已修复）

2. scrollWidth和scrollHeight
   这组属性可以获取滚动内容(可见内容)的元素大小。返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，它会得到计算后的宽度和高度。对于元素的实际大小，scrollWidth和scrollHeight理解如下:
   ①.增加边框，不同浏览器有不同解释（下面在IE8中运行正常，IE6运行不正常）：
   a. Firefox和Opera浏览器会增加边框的大小，220x220
   b. IE、Chrome和Safari浏览器会忽略边框大小，200x200
   c. IE浏览器只显示它本来内容的高度，200x18（IE8已经修改该问题）
   ②.增加内边距，最终值会等于原本大小加上内边距大小，220x220，IE为220x38。
   ③. 增加滚动条，最终值会等于原本大小减去滚动条大小，184x184，IE为184x18
   ④. 增加外边据，无变化。
   ⑤. 增加内容溢出，Firefox、Chrome和IE获取实际内容高度，Opera比前三个浏览器获取的高度偏小，Safari比前三个浏览器获取的高度偏大。
3. offsetWidth和offsetHeight
   这组属性可以返回元素实际大小，包含边框、内边距和滚动条。返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，他会得到计算后的宽度和高度。对于元素的实际大小，offsetWidth和offsetHeight理解如下：
   ①.增加边框，最终值会等于原本大小加上边框大小，为220；
   ②.增加内边距，最终值会等于原本大小加上内边距大小，为220；
   ③.增加外边据，无变化；
   ④.增加滚动条，无变化，不会减小；
   对于元素大小的获取，一般是块级(block)元素并且以设置了CSS大小的元素较为方便。如果是内联元素(inline)或者没有设置大小的元素就尤为麻烦

test div element
#test{
   background-color: green;
   width: 200px;
   height: 200px;
   border: solid 10px red; /*结果：220,220*/
   margin: 10px; /*结果：220,220（无变化）*/
   padding: 10px; /*结果：240,240*/
   overflow：scroll; /*结果：240,240（无变化）*/
}
window.onload = function(){
   var obj = document.getElementById("test");
   alert(obj.offsetWidth + "," + obj.offsetHeight);
};

http://www.jb51.net/article/61460.htm

题目7： URL 如何编码解码？为什么要编码？

• url为什么要编码？

URL 是可移植的（portable）。它要统一地命名因特网上所有的资源，这也就意味着要通过各种不同的协议来传送这些资源。这些协议在传输数据时都会使用不同的机制，所以，设计 URL，使其可以通过任意因特网协议安全地传输是很重要的。
安全传输意味着 URL 的传输不能丢失信息。有些协议，比如传输电子邮件的简单邮件传输协议（Simple Mail Transfer Protocol，SMTP），所使用的传输方法就会剥去一些特定的字符。为了避开这些问题，URL 只能使用一些相对较小的、通用的安全字母表中的字符。
除了希望 URL 可以被所有因特网协议进行传送之外，设计者们还希望URL也可供人类阅读。因此，即使不可见、不可打印的字符能够穿过邮件程序，从而成为可移植的，也不能在 URL 中使用。
URL 还得是完整的，这就使问题变得更加复杂了。URL 的设计者们认识到有时人们可能会希望 URL 中包含除通用的安全字母表之外的二进制数据或字符。因此，需要有一种转义机制，能够将不安全的字符编码为安全字符，再进行传输。

• URL如何编码解码？
  JavaScript提供四个URL的编码/解码方法。
  decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
  区别
  encodeURI方法不会对下列字符编码
  ASCII字母
数字
~!@#$&*()=:/,;?+'
  encodeURIComponent方法不会对下列字符编码
  ASCII字母
数字
~!*()'
  所以encodeURIComponent比encodeURI编码的范围更大。
  encodeURIComponent会把http://编码成http%3A%2F%2F，而encodeURI却不会。
  如果需要编码整个URL，然后需要使用这个URL，那么用encodeURI。

  encodeURI("http://www.cnblogs.com/season-huang/some other thing"); 
  //"http://www.cnblogs.com/season-huang/some%20other%20thing";
  

  其中，空格被编码成了%20。但是如果用了encodeURIComponent，那么结果变为

  "http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2Fsome%20other%20thing"
  

  当需要编码URL中的参数的时候，那么encodeURIComponent是最好方法。

  var param = "http://www.cnblogs.com/season-huang/"; 
  //param为参数param = encodeURIComponent(param);
  var url = "http://www.cnblogs.com?next=" + param;
  console.log(url) 
  //"http://www.cnblogs.com?next=http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2F"
  

题目8： 补全如下函数，判断用户的浏览器类型

function isAndroid(){
    return /Android/.test(navigator.userAgent);
}
function isIphone(){
    return /Iphone/.test(navigator.userAgent);
}
function isIpad(){
    return /Ipad/.test(navigator.userAgent);
}
function isIOS(){
    return /(Ipad)|(Iphone)/.test(navigator.userAgent);
}