闭包定时器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已修复)

  1. 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比前三个浏览器获取的高度偏大。
  2. 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);
}

你可能感兴趣的:(闭包定时器bom)