春

新

乐

快

I am poor and inexperienced.

【HTML】基础的知识每日一练（下）

Lucky 2024-01-06 419

51、FED53 阻止默认事件

请补全JavaScript函数，要求在点击id为”checkbox”的复选框时不会取消勾选状态。

注意：需要自行获取input元素。

<body>
    <form>
        <label>牛客会陪伴大家</label>
        <input id="checkbox" type="checkbox" checked />
    </form>
    <script type="text/javascript">
        // 填写JavaScript
        // let a = document.getElementById('checkbox')
        // let a = document.querySelector('input')
        let a = document.getElementsByTagName('input')[0]
        a.onclick = function (e) {
            e.preventDefault()
        }
    </script>
</body>

52、FED54 url地址

请补全JavaScript函数，实现一个函数返回页面当前url。

<script type="text/javascript">
    function getUrlHref() {
        // 补全代码
        return window.location.href
    }      
</script>

53、FED55 点击按钮隐藏元素

请补全JavaScript代码，实现一个盒子的关闭按钮功能。

要求：

使类为”btn”的div元素中心点定位在类为”box”的div元素右上顶点
使类为”btn”的div元素中内容”X”垂直水平居中
点击”X”按钮可以使类为”box”的div元素隐藏

<!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;
            /*补全代码*/
            top: -10px;
            right: -10px;
            position: absolute;
            line-height: 20px;
            text-align: center;
        }
    </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>

54、数组求和

计算并返回给定数组 arr 中所有元素的总和

输入描述：

[ 1, 2, 3, 4 ]

输出描述：

<script type="text/javascript">
    // 填写JavaScript
    function sum(arr) {
        let sum = 0
        arr.forEach((element) => {
            sum += element
        })
        return sum
    }
</script>

55、移除数组

arr 中的所有值与 item 相等的元素。不要直接修改数组 arr，结果返回新的数组

输入描述:

输出描述:

[1, 3, 4]

示例1

输入

[1, 2, 3, 4, 2], 2

输出

[1, 3, 4]

<script type="text/javascript">
    // 填写JavaScript
    function remove(arr, item) {
        // let newarr = []
        // arr.map((element) => {
        //     if(element == item){}
        //     else{ newarr.push(element)}
        // })
        // return newarr
        return arr.filter((element) => {
            return element != item
        })
    }
</script>

56、FED58 移除数组中的元素

移除数组 arr 中的所有值与 item 相等的元素，直接在给定的 arr 数组上进行操作，并将结果数组返回

输入：

[1, 2, 2, 3, 4, 2, 2], 2

输出：

[1, 3, 4]

<script type="text/javascript">
    function removeWithoutCopy(arr, item) {
        for (let i = arr.length - 1; i >= 0; i--) {
            if (arr[i] == item) {
                arr.splice(i, 1)
            }
        }
        return arr
    }
</script>

57、FED59 添加元素

在数组 arr 末尾添加元素 item。结果返回新的数组。

注意：不要直接修改数组 arr!!!

输入描述：

[1, 2, 3, 4], 10

输出描述：

[1, 2, 3, 4, 10]

<script type="text/javascript">
    // 填写JavaScript
    function append(arr, item) {
        let newarr = arr.concat(item)
        return newarr
    }
</script>

58、FED60 删除数组最后一个元素

删除数组 arr 最后一个元素。不要直接修改数组 arr，结果返回新的数组

示例1

输入：

[1, 2, 3, 4]

输出：

[1, 2, 3]

<script type="text/javascript">
    function truncate(arr) {
        return arr.slice(0, arr.length - 1)
    }
</script>

59、FED61 添加元素

在数组 arr 开头添加元素 item。不要直接修改数组 arr，结果返回新的数组

输入

[1, 2, 3, 4], 10

输出

[10, 1, 2, 3, 4]

<script type="text/javascript">
    function prepend(arr, item) {
        let result = arr.slice(0, arr.length)
        result.unshift(item)
        return result
    }
</script>

60、FED62 删除数组第一个元素

删除数组 arr 第一个元素。不要直接修改数组 arr，结果返回新的数组

输入描述：

[1, 2, 3, 4]

输出描述：

[2, 3, 4]

<script type="text/javascript">
    // 填写JavaScript
    function curtail(arr) {
        let result = arr.slice(1)
        return result
    }
</script>

61、FED63 数组合并

合并数组 arr1 和数组 arr2。不要直接修改数组 arr，结果返回新的数组

输入描述:

[1, 2, 3, 4], [‘a’, ‘b’, ‘c’, 1]

输出描述:

[1, 2, 3, 4, ‘a’, ‘b’, ‘c’, 1]

<script type="text/javascript">
    // 填写JavaScript
    function concat(arr1, arr2) {
        return arr1.concat(arr2)
    }
</script>

62、FED64 添加元素

在数组 arr 的 index 处添加元素 item。不要直接修改数组 arr，结果返回新的数组

示例1

输入

[1, 2, 3, 4], ‘z’, 2

输出

[1, 2, ‘z’, 3, 4]

<script type="text/javascript">
    // 填写JavaScript
    function insert(arr, item, index) {
        let result = arr.slice(0)
        result.splice(index, 0, item)
        return result
    }
</script>

63、FED65 求二次方

为数组 arr 中的每个元素求二次方。不要直接修改数组 arr，结果返回新的数组

输入

