牛客前端机试题

最新推荐文章于 2024-06-08 14:10:23 发布

王汪汪吖

最新推荐文章于 2024-06-08 14:10:23 发布

阅读量892

点赞数

分类专栏： js 文章标签：前端 servlet java

本文链接：https://blog.csdn.net/weixin_43791884/article/details/125963547

版权

js 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

获取文件名：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        
        <script>
            const _getExFilename = (filename) => {
                // 补全代码
                let nameArr=filename.split('.');
                let name=nameArr[nameArr.length-1];
                return '.'+name
            }
        </script>
    </body>
</html>

写出一个三角形：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <div class='triangle'></div>

  <script>
    var triangle = document.querySelector('.triangle');
    // 补全代码
    str = '';
    for (var i = 0; i < 3; i++) {
      for (var j = 0; j <= i; j++) {
        str += '*';
      }
      str += '</br>';
    }
    triangle.innerHTML = str;
  </script>
</body>

</html>

分隔符（12,300）

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            function _comma(number) {
                // 补全代码
                if(number<1000){
                    return number.toString();
                }else{
                   return  _comma(Math.floor(number/1000))+","+_comma(number%1000);
                }
                
            }
        </script>
    </body>
</html>

单向数据绑定：

<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8>
</head>

<body>
  <input id="input" type="text" />
  <span id="span"></span>

  <script type="text/javascript">
    // 补全代码
    document.getElementById('input').onchange = function () {
      document.getElementById("span").innerHTML = this.value
    }
  </script>
</body>

</html>

数组排序：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <button class='up'>销量升序</button>
        <button class='down'>销量降序</button>
        <ul></ul>

        <script>
            var cups = [
                { type: 1, price: 100, color: 'black', sales: 3000, name: '牛客logo马克杯' },
                { type: 2, price: 40, color: 'blue', sales: 1000, name: '无盖星空杯' },
                { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },
                { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }
            ]
            var ul = document.querySelector('ul');
            var upbtn = document.querySelector('.up');
            var downbtn = document.querySelector('.down');
            // 补全代码
           upbtn.onclick = function(){
                ul.innerHTML = ''
                cups.sort(function(a,b){
                    return a.sales - b.sales;
                })
              
                for(let i =0;i <cups.length;i++){
                    let li = document.createElement('li');
                    li.innerHTML  = `${cups[i].name}`
                    ul.appendChild(li)
                }
            }
            downbtn.onclick = function(){
                ul.innerHTML = '';
                cups.sort(function(a,b){
                    return b.sales - a.sales;
                })
              
                for(let i =0;i <cups.length;i++){
                    let li = document.createElement('li');
                    li.innerHTML  = `${cups[i].name}`
                    ul.appendChild(li)
                }
            }
        </script>
    </body>
</html>

数组去重（双重for循环）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>

  <script>
    var arr = [2, 2, 3, 5, 6, 9, 5, 2, 3, 5, 4, 8, 9, 5, 5, 2, 4, 55, 7, 4, 4];
    for (var i = 0; i < arr.length; i++) {
      for (var j = 0; j < i; j++) {
        if (arr[i] === arr[j]) {
          arr.splice(i, 1);
          i--;
        }
      }
    }
    console.log(arr);
  </script>
</body>

</html>

数组去重+排序：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>

  <script>
    var arr = [2, 2, 3, 5, 6, 9, 5, 2, 3, 5, 4, 8, 9, 5, 5, 2, 4, 55, 7, 4, 4];
    for (var i = 0; i < arr.length; i++) {
      for (var j = 0; j < i; j++) {
        if (arr[i] === arr[j]) {
          arr.splice(i, 1);
          i--;
        }
      }
    }
    arr.sort(function (a, b) {
      return b - a
    })
    console.log(arr);
  </script>
</body>

</html>

计数器：

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            const closure = () => {
                // 补全代码
                let count=0
                return function(){
                    count++
                    return count
                }
            }
        </script>
    </body>
</html>

动态列表渲染：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <ul></ul>

  <script>
    var people = [
      { name: '牛油1号', id: 1, age: 20 },
      { name: '牛油2号', id: 2, age: 21 },
      { name: '牛油3号', id: 3, age: 19 },
    ]
    var ul = document.querySelector('ul');
    // 补全代码
    people.sort(function (a, b) {
      return a.id - b.id
    })
    var frag = document.createDocumentFragment();
    people.forEach(item => {
      var li = document.createElement('li');
      li.innerText = `${item.name}${item.id}${item.age}`
      frag.append(li)
    });
    ul.append(frag)
  </script>
</body>

</html>

模板字符串：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <h2></h2>

  <script>
    var person = {
      level: '2',
      name: '小丽',
      registTime: '2021-11-01',
    }
    var h2 = document.querySelector('h2');
    // 补全代码
    let start = new Date(person.registTime).getTime();

    let end = Date.now();
    let day = Math.floor((end - start) / (1000 * 60 * 60 * 24));
    h2.innerText = `尊贵的牛客网${person.level}级用户${person.name}您好，您已经注册牛客网${day}天啦~`
  </script>
</body>

</html>

类继承:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            class Human {
                constructor(name) {
                    this.name = name
                    this.kingdom = 'animal'
                    this.color = ['yellow', 'white', 'brown', 'black']
                }
                // 补全代码
                getName(){
                    return this.name
                }
                
            }

            // 补全代码
            class Chinese extends Human {
                constructor(name,age){
                    super(name)
                    this.age=age
                }
                getAge(){
                    return this.age
                }
            }
        </script>
    </body>
</html>

参数解析(获取？后面的参数)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>

  <script>
    var url = "http://192.168.100.47:8080/cloud-manage/html/cloud-monitor/detail.html?IP=192.168.106.17";

    if (url.indexOf("?") != -1) {
      console.log(url.substr(1));
      var str = url.substr(1);
      strs = str.split("&");
      console.log(strs);
      strs[0].split("=")[1];
      var ip = strs[0].split("=")[1];
      console.log(ip);
    }


  </script>
</body>

</html>