- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

【牛客编程题】零基础入门前端之73题（html，css，ES5，WebAPI）

小哈里发表于 2022/08/04 22:55:12 2022/08/04

【摘要】【牛客编程题】零基础入门前端之73题做题链接：https://www.nowcoder.com/exam/oj?page=1&tab=HTML%2FCSS&topicId=260 ...

【牛客编程题】零基础入门前端之73题
做题链接：https://www.nowcoder.com/exam/oj?page=1&tab=HTML%2FCSS&topicId=260

文章目录

01 HTML

FED1 表单类型

<form>
    <!-- 补全代码 -->
    <input type="password" value="nowcoder">
    </input>
    <input type="checkbox" checked>
    </input>
</form>


  
 
  1
  2
  3
  4
  5
  6
  7
  8

FED2 表格结构

<table>
    <!-- 补全代码 -->
    <caption>nowcoder</caption>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14

FED3 图像标签属性

<!-- 补全代码 -->
<img src="路径" title="标题" alt="代替">

  
 
  1
  2

FED4 新窗口打开文档

<!-- 补全代码 -->
<a href="http://" target="_blank">标签</a>

  
 
  1
  2

FED5 自定义列表

<dl>
    <!-- 补全代码 -->
    <dt>nowcoder</dt>
    <dd>nowcoder</dd>
</dl>

  
 
  1
  2
  3
  4
  5

FED73 加粗文字

<p><strong>牛客网</strong>，程序员必备求职神器</p>

  
 
  1

FED6 语义化标签

<!-- 补全代码 -->
<header>       
    <nav>导航</nav>
</header>


  
 
  1
  2
  3
  4
  5

FED7 音频媒体标签属性

<!-- 补全代码 -->
<audio controls>
    <source src="s.mp3" type="audio/mp3"/>
    audio
</audio>


  
 
  1
  2
  3
  4
  5
  6

FED8 视频媒体标签属性

<!-- 补全代码 -->
<video controls onerror="a()"></video>


  
 
  1
  2
  3

02 CSS

FED9 CSS选择器——标签、类、ID选择器

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            div{
                font-size:20px
            }
            div:nth-child(1){
                color:rgb(255, 0, 0)
            }
            .green{
                color:rgb(0, 128, 0)
            }
            #black{
                color:rgb(0, 0, 0)
            }
        </style>
    </head>
    <body>
        <div >红色</div>
        <div class='green'>绿色</div>
        <div id='black'>黑色</div>
    </body>
</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25

