奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > 前端面试通 > 笔经面经 >

猎上网前端面试题(可以查资料,可以问人)

时间:2017-10-31 21:23来源: 作者:
/** * * ~~~~~~~ * 1. JS *///1.1[] == ![]; // 输出==false//1.2var

/**

* * ~~~~~~~

* 1. JS

*/

//1.1

[] == ![]; // 输出==>false

//1.2

var a = function( k ) { return false; };

a() && [] == ![]; // 输出==>true

//1.3

var k = true;

var a = function( k ){

    var k = k && true;

    return k;

};

a() && [] == ![]; // 输出==>undefined

//1.4

/**

* 在不动1.3的原有代码情况下,

* 使其 a() && [] == ![] 输出我们想要的答案

*/

var k = true;

var a = function( k ){

    var k = k && true;

    return k;

};

在这个区域输入什么代码,使其下列输出正常值

a(k) && [] == ![];

将k作为参数传递到a函数中则返回true

//1.5

var arr = [ 1, 2 ];

arr.b = “123”;

arr.toString(); // 输出==> 1,2

//1.6

var o = {

    a : 2,

    b : function(){

        this.a = 3;

        (function(){

            alert( this.a ); // 输出==>第一次运行是undefined,第二就是4,因为这里的this对象指向的window对象

            this.a = 4;

        })();

        alert( this.a ); // 输出==>3

        return { d : o.a + 3 };

    }

};

o.b();

o.b.d; // 输出==>undefined,因为o.b返回的b函数的定义。正确是o.b().d。只有o.b()这个函数执行之后返回的对象中存在d这个属性

//1.7

var i = 1, j = m = 0;

function a ( k ){

return k = k + 1;

}

j = a( i );

function a ( k ){

return k = k + 3;

}

m = a ( i );

j //输出==> 4

m //输出==> 4

函数声明会提前执行,函数表达式则按顺序执行。前者代码执行之前(解释期)被加载到作用域中,后者则需在代码执行时(运行期)加载

//1.8 alert 结果

alert( typeof a);

function a(){

    alert( “a.function” );

}

var a = “a.string”;

alert( a );

Function

  1. String

    原因:如上

    //1.9 alert 结果

    var o = {

        a : function(){

            alert ( this.c );

        },

        c : ” Hunteron ”

    };

    ( f = o.a )();

    Undefined,需要输出”Hunteron “,应该将this改为o。因为o.a的函数定义赋值给全局变了f,然后由window对象来调用这个表达式所以this指向的则是window对象

    /* ~~~~~~~

    * 2. CSS

    */

    // 2.1 要求只用下列HTML标签写出邮件附件图片效果

    // 要求:

    //    1. chrome22+, ff3+ 正常显示

    // 2. 不能在HTML标签里添加任何选择器

    // 3. 格内文字垂直,水平居中

    // 4. 不能使用JS

    /**

    <html>

    <body>

    <div>

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5.0</div>

    <div>6</div>

    <div>7</div>

    <div>8</div>

    <div>9</div>

    </div>

    </body>

    </html>

    */

    <!DOCTYPE html>

    <!–需要加上文档声明否则部分css会实效–>

    <html>

    <head>

        <style type=”text/css”>

        *{

            margin: 0;

            padding: 0

        }

        body div{

            width:165px;

            height:165px;

            border: 10px solid #ccc;

        }

        div div{

            width: 50px;

            height: 50px;

            border: 5px solid blue;

            margin: 0 -5px -5px 0;

            float: left;

            position: relative;

            z-index: 0;

            text-align: center;

            line-height: 50px;

            cursor: pointer;

        }

        div div:hover{

            z-index: 1;

            border-color: red;

        }

        </style>

    </head>

    <body>

    <div>

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5.0</div>

    <div>6</div>

    <div>7</div>

    <div>8</div>

    <div>9</div>

    </div>

    </body>

    </html>

    //2.2 同样邮件附件图片效果

    //要求:

    //1. 可以自定义HTML标签

    //2. 可以添加任何选择器

    //3. 兼容所有常见浏览器,IE6~10,Chrome,FF,Oprea,safari 等

    //4. 不能使用JS


    <!DOCTYPE html>

    <!–需要加上文档声明否则部分css会实效–>

    <html>

    <head>

        <style type=”text/css”>

        *{

            margin: 0;

            padding: 0

        }

        ul{

            width:165px;

            height:165px;

            border: 10px solid #ccc;

        }

        ul li{

            width: 50px;

            height: 50px;

            border: 5px solid blue;

            margin: 0 -5px -5px 0;

            float: left;

            position: relative;

            z-index: 0;

            text-align: center;

            line-height: 50px;

            cursor: pointer;

            list-style-type:none;

        }

        ul li:hover{

            z-index: 1;

            border-color: red;

        }

        </style>

    </head>

    <body>

    <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5.0</li>

    <li>6</li>

    <li>7</li>

    <li>8</li>

    <li>9</li>

    </ui>

    </body>

    </html>

    //2.3

    //要求:

    //1. 同2.1

    //2. 可以使用JS

    //3. 兼容所有常见浏览器,IE6~10,Chrome,FF,Oprea,safari 等


    <!DOCTYPE html>

    <!–需要加上文档声明否则部分css会实效–>

    <html>

    <head>

    <style tyle=”text/css”>

        body div{

            width:165px;

            height:165px;

            border: 10px solid #ccc;

        }

        div div{

            width: 50px;

            height: 50px;

            border: 5px solid blue;

            margin: 0 -5px -5px 0;

            float: left;

            position: relative;

            z-index: 0;

            text-align: center;

            line-height: 50px;

            cursor: pointer;

        }

        .mark{

            z-index: 1;

            border-color: red;

        }

    </style>

        <script type=”text/javascript” src=”jquery.min.js”></script>

        <script type=”text/javascript”>

        $(document).ready(function(){

            $(“div div”).each(function(){

                $(this).on(“mouseover”,function(){

                    $(this).addClass(“mark”);

                }).on(“mouseout”,function(){

                    $(this).removeClass(“mark”);

                })

            })

        })

        </script>

    </head>

    <body>

    <div>

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5.0</div>

    <div>6</div>

    <div>7</div>

    <div>8</div>

    <div>9</div>

    </div>

    </body>

    </html>

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
小邱 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-26 17:11 最后登录:2018-04-22 10:04
栏目列表
推荐内容

关注奔三路小程序,方便你我他