刷题日常计~JS⑤

请添加图片描述

@作者 : SYFStrive

@博客首页 : 点击跳转HomePage

📜： 初编程JavaScript之每天10🗡6题 👉 从质变到量变💪

🔥：给大家推荐一款的刷题神器（有很多值得学习的编程题目😘）

🔥：🏆🏆🏆 神器链接🔗（一起刷起来吧( ఠൠఠ )ﾉ）

📌：个人社区（欢迎大佬们加入） 👉：社区链接🔗

💃：坚持锻炼💪

🔗：

①：👉
JS入门到精通（🔥待更）
②：👉
刷题日常计~JS（🔥待更）

题目目录

提示：以下是本篇文章正文内容

题目难度：★★★☆

①接环Tab栏目

描述
请补全JavaScript代码，实现效果如下：

当点击某个栏目（题库、面试、学习、求职）时，该栏目背景色变为’#25bb9b’，其它栏目背景色位’#fff’。
当选中某个栏目时，下方内容就展示索引值相同的类名为".items"的"li"元素注意：
必须使用DOM0级标准事件（onclick）
已使用自定义属性存储了栏目的索引值。点击栏目获取索引值，使用索引值控制类名为"items"下的"li"元素

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

<head>
    <meta charset="UTF-8">
    <style>
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        .options li {
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: solid 1px #ddd;
        }
        
        .items li {
            width: 405px;
            height: 405px;
            display: none;
            border: solid 1px #ddd;
        }
    </style>
</head>

<body>
    <ul class='options'>
        <li data-type="0" style='background-color: #25bb9b;'>题库</li>
        <li data-type="1">面试</li>
        <li data-type="2">学习</li>
        <li data-type="3">求职</li>
    </ul>
    <ul class='items'>
        <li style="display: block;">牛客题库，包含编程题、选择题等</li>
        <li>为你的面试提供一站式服务</li>
        <li>校招学习来牛客</li>
        <li>求职中有什么难题，可以联系我们</li>
    </ul>

    <script>
        let options = document.querySelector('.options');
        // ★★★ [].slice === Array.prototype.slice 👉  true
        // Array.prototype.slice是定义的方法,可以被重写
        // [].silce是使用定义的方法
        let optionItems = Array.prototype.slice.call(document.querySelectorAll('.options li'));
        let items = Array.prototype.slice.call(document.querySelectorAll('.items li'));
        // 补全代码
        options.onclick = function(event) {
            for (let i in optionItems) {
                if (event.target === optionItems[i]) {
                    optionItems[i].style.backgroundColor = '#25bb9b'
                    items[i].style.display = 'block'
                } else {
                    optionItems[i].style.backgroundColor = '#fff'
                    items[i].style.display = 'none'
                }
            }
        }
    </script>
</body>

</html>

②双向绑定描述

描述
请补全JavaScript代码，要求如下：

监听对象属性的变化
当"person"对象属性发生变化时，页面中与该属性相关的数据同步更新
将输入框中的值与"person"的"weight"属性绑定且当输入框的值发生变化时，页面中与该属性相关的数据同步更新注意：
必须使用Object.defineProperty实现且触发set方法时更新视图
必须使用DOM0级标准事件（oninput）
可以使用预设代码"_render"函数

📰代码演示：

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

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

<body>
    <style>
        ul {
            list-style: none;
        }
    </style>
    <input type="text">
    <ul></ul>

    <script>
        var ul = document.querySelector('ul');
        var person = {
            sex: '男',
            age: '25',
            name: '王大锤',
            height: 28,
            weight: 32
        };
        var inp = document.querySelector('input');
        inp.value = person.weight;
        const _render = () => {
            var str = `<li>姓名：<span>${person.name}</span></li>
                           <li>性别：<span>${person.sex}</span></li>
                           <li>年龄：<span>${person.age}</span></li>
                           <li>身高：<span>${person.height}</span></li>
                           <li>体重：<span>${person.weight}</span></li>`
            ul.innerHTML = str;
            inp.value = person.weight;
        }
        _render();
        // 补全代码
        //用户输入时触发oninput事件
        inp.oninput = function(e) {
            person.weight = this.value;
        }

        console.log(Object.keys(person))
            // ['sex', 'age', 'name', 'height', 'weight']
            // Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。
        Object.keys(person).forEach(key => {
            let value = person[key];
            Object.defineProperty(person, key, {
                set(newValue) {
                    if (newValue != value) {
                        value = newValue
                        _render();
                    }
                },
                get() {
                    return value
                }
            })
        })
    </script>
</body>

</html>

③高频数据类型

描述
请补全JavaScript代码，要求找到参数数组中出现频次最高的数据类型，并且计算出出现的次数，要求以数组的形式返回。
注意：

基本数据类型之外的任何引用数据类型皆为"object"
当多种数据类型出现频次相同时将结果拼接在返回数组中，出现次数必须在数组的最后

示例1

输入：__findMostType([0,0,‘’,‘’])

输出：[‘number’,‘string’,2]或[‘string’,‘number’,2]

📰代码演示：

<!DOCTYPE html>
<html>

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

