提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

刷题日常计~JS⑤

JS
2023-03-14 22:55:48 时间

题目难度：★★★☆

①接环Tab栏目

描述

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


1.当点击某个栏目（题库、面试、学习、求职）时，该栏目背景色变为’#25bb9b’，其它栏目背景色位’#fff’。

2.当选中某个栏目时，下方内容就展示索引值相同的类名为".items"的"li"元素

注意：

3.必须使用DOM0级标准事件（onclick）

4.已使用自定义属性存储了栏目的索引值。点击栏目获取索引值，使用索引值控制类名为"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代码，要求如下：


1.监听对象属性的变化

2.当"person"对象属性发生变化时，页面中与该属性相关的数据同步更新

3.将输入框中的值与"person"的"weight"属性绑定且当输入框的值发生变化时，页面中与该属性相关的数据同步更新

注意：

4.必须使用Object.defineProperty实现且触发set方法时更新视图

5.必须使用DOM0级标准事件（oninput）

6.可以使用预设代码"_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代码，要求找到参数数组中出现频次最高的数据类型，并且计算出出现的次数，要求以数组的形式返回。

注意：


1.基本数据类型之外的任何引用数据类型皆为"object"

2.当多种数据类型出现频次相同时将结果拼接在返回数组中，出现次数必须在数组的最后

示例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代码，实现一个搜索字体高亮的效果。要求如下：


1.在input框中输入要搜索的内容，当点击查询按钮时，被搜索的字体样式变为加粗，背景色变为’yellow’

2.重新输入搜索文字，点击查询按钮时，去掉上一次的搜索效果，高亮显示效果只加在本次搜索文字上

3.如果搜索不到相关内容，清除之前的效果

注意：

4.需要加粗的文字请使用b标签包裹

5.必须使用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结构并返回。

注意：

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

📰代码演示：

……

最后

image.png

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

image.png

相关文章