前端面试题

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

<!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>

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

<!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>

弹出来的是2

5这段代码输出的结果是?

   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

<!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>

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;
            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>


</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="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>

原文地址:https://www.cnblogs.com/jiechen/p/4975007.html