大学生做的网站,游戏网站建设赚钱,asp静态网站源码,wordpress淘宝客api模拟赛一期
1.动态的Tab栏
请在 style.css 文件中补全代码。
当用户向下滚动的高度没有超过标题栏#xff08;即 .heading 元素#xff09;的高度时#xff0c;保持 Tab 栏在其原有的位置。当滚动高度超过标题栏的高度时#xff0c;固定显示 Tab 栏在网页顶部。 /* TODO…模拟赛一期
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 部分实现以下功能:
为输入框即 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) toRefs(data): 这是 Vue 3 中的一个辅助函数用于将响应式对象转换为普通对象但保留其属性的响应性。它返回一个包含原对象中所有属性的新对象每个属性都被转换为对应的响应式引用。 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 valtoBeVal?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的三个参数 r1、r2、r3 计算出滚动后每一列图片的停留位置。当最后停留的图片都相同时意味着玩家中了大奖文字框class textPanel显示“恭喜你中奖了”否则显示“很遗憾未中奖”。
参数介绍r1、r2、r3 表示的是三列元素下的 li 的最后停留位置分别对应第一列idsevenFirst、第二列idsevenSecond、第三列idsevenThird。以第一列为例最终显示的元素是 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 部分完成以下目标
设置 .billboard 元素的圆角为 10px背景图片为 images 文件夹下的 woodiness.jpg。设置 .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
目前只看了前面这些题听天由命吧
