题目难度：★★★☆

①接环Tab栏目

描述

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

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

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

注意：

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

4.已使用自定义属性存储了栏目的索引值。点击栏目获取索引值，使用索引值控制类名为"items"下的"li"元素

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><style>ul {
padding: 0;
margin: 0;
list-style: none;
        }
        .optionsli {
float: left;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
border: solid1px#ddd;        }
        .itemsli {
width: 405px;
height: 405px;
display: none;
border: solid1px#ddd;        }
</style></head><body><ulclass='options'><lidata-type="0"style='background-color: #25bb9b;'>题库</li><lidata-type="1">面试</li><lidata-type="2">学习</li><lidata-type="3">求职</li></ul><ulclass='items'><listyle="display: block;">牛客题库，包含编程题、选择题等</li><li>为你的面试提供一站式服务</li><li>校招学习来牛客</li><li>求职中有什么难题，可以联系我们</li></ul><script>letoptions=document.querySelector('.options');
// ★★★ [].slice === Array.prototype.slice 👉  true// Array.prototype.slice是定义的方法,可以被重写// [].silce是使用定义的方法letoptionItems=Array.prototype.slice.call(document.querySelectorAll('.options li'));
letitems=Array.prototype.slice.call(document.querySelectorAll('.items li'));
// 补全代码options.onclick=function(event) {
for (letiinoptionItems) {
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"函数

📰代码演示：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"></head><body><style>ul {
list-style: none;
        }
</style><inputtype="text"><ul></ul><script>varul=document.querySelector('ul');
varperson= {
sex: '男',
age: '25',
name: '王大锤',
height: 28,
weight: 32        };
varinp=document.querySelector('input');
inp.value=person.weight;
const_render= () => {
varstr=`<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=> {
letvalue=person[key];
Object.defineProperty(person, key, {
set(newValue) {
if (newValue!=value) {
value=newValue_render();
                    }
                },
get() {
returnvalue                }
            })
        })
</script></body></html>

③高频数据类型

描述

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

注意：

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

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

示例1

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

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

📰代码演示：

<!DOCTYPEhtml><html><head><metacharset=utf-8></head><body><!--描述--><!--请补全JavaScript代码，要求找到参数数组中出现频次最高的数据类型，并且计算出出现的次数，要求以数组的形式返回。--><!--注意：--><!--1.基本数据类型之外的任何引用数据类型皆为"object"--><!--2.当多种数据类型出现频次相同时将结果拼接在返回数组中，出现次数必须在数组的最后--><!--示例1--><!--输入：--><!--__findMostType([0,0,'',''])--><!--输出：--><!--['number','string',2]或['string','number',2]--><scripttype="text/javascript">const_findMostType=array=> {
// 补全代码letindex= {}
letmaxNum=0letarr= []
array.forEach(item=> {
//三元判断类型是否相等lettype= (typeofitem) ? (typeofitem) : 'object'//相等就+1 否者等于1index[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)
returnarr        }
console.log(_findMostType([0, 0, '', '']))
</script></body></html>

④字体高亮

描述

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

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

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

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

注意：

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

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

📰代码演示

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"></head><body><inputtype="text"><buttonstyle="margin-right: 80px">查询</button><divclass="text"style="margin-top: 70px">牛客网隶属于北京牛客科技有限公司，牛客网成立于2014年9月，是以科技和创新驱动的教育科技公司。牛客网坚持以前沿技术服务于技术、以人工智能和大数据提升学习效率，专注探索在线教育创新模式，致力于为技术求职者提供能力提升解决方案，同时为企业级用户提供更高效的招聘解决方案，并为二者搭建桥梁，构建从学习到职业的良性生态圈。发展至今，牛客网在技术类求职备考、社群交流、企业招聘服务等多个垂直领域影响力均在行业中遥遥领先，产品矩阵包括IT题库、在线编程练习、线上课程、交流社区、竞赛平台、笔面试服务、ATS系统等，用户覆盖全国高校百万IT学习者并在高速增长中，同时也为京东、百度、腾讯、滴滴、今日头条、华为等200多家企业提供校园招聘、编程竞赛等线上服务，并收获良好口碑。</div><!--描述--><!--请补全JavaScript代码，实现一个搜索字体高亮的效果。要求如下：--><!--1.在input框中输入要搜索的内容，当点击查询按钮时，被搜索的字体样式变为加粗，背景色变为'yellow'--><!--2.重新输入搜索文字，点击查询按钮时，去掉上一次的搜索效果，高亮显示效果只加在本次搜索文字上--><!--3.如果搜索不到相关内容，清除之前的效果--><!--注意：--><!--1.需要加粗的文字请使用b标签包裹--><!--2.必须使用DOM0级标准事件（onclick）--><script>vartext=document.querySelector(".text");
varsearch=document.querySelector("input");
constbtn=document.querySelector("button");
btn.onclick= () => {
// 补全代码// 当第一个 "Microsoft" 被找到，它就被替换为 "Runoob"：letinput=search.valueletnewText=text.innerTextconsole.log(input)
if (input) {
newText=text.innerText.replace(
// 使用正则// 在 JScript 表达式中，正则表达式后面的全局标志 ('g') 表示该表达式将用来在输入字符串中查找尽可能多的匹配。newRegExp(input, 'g'),
`<b style="background-color:yellow;">${input}</b>`                )
            }
text.innerHTML=newText        }
</script></body></html>

⑤虚拟DOM

描述

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

注意：

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

📰代码演示：

……

最后

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

刷题日常计~JS⑤

题目难度：★★★☆

①接环Tab栏目

②双向绑定描述

③高频数据类型

④字体高亮

⑤虚拟DOM

最后

热门文章

最新文章

相关电子书