十五届web模拟题整理

模拟赛一期

1.动态的Tab栏

请在 style.css 文件中补全代码。

当用户向下滚动的高度没有超过标题栏(即 .heading 元素)的高度时,保持 Tab 栏在其原有的位置。当滚动高度超过标题栏的高度时,固定显示 Tab 栏在网页顶部。

 

/* TODO: 请在此补充代码实现tab栏动态固定 */position: sticky;top: 0;

sticky结合了relative和fixed。会在指定的偏移量内保持相对定位的状态,一旦滚动超过这个偏移量,元素就会变成固定定位,保持在容器的视窗中。

2.地球漫游

找到 css/style.csss 文件中的 TODO 部分,完成以下目标:

给 .earth-con 元素添加动画,设置如下:

  • 动画名称: orbit
  • 动画时间: 36.5 秒
  • 速度函数:线性
  • 播放方式:无限循环

 

/* TODO:待补充代码,添加动画 */animation: orbit 36.5s linear infinite;   

3.迷惑的 this

完善 js/index.js 中的 handle 函数中的 TODO 部分,实现以下功能:

  1. 为输入框(即 this.inputEl)绑定 input 事件,当输入框的值发生变化时,调用已经提供的 handleInput 方法进行搜索处理,注意 handleInput 方法调用时的 this 指向应为 search 对象本身。

最终完成的效果如下:

handle() {this.inputEl.addEventListener('input', (e) => this.handleInput(e))
}

4.魔法失灵了

找到 index.html 中 TODO 部分,正确修复代码使 data 对象恢复响应式特性,即点击页面上的 - 与 + 按钮可以改变 value 的值。正确实现后效果如下:

//TODO:待修复代码let { value }=toRefs(data) 

 

  1. toRefs(data): 这是 Vue 3 中的一个辅助函数,用于将响应式对象转换为普通对象,但保留其属性的响应性。它返回一个包含原对象中所有属性的新对象,每个属性都被转换为对应的响应式引用。

  2. let { value } = toRefs(data): 这是使用了解构赋值的语法。它从 toRefs(data) 返回的新对象中提取了 value 属性,并将其赋值给了变量 value。因此,value 变量现在将包含 data 对象中的 value 属性的响应式引用。

 模拟赛二期

1.相不相等

请你编写一个名为 expectFn 的函数,用于帮助开发人员测试他们的代码。它可以通过参数 val 接受任何值,并返回一个对象,该对象包含下面两个函数:

toBe(val):接受另一个值并在两个值相等( === )时返回 true 。如果它们不相等,则返回 "Not Equal" 。
notToBe(val):接受另一个值并在两个值不相等( !== )时返回 true 。如果它们相等,则返回 "Equal" 。
示例如下:

// 示例 1:
输入:console.log(expectFn(5).toBe(5))
输出:true
解释:5 === 5 因此该表达式返回 true。

// 示例 2:
输入:console.log(expectFn(5).toBe(null))
输出:"Not Equal"
解释:5 !== null 因此抛出错误 "Not Equal".

// 示例 3:
输入:console.log(expectFn(5).notToBe(5))
输出:"Equal"
解释:5 === 5 因此抛出错误 "Equal".

// 示例 4:
输入:console.log(expectFn(5).notToBe(null))
输出:true
解释:5 !== null 因此该表达式返回 true.

var expectFn = function(val) {// TODOlet obj={toBe(toBeVal){return val===toBeVal?true:'Not Equal'},notToBe(notToBeVal){return val!==notToBeVal?true:'Equal'}}return obj
};

2.三行情书

请完善 style.css 的 TODO 部分,具体要求如下:

让第一行标题即 .content span 标签中的文字单行显示,多余溢出显示省略号。
请使用 -webkit-box 语法使得下面的文字即 .content p 标签里的内容显示三行,多余溢出显示省略号。