[1, 2, 3, 4]

输出

[1, 4, 9, 16]

<script type="text/javascript">
    // 填写JavaScript
    function square(arr) {
        return arr.map((element) => {
            return Math.pow(element, 2)
        })
    }
</script>

64、FED66 查找元素位置

在数组 arr 中，查找值与 item 相等的元素出现的所有位置

示例1

输入

[‘a’,’b’,’c’,’d’,’e’,’f’,’a’,’b’,’c’] ‘a’

输出

[0, 6]

<script type="text/javascript">
    // 填写JavaScript
    function findAllOccurrences(arr, target) {
        let a = []
        for (let i = 0; i < arr.length; i++) {
            if (target == arr[i])
                a.push(i);
        }
        return a
    }
</script>

65、FED68 正确的使用 parseInt

修改 js 代码中 parseInt 的调用方式，使之通过全部测试用例

示例1

输入：’12’

输出：12

示例2

输入：’12px’

输出：12

示例3

输入：’0x12′

输出：0

<script type="text/javascript">
    // 填写JavaScript
    function parse2Int(num) {
        return parseInt(num, 10);
    }
</script>

66、FED69 完全等同

判断 val1 和 val2 是否完全等同

<script type="text/javascript">
    // 填写JavaScript
    function identity(val1, val2) {
        return Object.is(val1, val2);
    }
</script>

67、FED70 或运算

返回参数 a 和 b 的逻辑或运算结果

示例1

输入：

false, true

复制

输出：

true

<script type="text/javascript">
    function or(a, b) {
        return a || b
    }
</script>

68、FED71 且运算

返回参数 a 和 b 的逻辑且运算结果

输入描述:

false, true

输出描述:

false

<script type="text/javascript">
    // 填写JavaScript
    function and(a, b) {
        return a && b
    }
</script>

69、FED72 字符串字符统计

统计字符串中每个字符的出现频率，返回一个 Object，key 为统计字符，value 为出现频率

不限制 key 的顺序
输入的字符串参数不会为空
忽略空白字符

输入描述：

‘hello world’

输出描述：

{h: 1, e: 1, l: 3, o: 2, w: 1, r: 1, d: 1}

<script type="text/javascript">
    // 填写JavaScript
    function count(str) {
        let obj = {}
        for (let item of str) {
            if (item === "") continue;
            if (item in obj) {
                obj[item]++
            } else {
                obj[item] = 1
            }
        }
        return obj
    }
</script>

70、FED73 加粗文字

使用一个标签将“牛客网”三个字加粗显示

<body>
    <!-- 填写标签 -->
    <p>牛客网，程序员必备求职神器</p>
    <script type="text/javascript">
        // 填写JavaScript
        let p = document.querySelector('p')
        p.innerHTML = `<strong>牛客网</strong>` + '，程序员必备求职神器'
    </script>
</body>

71、FED74 段落标识

请将下面这句话以段落的形式展示在浏览器中——“牛客网是一个专注于程序员的学习和成长的专业平台。”

<body>
    <!-- 填写标签 -->
    <p>牛客网是一个专注于程序员的学习和成长的专业平台。</p>
    <script type="text/javascript">
        // 填写JavaScript
    </script>
</body>

72、FED75 设置文字颜色

请使用嵌入样式将所有p标签设置为红色文字

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        /* 填写样式 */
        p {
            color: red
        }
    </style>
</head>
<body>
    <!-- 填写标签 -->
    <p>欢迎来到牛客网</p>
    <p>在这里，我们为你提供了IT名企的笔试面试题库</p>
    <p>在这里，我们以题会友</p>
    <script type="text/javascript">
        // 填写JavaScript
    </script>
</body>
</html>

73、FED76 圣诞树

圣诞节来啦！请用CSS给你的朋友们制作一颗圣诞树吧~这颗圣诞树描述起来是这样的：

“topbranch”是圣诞树的上枝叶，该上枝叶仅通过边框属性、左浮动、左外边距即可实现。边框的属性依次是：宽度为100px、是直线、颜色为green（未显示的边框颜色都为透明）
“middleBranch”是圣诞树的中枝叶，该上枝叶仅通过边框属性即可实现。边框的属性依次是：宽度为200px、是直线、颜色为green（未显示的边框颜色都为透明）
“base”是圣诞树的树干，该树干仅通过左外边距实现居中于中枝叶。树干的宽度、高度分别为70px、200px，颜色为gray。

注意：

上枝叶、树干的居中都是通过左外边距实现的
没有显示的边框，其属性都是透明（属性）
仅通过border属性完成边框的所有属性设置

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

I am poor and inexperienced.

【HTML】基础的知识每日一练（下）

51、FED53 阻止默认事件

52、FED54 url地址

53、FED55 点击按钮隐藏元素

54、数组求和

56、FED58 移除数组中的元素

57、FED59 添加元素

58、FED60 删除数组最后一个元素

59、FED61 添加元素

60、FED62 删除数组第一个元素

61、FED63 数组合并

62、FED64 添加元素

63、FED65 求二次方

64、FED66 查找元素位置

65、FED68 正确的使用 parseInt

66、FED69 完全等同

67、FED70 或运算

68、FED71 且运算

69、FED72 字符串字符统计

70、FED73 加粗文字

71、FED74 段落标识

72、FED75 设置文字颜色

73、FED76 圣诞树

Lucky博客

近期文章