devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

蓝桥杯14届模拟赛第一期题解_蓝桥杯萌新首秀14号的题目

作者：Gausst松鼠会 | 2024-06-12 03:11:58

赞

踩

蓝桥杯萌新首秀14号的题目

目录

一、数据类型检测

二、渐变色背景生成器

三、水果叠叠乐

四、element-ui 组件二次封装

五、http 模块应用

六、成语学习

七、学海无涯

一、数据类型检测

在前端开发中，js 有各种各样的数据类型，数据类型检测是每个开发者都必须掌握基础知识。数据类型检测的方法也有很多种，本题将封装一个通用的数据类型检测函数。

完善 main.js 中 getType 函数中的 TODO 部分，返回传入值的对应数据类型。

传入值以及 getType 函数返回值（大小写可忽略）按照如下方式对应：

传入值返回值
's'string
0number
falseboolean
undefinedundefined
Symbol()symbol
function fn(){}function
123nbigint
nullnull
{}object
[]array
new Datedate
new Mapmap
new Setset
/a/regexp

题解：这道题主要是选好类型判断的方法，如果使用typeof会对Null和array判断不准确，故采用最方便最准确的方法Object.prototype.toString.call() ,由于该方法判断出来的是[Object string]这样的类型，故需要对这个数组数据去进行切割，采用slice（从 start 索引开始提取数组元素，直至 end 索引（包括 start，但不包括 end））

 main.js

  1. /**
  2.  * @description: 数据类型检测
  3.  * @param {*} data 传入的待检测数据
  4.  * @return {*} 返回数据类型
  5.  */
  6. // 示例
  7. const testArr = [
  8.   "s",
  9.   0,
  10.   false,
  11.   undefined,
  12.   Symbol(),
  13.   function () {},
  14.   123n,
  15.   null,
  16.   {},
  17.   [],
  18.   new Date(),
  19.   new Map(),
  20.   new Set(),
  21.   /a/,
  22. ];
  23. const result = testArr.map((item) => getType(item));
  24. console.log("得到的结果：", result);
  25. /*
  26. 得到的结果：
  27.  [
  28.     'string',  'number',
  29.     'boolean', 'undefined',
  30.     'symbol',  'function',
  31.     'bigint',  'null',
  32.     'object',  'array',
  33.     'date',    'map',
  34.     'set',     'regExp'
  35.   ]
  36. */
  37. function getType(data) {
  38.   // TODO：待补充代码
  39. let d=Object.prototype.toString.call(data);
  40. return d.slice(8,d.length-1)
  41. }
  42.  
  43. module.exports = {
  44.   getType
  45. }

二、渐变色背景生成器

使用原生的 CSS 变量加一些 JS 函数就能做出一个简单的渐变色背景生成器。现在渐变色生成器只完成了颜色选取的功能，需要大家帮忙把取色器中的两个色值通过 JS 函数更新给 CSS 变量，从而实现渐变色预览功能。

题解：这个主要思路是给两个选择颜色的盒子加监听事件，由于题目一开始给我们获取到这两个盒子的父元素数组，所以我们可以对父元素盒子进行遍历，然后对每一个小盒子进行监听事件的绑定change，然后将当前事件对象的value重新赋值给大盒子背景颜色的其中一个变量 background: linear-gradient(45deg, var(--color1), var(--color2));

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <link rel="stylesheet" href="styles.css" />
  8.     <title>Gradient Generator</title>
  9.   </head>
  10.   <body>
  11.     <div class="controls">
  12.       <input id="color1" type="color" name="color1" value="#00dbde" />
  13.       <input id="color2" type="color" name="color2" value="#fc00ff" />
  14.     </div>
  15.     <div class="gradient"></div>
  16.     <script src="index.js"></script>
  17.   </body>
  18. </html>

index.css

  1.  
  2. /* 注意这里定义的 CSS 变量，它们会用于生成渐变色背景 */
  3. :root {
  4.   --color1: #00dbde;
  5.   --color2: #fc00ff;
  6. }
  7.  
  8. body {
  9.   width: 100vw;
  10.   height: 100vh;
  11.   overflow: hidden;
  12.   display: flex;
  13.   flex-direction: column;
  14.   justify-content: center;
  15.   align-items: center;
  16.   background: #222;
  17. }
  18.  
  19. .controls {
  20.   width: 500px;
  21.   height: 100px;
  22.   display: flex;
  23.   justify-content: space-between;
  24. }
  25.  
  26. input[type="color"] {
  27.   -webkit-appearance: none;
  28.   border: none;
  29.   width: 60px;
  30.   height: 60px;
  31.   border-radius: 5px;
  32. }
  33.  
  34. input[type="color"]::-webkit-color-swatch-wrapper {
  35.   padding: 0;
  36.   margin: 0;
  37. }
  38.  
  39. input[type="color"]::-webkit-color-swatch {
  40.   border: none;
  41.   border-radius: 5px;
  42.   transform: scale(1.1);
  43. }
  44.  
  45. .gradient {
  46.   width: 500px;
  47.   height: 500px;
  48.   border-radius: 5px;
  49.   background: linear-gradient(45deg, var(--color1), var(--color2));
  50. }