span {font-size: 20px;color: #837362;/* TODO:补充下面的代码 */overflow: hidden;/* 隐藏超出容器的内容 */text-overflow: ellipsis;/* 当内容溢出时以省略号 (...) 替代 */white-space: nowrap;/* 禁止文本换行 */display: block; /* 将元素呈现为块级元素,使其独占一行 */}
p {color: #837362;/* TODO:补充下面的代码 */overflow: hidden; /* 隐藏超出容器的内容 */display: -webkit-box; /* 使用 Flexbox 布局 */-webkit-box-orient: vertical; /* 指定 Flexbox 布局方向为垂直 */-webkit-line-clamp: 3; /* 限制在一个块元素显示的文本的行数 */}

4.老虎机

找到 js/index.js 中的 GetResult 函数,完成此函数,实现以下目标:

点击开始后,可以通过 GetResult的三个参数 r1r2r3 计算出滚动后每一列图片的停留位置。当最后停留的图片都相同时,意味着玩家中了大奖!文字框(class = textPanel)显示“恭喜你,中奖了”,否则显示:“很遗憾,未中奖”。

参数介绍:r1r2r3 表示的是三列元素下的 li 的最后停留位置,分别对应第一列(id=sevenFirst)、第二列(id=sevenSecond)、第三列(id=sevenThird)。以第一列为例,最终显示的元素是 sevenFirst 下的第 r 个 li 元素。请使用显示的 li 元素的 data-point 属性判断三张图片是否相同。当 data-point 属性对应的值相同时,说明这三张图片相同。

在完成之后,请点击“开始”按钮,以下是未中奖和中奖的效果:

 

GetResult(r1, r2, r3) {// TODO 待补充代码//  console.log(r1,r2,r3);const list1 = sevenFirst.childNodes[r1]const list2 = sevenSecond.childNodes[r2]const list3 = sevenThird.childNodes[r3]if(list1.dataset.point == list2.dataset.point == list3.dataset.point){textPanel.innerHTML = '恭喜你,中奖了'}else{textPanel.innerHTML = '很遗憾,未中奖'}}
}

5.星际通讯

完善 index.js 中的 translate 函数,完善其中的 TODO 部分:

translate 函数接收一个字符串参数 alienMessage,其中包含一系列外星人的密文。函数根据特定的翻译规则将密文翻译成人类语言,并返回翻译后的结果字符串。外星人密文翻译规则存放在 codonTable 变量中。

注意:翻译后的结果字符串之间不能有空格

特殊条件:

  • 密文如果为空,直接返回空字符串。
  • 如果密文任意一处无法翻译或遇到找不到对应翻译的密文,则返回字符串无效密语
  • 如果密文中出现了特殊密文对应的翻译结果是 stop,则停止翻译,返回之前已翻译的结果(不包括对应 stop 的密文)

以下为提供部分测试用例,通过测试用例不代表通过全部测试,请确保代码的通用性:

测试用例输入字符串预期输出
1IIXIIIXIV人类你好交个朋友
2VIIIIIXIV哈喽你好交个朋友
3 (只翻译 stop 之前的密语)IIXIIIXXIXIV人类你好
4 (只翻译 stop 之前的密语)IIXXXIIIIXIV人类
5IIXxIIIXIV无效密语
6ax4无效密语
7''''

const translate = (alienMessage) => {// TODO:待补充代码let result = ''// 如果密文为空if(!alienMessage) return resultfor(let i = 0; i < alienMessage.length; i += 3) {// 截取字符串let str = alienMessage.slice(i, i + 3)// 遇到stop直接返回结果if(codonTable[str] == 'stop') return result// 找不到对应密文翻译直接返回字符串无效密语if(!codonTable[str]) return '无效密语'result += codonTable[str]}// 执行到这里说明密语都可翻译,返回结果return result
};

 模拟赛三期

1.创意广告牌

完善 css/style.css 的 TODO 部分,完成以下目标:

  1. 设置 .billboard 元素的圆角为 10px,背景图片为 images 文件夹下的 woodiness.jpg
  2. 设置 .top-sign 元素上面两个角是圆角 15px,下面两个角是直角,元素 X 轴倾斜 -20 度。

 

.billboard {position: relative;background-color: #8e6534;color: #fff;padding: 20px;box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);background-size: cover;/* TODO:待补充代码  设置圆角 10px,背景图片为woodiness.jpg  */border-radius: 10px;background-image: url("../images/woodiness.jpg");
}
.top-sign {position: relative;width: 200px;height: 100px;background-color: #a87f4a;display: flex;justify-content: center;align-items: center;font-size: 1rem;/* TODO:待补充代码   上面两个角是圆角 15px,下面两个角是直角  元素 x 轴倾斜 20度*/border-radius: 15px 15px 0px 0px;transform: skewX(-20deg); 
}

 2.原子化css

本题代码中 div 的其中一个属性为: flex="~ col" ,其中 ~ 代表 flex 本身,表示使用 flex 布局,而 col 代表让 flex 纵向布局。

请补充 css/style.css 中的 TODO 部分,实现相关功能,让 div 完成所需布局。

完成后的界面如图所示:

/* TODO: 实现原子化 flex */
[flex='~ col']{display: flex;flex-direction: column;
}

 3.神秘咒语

完善 index.js 中的 TODO 部分,通过新增或者修改代码,完成以下目标:

点击钥匙 1 和钥匙 2 按钮时会通过 axios 发送请求,在发送请求时需要在请求头中添加 Authorization 字段携带 tokentoken 的值为 2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7

完成后效果如下所示:

// TODO:新增或者修改以下代码key1Button.addEventListener('click', async () => {// 从后台请求钥匙1的咒语部分key1Button.disabled = true;let {data} =  await axios.get('/spellone',{'headers':{'Authorization':'2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7'}})spell1.innerHTML = data;tryOpenTreasureBox();
});key2Button.addEventListener('click', async () => {// 从后台请求钥匙2的咒语部分key2Button.disabled = true;let {data} =  await axios.get('/spelltwo',{'headers':{'Authorization':'2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7'}})spell2.innerHTML = data;tryOpenTreasureBox();
});

 http://t.csdnimg.cn/tSfzG

目前只看了前面这些题,听天由命吧

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/306705.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微服务项目实战-黑马头条(一):环境搭建 + APP登录功能【前端静态资源+nginx反向代理+网关+过滤器】

文章目录 一、搭建nacos二、初始工程的搭建2.1 环境准备2.2主体结构 三、APP登录3.1 需求分析3.2 表结构分析3.3 接口定义3.4 功能实现 四、接口工具postman、swagger、knife4j4.1 postman4.2 swagger4.3 knife4j 五、网关5.1 网关搭建5.2 全局过滤器实现jwt校验 六、前端集成6…

解决PyCharm更新到2024.1版本后不能运行项目的问题

先来看看这个问题的表现吧。 1、运行和调试按钮是灰色的&#xff0c;并且显示编辑器中的文件不可运行&#xff0c;代码也是灰色的&#xff0c;还有我们的python文件的图标和文本文件的图标一样。 当然右键也是没有运行、调试选项。 2、无法创建新的项目和py文件&#xff0c;能…

【静态分析】静态分析笔记01 - Introduction

参考&#xff1a; BV1zE411s77Z [南京大学]-[软件分析]课程学习笔记(一)-introduction_南京大学软件分析笔记-CSDN博客 ------------------------------------------------------------------------------------------------------ 1. program language and static analysis…

动态规划(背包问题)

一:动态规划概述: 动态规划实际上是一种将原本的 大 方面的问题转化为许许多多的 小方面 的一种应用, 在一定程度上避免数据的重复, 并且能够将数据以自己希望的方式进行存储, 用来解决多阶段的数学问题, 从而提高算法的效率 在算法当中, 动态规划主要包括有: 递推, 线性DP 记忆…

ssm040安徽新华学院实验中心管理系统的设计与实现+jsp

实验中心管理系统 摘 要 本安徽新华学院实验中心管理系统的设计目标是实现安徽新华学院实验中心的信息化管理&#xff0c;提高管理效率&#xff0c;使得安徽新华学院实验中心管理工作规范化、科学化、高效化。 本文重点阐述了安徽新华学院实验中心管理系统的开发过程&#x…

ssm044基于java和mysql的多角色学生管理系统+jsp

学生管理系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本学生管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处…

分享一下项目中遇到的排序失效问题

今天把原来的一个查询接口的业务代码进行了优化&#xff0c;减少了十几行冗余的代码。 原来的代码 ChongwuServiceImpl.java /*** author heyunlin* version 1.0*/ Slf4j Service public class ChongwuServiceImpl implements ChongwuService {Overridepublic JsonResult<…

【Algorithms 4】算法(第4版)学习笔记 24 - 5.5 数据压缩

文章目录 前言参考目录学习笔记1&#xff1a;介绍2&#xff1a;游程编码 run-length encoding2.1&#xff1a;介绍2.2&#xff1a;Java 实现3&#xff1a;霍夫曼压缩 Huffman compression3.1&#xff1a;变长前缀码 variable-length codes3.1.1&#xff1a;介绍3.1.2&#xff1…

基于ssm餐饮掌上设备点餐系统论文

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了餐饮掌上设备点餐系统的开发全过程。通过分析餐饮掌上设备点餐系统管理的不足&#xff0c;创建了一个计算机管理餐饮掌上设备点餐系统的方案。文章介绍了餐饮掌…

OpenHarmony编译构建系统

这篇来聊聊OpenHarmony的编译构建&#xff0c;经过前面的实践&#xff0c;再来看编译构建。 编译构建概述 在官网中提到了&#xff0c;OpenHarmony编译子系统是以GN和Ninja构建为基座&#xff0c;对构建和配置粒度进行部件化抽象、对内建模块进行功能增强、对业务模块进行功能…

代码随想录第38天| 509. 斐波那契数 70. 爬楼梯

理论基础 刷题大纲&#xff1a; 动态规划5步曲&#xff1a; 1、确定dp数组以及下标的含义 2、确定递推公式 3、dp数组如何初始化 4、确定遍历顺序 5、举例推导dp数组 509. 斐波那契数 509. 斐波那契数 - 力扣&#xff08;LeetCode&#xff09; 代码随想录 (programmercarl.co…

数据结构-----枚举、泛型进阶(通配符?)

文章目录 枚举1 背景及定义2 使用3 枚举优点缺点4 枚举和反射4.1 枚举是否可以通过反射&#xff0c;拿到实例对象呢&#xff1f; 5 总结 泛型进阶1 通配符 ?1.1 通配符解决什么问题1.2 通配符上界1.3 通配符下界 枚举 1 背景及定义 枚举是在JDK1.5以后引入的。主要用途是&am…

RAID磁盘阵列

一.raid简介 独立硬盘冗余阵列&#xff0c;旧称廉价磁盘冗余阵列&#xff0c;简称磁盘阵列。利用虚拟化存储技术把多个硬盘组合起来&#xff0c;成为一个或多个硬盘阵列组&#xff0c;目的为提升性能或数据冗余&#xff0c;或是两者同时提升。RAID把多个硬盘组合成为一个逻辑硬…

【Docker】docker快速安装部署fastdfs的镜像详细记录

部署nacos的docker镜像 第一步&#xff1a; 获取fastdfs镜像1、查看镜像列表2、创建本地映射文件夹 第二步&#xff1a;运行镜像1.使用docker镜像构建tracker服务2.使用docker镜像构建Storage服务3.Storage服务中默认安装了Nginx服务4.如果需要修改storage则配置则进到以下目录…

python用循环新建多个列表

​在Python编程中&#xff0c;我们经常需要创建多个列表来存储和管理数据。有时候&#xff0c;列表的数量是已知的&#xff0c;我们可以手动逐一创建&#xff1b;但更多时候&#xff0c;列表的数量是动态的&#xff0c;或者我们希望通过某种模式来批量生成列表。这时候&#xf…

典型新能源汽车热管理系统方案分析

目前行业具有代表性的热管理系统有PTC电加热方案、热泵方案&#xff08;特斯拉八通阀热泵、吉利直接式热泵&#xff09;、威马的柴油加热方案以及以理想为代表的插电式混动车方案。 小鹏P7整车热管理方案分析&#xff08;PTC电加热方案&#xff09; 小鹏P7作为小鹏汽车的第2款…

设计模式——组合模式08

组合模式&#xff1a;把类似对象或方法组合成结构为树状的设计思路。 例如部门之间的关系。 设计模式&#xff0c;一定要敲代码理解 抽象组件 /*** author ggbond* date 2024年04月06日 08:54* 部门有&#xff1a;二级部门&#xff08;下面管三级部门&#xff09; 三级部门 &a…

网工内推 | 网络工程师,13薪,周末双休,华三、华为认证优先

01 路邦远大 招聘岗位&#xff1a;网络工程师 职责描述&#xff1a; 1、配合市场销售人员&#xff0c;做好产品的售后服务工作&#xff1b; 2、负责项目方案安装调试指导以及日常客户使用培训&#xff0c;对客户提出的问题提出解决方案&#xff1b; 3、为客户提供专业、规范的…

solidity(3)

地址类型 pragma solidity ^0.8.0;contract AddressExample {// 地址address public _address 0x7A58c0Be72BE218B41C608b7Fe7C5bB630736C71;address payable public _address1 payable(_address); // payable address&#xff0c;可以转账、查余额// 地址类型的成员uint256…

小样本计数网络FamNet(Learning To Count Everything)

小样本计数网络FamNet(Learning To Count Everything) 大多数计数方法都仅仅针对一类特定的物体&#xff0c;如人群计数、汽车计数、动物计数等。一些方法可以进行多类物体的计数&#xff0c;但是training set中的类别和test set中的类别必须是相同的。 为了增加计数方法的可拓…