前端面试题

时间 2019-12-01

标签端面试题繁體版

原文原文链接

3.编写JavaScript脚本生成0~7之间的随机整数(包括0与7)php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1 id="randomNum"></h1>
    <h2>3.编写JavaScript脚本生成0~7之间的随机整数(包括0与7)</h2>
    <p>Math.random()产生的伪随机数介于 0 和 1 之间(含 0,不含 1),也就是返回值可能为0,但老是小于1</p>

    <script>
        var oRandomNum = document.getElementById('randomNum');
        oRandomNum.innerHTML = Math.floor(Math.random()*8);
    </script>
</body>
</html>css

4.var i = 2.1; alert(i>>>0); 弹出来的是什么?html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h2>4.var i = 2.1; alert(i>>>0); 弹出来的是什么?</h2>

    <script>
        var i = 2.1;
        alert(i>>>0);
    </script>
</body>
</html>jquery

弹出来的是2dom

5这段代码输出的结果是？this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <pre>
        function MyObj(){

            this.p.pid++;

        }

        MyObj.prototype.p = {"pid": 0};

        MyObj.prototype.getNum = function(){

            return this.p.pid + num;

        }

        var _obj1 = new MyObj();    //1

        var _obj2 = new MyObj();    //2

        console.log(_obj1.getNum(1) + _obj2.getNum(2));
                        2 + 1              2 + 2
    </pre>


    <script>
        function MyObj(){

            this.p.pid++;

        }

        MyObj.prototype.p = {"pid": 0};

        MyObj.prototype.getNum = function(num){

            return this.p.pid + num;

        }

        var _obj1 = new MyObj();
        var _obj2 = new MyObj();

        console.log(_obj1.getNum(1) + _obj2.getNum(2));
    </script>
</body>
</html>htm

7. var a = document.getElementsByTagName('a');
        for(var i = 0; i < a.length; i++){
            a[i].onclick = function(){
                alert(i);
            }
        }

        本程序要完成的功能是: 点击页面的超连接时,弹出该连接的编号.
        请问该程序执行后,点击页面中的超连接时,会弹出什么值?
        而后修改这段代码(至少提供3种方式)来达到预期效果.对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a{
            text-decoration: none;
            border: 1px solid #f0f;
            width: 50px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #f0f0f0;
            margin-right: 20px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <pre>
        var a = document.getElementsByTagName('a');
        for(var i = 0; i < a.length; i++){
            a[i].onclick = function(){
                alert(i);
            }
        }

        本程序要完成的功能是: 点击页面的超连接时,弹出该连接的编号.
        请问该程序执行后,点击页面中的超连接时,会弹出什么值?
        而后修改这段代码(至少提供3种方式)来达到预期效果.
    </pre>
     <a href="">0</a>
     <a href="">1</a>
     <a href="">2</a>

    <script>
        // 法一:

        var a = document.getElementsByTagName('a');
         for(var i = 0; i < a.length; i++){
             (function(i){
                a[i].onclick = function(){
                     alert(i);
                 }
             })(i)
         }

        // 法二:

        /*var a = document.getElementsByTagName('a');
        for(var i = 0; i < a.length; i++){

            a[i].onclick = (function(i){

                return function(){
                    alert(i);
                }

            })(i);

        }*/

        // 法三:

        /*var a = document.getElementsByTagName('a');
        for(var i = 0; i < a.length; i++){

            a[i].index = i;

            a[i].onclick = function(){

                alert(this.index);

            };

        }*/
    </script>
</body>blog

</html>

8.编写一个类,类中定义以下属性和方法:
        共有属性和共有方法,共有静态属性和共有静态方法,私有属性和私有方法,
        特权属性和特权方法,静态属性和静态方法.
        而后,在代码中经过注释的形式注明上述每一个属性和方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h2{padding: 50px;}
    </style>
</head>
<body>
    <h2>8.编写一个类,类中定义以下属性和方法:
        共有属性和共有方法,共有静态属性和共有静态方法,私有属性和私有方法,
        特权属性和特权方法,静态属性和静态方法.
        而后,在代码中经过注释的形式注明上述每一个属性和方法.</h2>
    <a href="http://jingyan.baidu.com/article/d5c4b52bc2f71dda570dc575.html">详解</a>

    <script>
        //公有属性和公有方法
        function User(name, age){
            this.name = name;   //公有属性
        }

        User.prototype.getName = function(){    //公有方法
            return this.name;
        }

        var user = new User("李小龙", "32");

        console.log(user.getName());    //李小龙


        //私有属性和方法
        function User(name, age){
            var name = name;    //私有属性
            var age = age;
            function alertAge(){    //私有方法
                alert(age);
            }
            alertAge();
        }

        var user = new User("林青霞", "52");


        //静态属性和方法
        /*在php中，无需实例化就能够调用的方法就叫静态方法，js也同样，
         *无需实例化，即用new操做符实化对象，就可调用对象的方法和属性。
        */
        function User(){}
        User.age = 18; //静态属性
        User.myname = '小芳';
        User.getName = function(){
            return this.myname;     //若是这里使用this.name,返回的将是User,因此改用了myname
        }
        console.log(User.getName());    //林青霞


        //特权方法
        function User(name, age){
            var name = name;    //私有属性
            var age = age;
            this.getName = function(){ //特权方法
                return name;    //私有属性个方法不能使用this调用
            }
        }
        var user = new User('奶茶妹',22);
        console.log(user.getName());    //奶茶妹
    </script>
</body>
</html>

9.编写一个方法,求2个字符串的最长公共子串的长度.好比 "sohu.com" 和 "blog.souhu"的最长公共子串是"sohu", 长度为4

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="sweetalert/sweetalert.css"></head><body style="margin: 0"> <h2 style="width:830px; font-size:30px; text-shadow: 1px 1px 2px #000; color: #fff; margin: 20px auto; word-break: break-all;">9.编写一个方法,求2个字符串的最长公共子串的长度.好比 "sohu.com" 和 "blog.souhu"的最长公共子串是"sohu", 长度为4</h2> <script src="sweetalert/jquery-1.11.3.js"></script> <script src="sweetalert/sweetalert.min.js"></script> <script> function getMaxComStr(str1, str2){ var shorter = (str1.length >= str2.length) ? str2 : str1; var longer = (shorter == str1) ? str2 : str1; var len = shorter.length; var comStr = ''; var comStrLen = 0; for(var i = len; i>0; i--){ for(var j = 0; j<len+1; j++){ var str = shorter.substring(i, j); if(longer.indexOf(str) != -1 && str.length > comStrLen){ comStr = str; comStrLen = str.length; } } } return '最长公共子串是:' + comStr + ';长度为:' + comStrLen; } swal({ title: '来自某公司offer请求', text: getMaxComStr('www.baidu.com/index.html','music.baidu.com/index.php'), html: true, imageUrl: '1.gif', //timer: 3000, confirmButtonText: '接受', confirmButtonColor: '#6435c9', closeOnConfirm: false, showCancelButton: true, cancelButtonText: '拒绝', closeOnCancel: false, }, function(isConfirm){ if(isConfirm){ swal('聘请成功', 'Work hard to overcome the rich second generation', 'success'); } else{ swal('未录用', 'Sorry, you need to increase the front-end development skills', 'error'); } }); </script></body></html>