index.js

  1. const inputs = document.querySelectorAll(".controls input");
  2.  
  3. /**
  4.  * 上面已经选取了两个取色器
  5.  * 请添加相应的 JS 事件处理函数并绑定到合适的事件监听器上（提示：change 事件）
  6.  * 这样我们就可以用取色器选取颜色来生成下方的渐变色背景啦
  7.  *  */
  8. const gradient=document.querySelector(".gradient")
  9. inputs.forEach((item)=>{
  10.     item.addEventListener("change",function(e){
  11.         gradient.style.background=`linear-gradient(45deg, ${inputs[0].value},  ${inputs[1].value}`
  12.     })
  13. })

三、水果叠叠乐

消消乐是一款益智类小游戏，最近比较火爆的一种是立体叠叠乐式的，然后小蓝也想开发一个自己练练手，给它起名叫“水果叠叠乐”。

点击页面上方的水果元素，水果会进入到下方的格子中。当格子中有三个相同水果时会自动消除。格子最多放 7 个水果，当格子中水果为 7 个且无法消除时，点击上方水果元素将不在有任何效果。 请使用 jQuery 或者 js ，完成 index.html 文件中的 TODO 部分。

  1. 页面上方 id=card 中 DOM 元素中的水果元素点击消失的动画效果已在代码中给出，无需操作。
  2. 每次点击页面上方水果元素需要在页面下方的长方格（ id=box ）元素中添加该元素节点，当下面长方格中有三个相同的水果元素时，从盒子元素删除这三个相同的水果元素节点。
  3. 当页面下方的长方格（ id=box ）元素中的水果为 7 个且无法消除时，被点击的水果元素节点不在被添加长方格元素中。

题解： 主要是找到下方要添加元素的克隆体，因为当上方图片被点击之后，会被隐藏起来，但是这个时候这个元素得被添加到下方盒子中，所以需要采用js的this.cloneNode(true)这个属性。同时还要找到下方这个盒子box里面的li的自定义属性data-id相同的有几个，如果超过3个，就得把这个元素从box里面移除

 index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <title>水果叠叠乐</title>
  7.     <script src="./js/jquery.min.js"></script>
  8.     <link rel="stylesheet" href="./css/style.css" />
  9.   </head>
  10.   <body>
  11.     <div id="stars"></div>
  12.     <div id="stars2"></div>
  13.     <div id="stars3"></div>
  14.     <ul id="card">
  15.      //这里还有很多一样的Li
  16.       <li data-id="4" id="fruit-twelve">
  17.         <img src="./images/grapes.svg" alt="" />
  18.       </li>
  19.     </ul>
  20.     <!-- 图片位置 -->
  21.     <!-- 卡槽位置 -->
  22.     <div class="fixed">
  23.       <div class="gradient-border" id="box"></div>
  24.     </div>
  25.     <script>
  26.       const box=document.querySelector("#box")
  27.       $("#card li").on("click", function (e) {
  28.         // TODO: 待补充代码
  29. if(box.children.length>=7){}
  30. else{
  31.   box.append(this.cloneNode(true))
  32.   this.style.display="none"
  33.   let list=document.querySelectorAll(`#box li[data-id='${this.getAttribute('data-id')}']`)
  34. if(list.length>=3){
  35.   list.forEach(item=>{
  36.     item.remove()
  37.   })
  38. }
  39. }
  40.       });
  41.     </script>
  42.   </body>
  43. </html>

四、element-ui 组件二次封装

element-ui 官网上具有单选功能的表格 demo 为：点击表格下方的按钮可以选中指定的某行数据。效果如下：

从上图可以看到表格的左边有一列单选组件，但是并未实现单选功能。

现在需要我们完善 mytable.vue 文件中的 TODO 部分，实现点击某个单选组件选中该行数据的效果。效果如下：

实现该功能所需的 api 如下：

table 参数说明

属性参数：

参数说明类型
data显示的数据array
stripe是否为斑马纹 tableboolean
highlight-current-row是否要高亮当前行boolean

其中如果对表格中某个字段数据呈现个性化显示效果，则可以利用 Scoped slot 获取到 row，column，$index 和 store（table 内部的状态管理）的数据。用法参考下面示例：

  1. <el-table-column label="日期" width="180">
  2.   <template slot-scope="scope">
  3.     
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/705994
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。