FED10 CSS选择器——伪类选择器

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            li:nth-child(2n){
                background-color: rgb(255, 0, 0)
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </body>
</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19

FED11 CSS选择器——伪元素

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            div::after{
                content: "";
                width: 20px;
                height: 20px;
                background-color: rgb(255,0,0);
                display: block;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18

FED12 按要求写一个圆

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            div{border-radius:50px; border:1px solid #000; width:100px;height:100px;}
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12

FED13 设置盒子宽高

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            .box {
                width: 100px;
                height: 100px;
                margin: 10px;
                padding: 20px
            }
        </style>
    </head>
    <body>
        <div class="box">
        </div>
    </body>
</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18

FED74 段落标识

<p>牛客网是一个专注于程序员的学习和成长的专业平台。</p>


  
 
  1
  2

FED75 设置文字颜色

p
{
    color:red;
}

  
 
  1
  2
  3
  4

FED76 圣诞树

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .topbranch {
                width: 0px;
                height: 0px;
                /*
                * TODO: 上枝叶效果
                */
                float:left;
                margin:0 auto;
                border:100px solid green;
                border-left-color:transparent;
                border-right-color:transparent;
                border-top-color:transparent;
                margin-left:100px;
            }
            .middleBranch {
                width: 0px;
                height: 0px;
                /*
                * TODO: 中枝叶效果
                */
                border:200px solid green;
                border-left-color:transparent;
                border-right-color:transparent;
                border-top-color:transparent;
            }
            .base {
                /*
                * TODO: 树干效果
                */
                width: 70px;
                height: 200px;
                background:gray;
                margin-left:165px
            }
        </style>
    </head>
    <body>
    	<section class="topbranch"></section>
        <section class="middleBranch"></section>
        <section class="base"></section>
    </body>
</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47

FED14 浮动和清除浮动

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .wrap {
                /*补全代码*/
                overflow:hidden;
            }
             .left {
                width: 100px;
                height: 100px;
                /*补全代码*/
                float:left;
            }
             .right {
                width: 100px;
                height: 100px;
                /*补全代码*/
                float:left;
            }
        </style>
    </head>
    <body>
        <div class='wrap'>
            <div class='left'></div>
            <div class='right'></div>
        </div>
    </body>
</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29

FED15 固定定位

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                /*补全代码*/
                position: fixed;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
        <div class='box'></div>
    </body>
</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18

FED18 CSS单位（一）

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                /*补全代码*/
                height:100px;
                width:100px
            }
        </style>
    </head>
    <body>
        <div class='box'></div>
    </body>
</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

FED19 CSS单位（二）

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            div {
                /*补全代码*/
                height:100px;
                width:100px
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

03 ES5

FED20 基本数据类型检测

function _typeof(value) {
    // 补全代码
    return typeof(value);
}

  
 
  1
  2
  3
  4

FED21 检测复杂数据类型

function _instanceof(left,right) {
    // 补全代码
    return (left instanceof right);
}

  
 
  1
  2
  3
  4

FED22 数据类型转换

function _splice(left,right) {
    // 补全代码
    return String(left)+String(right)
}

  
 
  1
  2
  3
  4

FED23 阶乘

function _factorial(number) {
    // 补全代码
    var sum = 1;
    for(var i = 1; i <= number; i++){
        sum *= i;
    }
    return sum
}

  
 
  1
  2
  3
  4
  5
  6
  7
  8

FED24 绝对值

function _abs(number) {
    // 补全代码
    return number>0 ? number : -number
}

  
 
  1
  2
  3
  4

FED25 幂

function _pow(number,power) {
    // 补全代码
    var sum = 1;
    for(let i = 1; i <= power; i++){
        sum *= number;
    }
    return sum;
}

  
 
  1
  2
  3
  4
  5
  6
  7
  8

FED26 平方根

function _sqrt(number) {
    // 补全代码
    return Math.sqrt(number);
}

  
 
  1
  2
  3
  4

FED27 余数

function _remainder(value) {
    // 补全代码
    return value%2;
}

  
 
  1
  2
  3
  4

FED56 数组求和

function sum(arr) {
    let sum = 0;
    for(let i = 0; i < arr.length; i++){
        sum += arr[i];
    }
    return sum;
}

  
 
  1
  2
  3
  4
  5
  6
  7

FED69 完全等同

function identity(val1, val2) {
    return val1 === val2;
}

  
 
  1
  2
  3

FED70 或运算

function or(a, b) {
    return a || b;
}

  
 
  1
  2
  3

FED71 且运算

function and(a, b) {
    return a && b;
}

  
 
  1
  2
  3

FED72 字符串字符统计

function count(str) {
    let obj = {};
    for(let i = 0; i < str.length; i++){
        if(str[i] !== ' '){
            var ch = str[i];
            if(obj[ch] !== undefined)obj[ch] = obj[ch]+1;
            else obj[ch] = 1;
        }
    }
    return obj;
}

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

FED28 返回星期数

function _getday(value) {
    // 补全代码
    let arr = ['天', '一', '二', '三', '四', '五', '六'];
    return `星期${arr[value%7]}`
}

  
 
  1
  2
  3
  4
  5

FED29 从大到小排序

function _sort(array) {
    // 补全代码
    return array.sort((a,b)=>{ 
        return b-a
    })
}

  
 
  1
  2
  3
  4
  5
  6

FED30 大写字符串

function _touppercase(string) {
    // 补全代码
    return string.toUpperCase();
}

  
 
  1
  2
  3
  4

FED31 对象属性键名

function _keys(object) {
    // 补全代码
    let arr = [];
    for(let x in object){
        arr.push(x);
    }
    return arr;
}

  
 
  1
  2
  3
  4
  5
  6
  7
  8

FED32 对象数字

function _numbertoobject(number) {
    // 补全代码
    return {number};
}

  
 
  1
  2
  3
  4

FED33 对象字符串

function _stringtoobject(string) {
    // 补全代码
    return {string};
}

  
 
  1
  2
  3
  4

FED34 去除字符串两端空格

function _trim(string) {
    // 补全代码
    return string.trim();
}

  
 
  1
  2
  3
  4

FED35 输出日期

function _date(number) {
    // 补全代码
    let date = new Date(number);
    return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;
}

  
 
  1
  2
  3
  4
  5

FED36 数字取整

function _int(value) {
    // 补全代码
    return parseInt(value);
}

  
 
  1
  2
  3
  4

FED37 数组反转

function _reverse(array) {
    // 补全代码
    return array.reverse(array);
}

  
 
  1
  2
  3
  4

FED38 数组转字符串

function _join(array) {
    // 补全代码
    return array.join('');
}

  
 
  1
  2
  3
  4

FED39 数组最大值

function _max(array) {
    // 补全代码
    array.sort(function(a,b){
        return b-a;
    })
    return array[0];
}

  
 
  1
  2
  3
  4
  5
  6
  7

FED40 搜索数字

function _search(string) {
    // 补全代码
    return string.search(/[0-9]/) >= 0 ? true : false;
}

  
 
  1
  2
  3
  4

FED41 头部插入元素

function _unshift(array,value) {
    // 补全代码
    return array.unshift(value);
}

  
 
  1
  2
  3
  4

FED42 尾部插入元素

function _push(array,value) {
    // 补全代码
    return array.push(value);
}

  
 
  1
  2
  3
  4

FED43 js-位置查找

function _indexof(array,value) {
    // 补全代码
    return array.indexOf(value);
}

  
 
  1
  2
  3
  4

FED44 向下取整

function _floor(number) {
    // 补全代码
    return Math.floor(number);
}

  
 
  1
  2
  3
  4

FED45 整数反转

function _reverse(number) {
    // 补全代码
    let num = String(Math.abs(number)).split('').reverse().join('')
    return num > 0 ? Number(num): -Number(num)
}

  
 
  1
  2
  3
  4
  5

FED46 字符串搜索

function _search(string,value) {
    // 补全代码
    return string.indexOf(value)==-1 ? false : true
}

  
 
  1
  2
  3
  4

FED57 移除数组中的元素

function remove(arr, item) {
    return arr.filter(function(val,index,arr){
        return val!=item;
    })
}

  
 
  1
  2
  3
  4
  5

FED58 移除数组中的元素

function removeWithoutCopy(arr, item) {
    for(let i = 0; i < arr.length; i++){
        if(arr[i]==item){
            arr.splice(i,1)
            i--;
        }
    }
    return arr;
}

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9

FED59 添加元素

function append(arr, item) {
    return arr.concat([item]);
}

  
 
  1
  2
  3

FED60 删除数组最后一个元素

function truncate(arr) {
    let arr2 = arr.slice();
    arr2.pop();
    return arr2;
}

  
 
  1
  2
  3
  4
  5

FED61 添加元素

function prepend(arr, item) {
    let arr2 = arr.slice();
    arr2.unshift(item);
    return arr2;
}

  
 
  1
  2
  3
  4
  5

FED62 删除数组第一个元素

function curtail(arr) {
    let arr2 = arr.slice(0);
    arr2.shift(arr[0])
    return arr2;
}

  
 
  1
  2
  3
  4
  5

FED63 数组合并

function concat(arr1, arr2) {
    return arr1.concat(arr2);
}

  
 
  1
  2
  3

FED64 添加元素

function insert(arr, item, index) {
    let arr2 = arr.slice(0);
    arr2.splice(index,0,item)
    return arr2;
}

  
 
  1
  2
  3
  4
  5

FED65 求二次方

function square(arr) {
    var arr2 = [];
    arr.forEach(function(e){
        arr2.push(e*e)
    })
    return arr2; 
}

  
 
  1
  2
  3
  4
  5
  6
  7

FED66 查找元素位置

function findAllOccurrences(arr, target) {
    let arr2 = []
    arr.forEach((item, index)=>{
        if(item == target){
            arr2.push(index)
        }
    })
    return arr2;
}

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9

FED68 正确的使用 parseInt

function parse2Int(num) {
    return parseInt(num, 10);
}

  
 
  1
  2
  3

FED47 函数——参数对象

function getArguments (a,b,c) {
    // 补充代码
    return arguments;
}

  
 
  1
  2
  3
  4

FED48 this指向

var obj = {
    a: 1,
    b: 2,
    fn: function(){
        // 补全代码
        return obj.a+obj.b;
    }
}

  
 
  1
  2
  3
  4
  5
  6
  7
  8

04 WebAPI

FED49 JS动态创建节点

<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <ul></ul>
    </body>
    <script type="text/javascript">
        function createLi(array){
            // 补全代码
            let ul = document.querySelector('ul');
            for ( let i = 0; i < array.length; i++){
                let li = document.createElement('li');
                li.innerHTML = array[i];
                ul.appendChild(li);
            }
        }
    </script>
</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19

FED50 根据ID获取元素

function getLI(id){
    // 补全代码
    return document.querySelector(`#${id}`);
}

  
 
  1
  2
  3
  4

FED51 JS修改元素内容

<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <div class='box'></div>
    </body>
    <script type="text/javascript">
        function modifyText(){
            // 补全代码
            let div = document.getElementsByClassName('box')[0];
            div.textContent = '欢迎来到牛客网';
        }
    </script>
</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

FED52 阻止冒泡事件

<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <ul>
            <li>nowcoder</li>
        </ul>
    </body>
    <script type="text/javascript">
        // 补全代码
        let li = document.querySelector('li');
        li.addEventListener("click",function(e){
            e.stopPropagation();
        })
    </script>
</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17

FED53 阻止默认事件

<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <form>
            <label>牛客会陪伴大家</label>
            <input id="checkbox" type="checkbox" checked />
        </form>
    </body>
    <script type="text/javascript">
        // 补全代码
        let cbox = document.getElementById('checkbox')
        cbox.addEventListener('click',(e)=>{
            e.preventDefault()
        })
    </script>
</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18

FED54 url地址

function getUrlHref (){
    // 补全代码
    return location.href;
}

  
 
  1
  2
  3
  4

05 综合练习

FED55 点击按钮隐藏元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                border: solid 1px black;
                /*补全代码*/
                position:relative;
            }
            .btn{
                width: 20px;
                height: 20px;
                background-color: red;
                /*补全代码*/
                position:absolute;
                right:-10px;
                top:-10px;
                text-align:center;
                line-height:20px;
            }
        </style>
    </head>
    <body>

        <div class='box'>
            <div class='btn'>X</div>
        </div>

        <script type="text/javascript">
            var btn = document.querySelector('.btn');
            var box = document.querySelector('.box');
            btn.onclick = function(){
                // 补全代码
                box.style.display = "none"
            }
        </script>
    </body>
</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41

文章来源: gwj1314.blog.csdn.net，作者：小哈里，版权归原作者所有，如需转载，请联系作者。

原文链接：gwj1314.blog.csdn.net/article/details/126059730

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入