<body>
    <!--描述-->
    <!--请补全JavaScript代码，要求找到参数数组中出现频次最高的数据类型，并且计算出出现的次数，要求以数组的形式返回。-->
    <!--注意：-->
    <!--1. 基本数据类型之外的任何引用数据类型皆为"object"-->
    <!--2. 当多种数据类型出现频次相同时将结果拼接在返回数组中，出现次数必须在数组的最后-->

    <!--示例1-->
    <!--输入：-->
    <!--__findMostType([0,0,'',''])-->
    <!--输出：-->
    <!--['number','string',2]或['string','number',2]-->
    <script type="text/javascript">
        const _findMostType = array => {
            // 补全代码
            let index = {}
            let maxNum = 0
            let arr = []
            array.forEach(item => {
                //三元判断类型是否相等
                let type = (typeof item) ? (typeof item) : 'object'

                //相等就+1 否者等于1
                index[type] = index[type] ? index[type] + 1 : 1

                // 该类型出现的最大次数
                maxNum = maxNum > index[type] ? maxNum : index[type]
            })

            // 将出现次数相同的添加的数组里
            Object.keys(index).forEach(key => {
                if (index[key] == maxNum) {
                    arr.push(key)
                }
            })

            // 把出现最多次数的类型次数push到数末尾
            arr.push(maxNum)
            return arr
        }
        console.log(_findMostType([0, 0, '', '']))
    </script>

</body>

</html>

④字体高亮

描述
请补全JavaScript代码，实现一个搜索字体高亮的效果。要求如下：

在input框中输入要搜索的内容，当点击查询按钮时，被搜索的字体样式变为加粗，背景色变为’yellow’
重新输入搜索文字，点击查询按钮时，去掉上一次的搜索效果，高亮显示效果只加在本次搜索文字上
如果搜索不到相关内容，清除之前的效果注意：
需要加粗的文字请使用b标签包裹
必须使用DOM0级标准事件（onclick）

📰代码演示

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

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

<body>
    <input type="text">
    <button style="margin-right: 80px">查询</button>
    <div class="text" style="margin-top: 70px">
        牛客网隶属于北京牛客科技有限公司，牛客网成立于 2014 年 9 月，是以科技和创新驱动的教育科技公司。牛客网坚持以前沿技术服务于技术、以人工智能和大数据提升学习效率，专注探索在线教育创新模式，致力于为技术求职者提供能力提升解决方案，同时为企业级用户提供更高效的招聘解决方案，并为二者搭建桥梁，构建从学习到职业的良性生态圈。 发展至今，牛客网在技术类求职备考、社群交流、企业招聘服务等多个垂直领域影响力均在行业中遥遥领先，产品矩阵包括IT题库、在线编程练习、线上课程、交流社区、竞赛平台、笔面试服务、ATS系统等，用户覆盖全国高校百万IT学习者并在高速增长中，同时也为京东、百度、腾讯、滴滴、今日头条、华为等200多家企业提供校园招聘、编程竞赛等线上服务，并收获良好口碑。
    </div>

    <!--描述-->
    <!--请补全JavaScript代码，实现一个搜索字体高亮的效果。要求如下：-->
    <!--1. 在input框中输入要搜索的内容，当点击查询按钮时，被搜索的字体样式变为加粗，背景色变为'yellow'-->
    <!--2. 重新输入搜索文字，点击查询按钮时，去掉上一次的搜索效果，高亮显示效果只加在本次搜索文字上-->
    <!--3. 如果搜索不到相关内容，清除之前的效果-->
    <!--注意：-->
    <!--1. 需要加粗的文字请使用b标签包裹-->
    <!--2. 必须使用DOM0级标准事件（onclick）-->

    <script>
        var text = document.querySelector(".text");
        var search = document.querySelector("input");
        const btn = document.querySelector("button");
        btn.onclick = () => {
            // 补全代码
            // 当第一个 "Microsoft" 被找到，它就被替换为 "Runoob"：
            let input = search.value
            let newText = text.innerText
            console.log(input)
            if (input) {
                newText = text.innerText.replace(
                    // 使用正则
                    // 在 JScript 表达式中，正则表达式后面的全局标志 ('g') 表示该表达式将用来在输入字符串中查找尽可能多的匹配。
                    new RegExp(input, 'g'),
                    `<b style="background-color:yellow;">${input}</b>`
                )
            }
            text.innerHTML = newText
        }
    </script>
</body>

</html>

⑤虚拟DOM

描述

请补全JavaScript代码，要求将对象参数转换为真实的DOM结构并返回。

注意：

tag为标签名称、props为属性、children为子元素、text为标签内容

📰代码演示：

……

最后

1、码农日常刷题 👉 通过刷题认识到自己的不足，增加对该编程语法的熟练度（可以很大程度提升自己的编程水平(ง •_•)ง）
2、感谢大佬们的支持，你们的支持是我们更新的最大动力，希望这篇文章能帮到大家
3、最后，在这里分享一款刷题神器（里面还有很多值得学习的题目）点击跳转至刷题神器（一起刷起来吧( ఠൠఠ )💪），

在这里插入图片描述

下篇文章再见ヾ(￣▽￣)ByeBye

在这里插入图片描述

标签： javascript 前端开发语言

本文转载自: https://blog.csdn.net/m0_61490399/article/details/126423364
版权归原作者 SYFStrive 所有，如有侵权，请联系我们删除。

刷题日常计~JS⑤

题目目录

题目难度：★★★☆

①接环Tab栏目

②双向绑定描述

③高频数据类型

④字体高亮

⑤虚拟DOM

最后

发表评论

“刷题日常计~JS⑤”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航