蓝桥杯web模拟题知识点以及解析

实现数组去重

---

挑战介绍

---

本节我们来挑战一道大厂面试真题 —— 实现数组去重。

挑战准备

---

新建一个 myUniq.js 文件，在文件里写一个名为 myUniq 的函数，并导出这个函数，如下图所示：

这个文件在环境初始化时会自动生成，如果发现没有自动生成就按照上述图片自己创建文件和函数，函数代码如下：

functionmyUniq(arr) {
  // 补充代码
}

module.exports = myUniq;

挑战内容

---

请封装一个函数，用来去掉数组中重复的元素。

该函数返回的是一个新的数组。

不必考虑数组中出现对象、null、undefined、NaN 等特殊情况，数组中的每一项都是数字。

示例：

输入：[1,1,1,2,2,3,3,4,5,1]
输出：[1,2,3,4,5]

输入：[1,1,1]
输出：[1]

解析

知识点：

1. 利用set的值不可重复

2. 使用拓展运算符把 Set 转换回数组

答案

function myUniq(arr) {
  return Array.from(new Set(arr));
}

知识点2：

3. 使用include和indexof查询数组中的值

答案

function myUniq(arr) {
  var newArr = [];
  for(let i =0;i<arr.length;i++){
    if(!(newArr.indexOf(arr[i])){
        newArr.push(arr[i])    
     }    
  }
return newArr;
}

实现模板字符串解析

---

挑战介绍

---

本节我们来挑战一道大厂面试真题 —— 实现模板字符串解析。

挑战准备

---

新建一个 strRender.js 文件，在文件里写一个名为 strRender 的函数，并导出这个函数，如下图所示：

挑战内容

---

请封装一个 strRender 函数，用来实现模板字符串解析功能。

strRender 函数接收两个参数，第一个参数是模板字符串 str，第二个参数是需要传入的 data，最终返回一个把模板中的变量替换了的新字符串。

示例：

const str = "My name is ${name}, I am ${age} years old, I come from ${country}";

const data = {
  name: "zhangsan",
  age: "18",
  country: "China",
};

console.log(strRender(str, data)); // 'My name is zhangsan, I am 18 years old, I come from China'

解析

考点：

1. 正则表达式

2. replace方法

健身大调查

---

介绍

---

表单提交是前端必备的技能之一，下面让我们用学过的表单知识，来完成一个健身调查的问卷。

准备

在浏览器中预览 index.html 页面效果如下：

目标

---

完成 js/index.js 中的 formSubmit 函数，用户填写表单信息后，点击蓝色提交按钮，表单项隐藏，页面显示用户提交的表单信息（在 id 为 result 的元素显示）。信息格式如下：“身高 172cm，体重 60kg，性别男，会在健身房、公园锻炼”。 注意：检测时会模拟表单填写过程，请不要为 id 为 result 的元素赋固定值。

解析

知识点

1. 原生js修改css样式： div.style.display = "none"

2. 原生js代码获取input的值 var height = document.querySelector("#height").value

3. js获取单选框的值

var male = document.getElementsByName("male")
  for(let i = 0;i<male.length;i++){
    if(male[i].checked == true){
      sex = male[i].value;
      break;
    }
  }

sex==0?"男":"女"

4. js获取复选框的值

5. 数组转化字符串 join() 默认,分隔 字符串转数组 split() 方法

答案

function formSubmit() {
  // TODO：待补充代码
  var quescontent = document.querySelector("#quescontent")
  var result = document.querySelector("#result")
  var height = document.querySelector("#height").value
  var weight = document.querySelector("#weight").value
  var male = document.getElementsByName("male")
  var place = document.querySelectorAll(".form-item>input")
  var placeArr = []
  for(let i = 0;i<male.length;i++){
    if(male[i].checked == true){
      var sex = male[i].value;
      break;
    }
  }
  for(let i = 0;i<place.length;i++){
    if(place[i].checked == true){
      if(place[i].value==1){
        placeArr.push("公园")
      }
      if(place[i].value==2){
        placeArr.push("健身房")
      }
      if(place[i].value==3){
        placeArr.push("户外")
      }
    }
      
  }
  quescontent.style.display = "none"
  result.style.display = "block"
  var str = `\n身高 ${height}cm，体重 ${weight}kg，性别${sex==0?"男":"女"}，会在${placeArr.join("、")}锻炼`;
  result.innerText+=str
 
}

网页 PPT

---

https://www.lanqiao.cn/problems/2428/learning/?contest_id=85

解析

知识点

1. 考察修改css样式

jquery修改css样式

$('选择器').CSS("属性名")

JavaScript修改样式

e.style.display = 'none'

2. 增加class，去除class

obj.addClass("class")
obj.removeClass("class")

3. 修改文本样式

原生js
document.getElementById(id).innerHTML = new text
jQuery
$("#btn").text('需修改的文字');

答案

const sectionsCount = $("section").length;
let activeIndex = 0;
var section = $("section")

// 监听用户按下空格和方向键的事件
$(document).on("keydown", (e) => {
  e.preventDefault();
  if (e.key === " " || e.key === "ArrowRight") {
    goRight();
  }
  if (e.key === "ArrowLeft") {
    goLeft();
  }
});

// 监听按钮点击事件
$(".btn.left").click(goLeft);
$(".btn.right").click(goRight);

// 切换下一张的函数
function goLeft() {
  if (activeIndex === 0) {
    return;
  }
  activeIndex -= 1;
  switchPage();
}

// 切换上一张的函数
function goRight() {
  if (activeIndex === sectionsCount - 1) {
    return;
  }
  activeIndex += 1;
  switchPage();
}

function switchPage() {
  // TODO: 请补充该函数，实现根据activeIndex切换页面的功能，并且在到达最后一页或第一页时给相应的按钮添加disable类
  $(".page").text(` ${activeIndex+1}/ 5`)
  for(let i = 0;i<=4;i++){
    if(i==activeIndex){
      section[i].style.display = 'block';
    }else{
      section[i].style.display = 'none';
    }
  }
  if(activeIndex==0){
    $(".btn.left").addClass("disable")
  }else{
    $(".btn.left").removeClass("disable")
  }
  if(activeIndex==4){
    $(".btn.right").addClass("disable")
  }else{
    $(".btn.right").removeClass("disable")
  }
}

西游记之西天取经

https://www.lanqiao.cn/problems/2429/learning/?contest_id=85

解析

知识点

1. 动画的循环效果

.anima {
        animation-name: likes; // 动画名称
        animation-direction: alternate; // 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
        animation-timing-function: linear; // 动画执行方式，linear：匀速；ease：先慢再快后慢；ease-in：由慢速开始；ease-out：由慢速结束；ease-in-out：由慢速开始和结束；
        animation-delay: 0s; // 动画延迟时间
        animation-iteration-count: infinite; //  动画播放次数，infinite：一直播放
        animation-duration: 1s; // 动画完成时间
    }

商品销量和销售额实时展示看板

---

https://www.lanqiao.cn/problems/2430/learning/?contest_id=85

解析

1. 获取对象的key值和value值

Object.keys(obj)
Object.values(obj)

蓝桥校园一卡通

---

https://www.lanqiao.cn/problems/2431/learning/?contest_id=85

解析

知识点

1. 正则表达式

必须以/^开头

必须以$/结尾

不要把\写成\\

定义正则对象(例如)： var rex=/^\d{5}$/

使用正则对象(例如)： rex.test('123')

内容

\d	数字[0-9]
\D	非数字^[0-9]
\w	数字+英文+下划线[0-9a-zA-Z_]
\W	非数字+英文+下划线^[0-9a-zA-Z_]
.	任意字符

次数

？	0~1次
+	至少一次
*	0~任意次
\d{5}	五个数字（数字任意填）
\d{5,10}	至少五次，最多10次（数字任意填

答案

// 获取DOM元素对象
        const studentName = document.getElementById("studentName"); // 姓名
        const studentId = document.getElementById("studentId");  // 学号
        const college = document.getElementById("college"); // 学院
        const submit = document.getElementById("submit");  // 制卡按钮
        const cardStyle = document.getElementById("cardStyle"); // 卡片
        const item = document.querySelectorAll(".item") // 卡片项
        var form_group = document.querySelectorAll(".form-group")
        var vail_name = document.querySelector("#vail_name")
        var vail_studentId = document.querySelector("#vail_studentId")
        var abled = false;
        var idabled = false;
        var nameYz = /^[\u4e00-\u9fa5]{2,4}$/
        var idyz =  /^[0-9]{1,12}$/
        submit.onclick = () => {
            // TODO 待补充代码
            if(nameYz.test(studentName.value)==false){
                form_group[0].classList.add("has-error")
                vail_name.style.display = "block"
            }else{
                abled=true
            }
            if(idyz.test(studentId.value)==false||studentId.value==null){
                form_group[1].classList.add("has-error")
                vail_studentId.style.display = "block"
            }else{
                idabled = true
            }
            // 添加 showCard 类显示放大一卡通的动画，请勿删除
            if(abled==true && idabled==true){
                for(let i = 0;i<item.length;i++){
                    let arr = [`姓名：${studentName.value}`,
                    `学号：${studentId.value}`,
                    `学院：${college.value}`]
                    item[i].innerHTML=arr[i]
                }
                cardStyle.classList.add('showCard') 
            }
        }

心愿便利贴

---

https://www.lanqiao.cn/problems/2433/learning/?contest_id=85

解析

知识点：

1. element ui的表单验证

name: [
        { required: true, message: '请输入名字', trigger: 'blur' },
        { max:4,min:2, message: '请输入2-4个字符', trigger: 'blur' }
       ],
content:[
        {required:true , message:"请输入许愿内容",trigger:"blur"},
        {min:1 ,max:30, message:"请输入1-30个字符",trigger:"blur"}
        ]

消失的 Token

---

https://www.lanqiao.cn/problems/2434/learning/?contest_id=85

解析

知识点

1. vuex的命名空间

看这篇文章http://t.csdn.cn/AbOgB

答案

<!DOCTYPE html>
<html lang="zn-CH">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./lib/vue.min.js"></script>
    <script src="./lib/vuex.min.js"></script>
    <script src="./store/BaseModule.js"></script>
    <script src="./store/UserModule.js"></script>
    <script src="./store/index.js"></script>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div id="app">
        <div class="wrapper" style="width: 900px;">

            <!-- 2. 登录成功后的欢迎界面 -->
            <Panel v-if="token" :username="username">
                {{welcome}}
            </Panel>

            <!-- 1. 登录界面 -->
            <Login v-else @confirm="login">
                {{welcome}}
            </Login>

        </div>
    </div>

    <script src="./components/login.js"></script>
    <script src="./components/panel.js"></script>
    <script>
       // TODO 修改下面错误代码

        var app = new Vue({
            el: '#app',
            data() { },
            computed: {
                welcome() {
                    return store.getters.welcome
                },
                username() {
                    return store.getters["user/username"]
                },
                token() {
                    return store.getters["user/token"]
                }
            },
            methods: {
                // 回车/点击确认的回调事件
                login(username) {
                    username && store.commit('user/login', { username, token: 'sxgWKnLADfS8hUxbiMWyb' })
                    username && store.commit('say', '登录成功，欢迎你回来！')
                }
            }
        })
    </script>
</body>

</html>

趣购

---

https://www.lanqiao.cn/problems/2435/learning/?contest_id=85

解析

知识点

1. reduce求和函数 具体看http://t.csdn.cn/2OtiY

2. find函数用法

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// Expected output: 12

3. Number(）函数可以把字符串变数字

Number("123"); // returns the number 123
Number("123") === 123; // true

Number("unicorn"); // NaN
Number(undefined); // NaN

分页组件

---

https://www.lanqiao.cn/problems/2436/learning/?contest_id=85

解析

知识点

1.axios的二次封装 http://t.csdn.cn/CNa7E

get 请求

get 请求传参，在地址里面通过 ?xxx=123 的形式

// Vue 环境中
 async created() {
   let res = await axios.get(
     "http://testapi.xuexiluxian.cn/api/slider/getSliders?xxx=123"
   );
   console.log(res);
 }

post 请求

post 请求传参，在第二个参数里面传递

// Vue 环境中
 async created() {
   let res = await axios.post('http://testapi.xuexiluxian.cn/api/course/mostNew', {
     pageNum: 1,
     pageSize: 5
   })
   console.log(res);
 }

axios 请求配置

// Vue环境中
  async created() {
    let res = await axios({
      url: 'http://testapi.xuexiluxian.cn/api/course/mostNew',
      method: 'post', // 默认是 get 请求
      headers: {}, // 自定义请求头
      data: {  // post 请求，前端给后端传递的参数
        pageNum: 1,
        pageSize: 5
      }, 
      params: {}, // get 请求，前端给后端传递的参数
      timeout: 0, // 请求超时
      responseType: 'json' // 返回的数据类型
    })
  console.log(res);
  }

2.async 内的异步调用要用await

const add = async function (x) {
  const a = await resolveAfter2Seconds(20);
  const b = await resolveAfter2Seconds(30);
  return x + a + b;
};

3.js向上取整 Math.ceil()

虚拟滚动列表

---

https://www.lanqiao.cn/problems/2437/learning/?contest_id=85

解析

知识点

1. axios获取本地数据

axios.get("本地路径").then(resp=>{
    console.log(resp)
    //打印出json格式
}

2. slice(start,end) 浅复制数组

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// Expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// Expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice());
// Expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

3. splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// Inserts at index 1
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// Replaces 1 element at index 4
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "May"]

会员权益领取中心

---

https://www.lanqiao.cn/problems/2432/learning/?contest_id=85

解析

知识点

1.行内元素转换为块级元素

在 CSS 样式中设置属性值 display: block; , 可以将 行内元素 转换为 块级元素 ;

块级元素、行内元素转换为行内块元素

<style>
    span{
        /* 行内元素 转换为 块级元素 */
        display: block;
        /* 块级元素 或 行内元素 转换为 行内块元素 */
        display: inline-block;
    }
</style>

2.CSS禁用滚轮

overflow:hidden

3.表格

粒粒皆辛苦

---

https://www.lanqiao.cn/problems/2334/learning/?contest_id=66

知识点

1. 将普通json数据转换为dataset类型

//可以用双层for循环
for (const key1 in newdata) {
    title.push(key1)
    for (const key2 in newdata[key1]) {
          dataObj[key2].push(newdata[key1][key2])
    }
}

2. 获取json对象中的key值和value值

"data": {
    "2017": { "wheat": 431, "soybean": 142 },
    "2018": { "wheat": 417, "soybean": 156 }
}
//获取key值
let key = Object.keys(data)
获取value值
let value = Object.values(data)

绝美宋词

https://www.lanqiao.cn/problems/2336/learning/?contest_id=66

知识点

1. vue基础模板

let vm = new Vue({
    el:"#app",
    data(){
        return{
        }
    },
    mounted(){
    },
    methods:{
    }
})

2. v-html 可以修改页面文字

3. Arr.includes() 查询是否包含该字段

4. v-for="item in List"

5. replace(被替换值,替换值) 替换方法

const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';

console.log(p.replace('dog', 'monkey'));
// Expected output: "The quick brown fox jumps over the lazy monkey. If the dog reacted, was it really lazy?"


const regex = /Dog/i;
console.log(p.replace(regex, 'ferret'));
// Expected output: "The quick brown fox jumps over the lazy ferret. If the dog reacted, was it really lazy?"

6. RegExp() constructor

//RegExp 用于创建正则表达式对象，该对象用于将文本与一个模式匹配

const regex1 = /\w+/;
const regex2 = new RegExp('\\w+');

flags的含义

g （全局匹配）	找到所有的匹配，而不是在第一个匹配之后停止。
i （忽略大小写）	如果u标志也被启用，使用 Unicode 大小写折叠。
m （多行匹配）	将开始和结束字符 (^ and $) 视为在多行上工作。换句话说，匹配每一行的开头或结尾each line (由\n或者\r 分隔)，而不仅仅是整个输入字符串的开头或结尾
s （点号匹配所有字符）	允许. 去匹配新的行
u （unicode）	将模式视为Unicode代码点的序列。（另请参见二进制字符串）。
y （sticky，粘性匹配）	仅从目标字符串中此正则表达式的lastIndex属性所指示的索引匹配。不尝试从任何以后的索引进行匹配。

不能说的秘密

---

知识点

1. 随机数 Math.random()

//返回一个0或1的整数
return Math.floor(Math.random() * 2);

2. 按照下标查找字符串

str.chatAt(index)

字符串方法	说明
charAt()	返回字符串中的第 n 个字符
charCodeAt()	返回字符串中的第 n 个字符的代码
indexOf()	检索字符串
lastIndexOf()	从后向前检索一个字符串
match()	找到一个或多个正则表达式的匹配
search()	检索与正则表达式相匹配的子串

偷梁换柱

知识点

1. Object.defineProperty 方法

为什么不能直接修改属性而要用Object.defineProperty 方法呢？

直接修改确实可以实现对 person 对象的 age 属性更新行为进行拦截的功能，但是它只是针对 person.age 的直接赋值操作有效，如果通过其它方式修改 person.age 属性值，比如 Object.assign、person['age'] = newVal 等，就无法拦截和处理了。而使用 Object.defineProperty 方法，可以更全面地控制属性的读写和设置操作，可以更好地实现对属性的拦截和处理。

其他的看这个http://t.csdn.cn/f4sIW

大电影

---

知识点

1. jQuery的each（）方法

//each()方法的语法为：

$.each(object, callback)
//其中，object参数表示要遍历的数组或对象，callback参数是一个回调函数，用于处理遍历到的每个元素。回调函数的语法为：

function(index, element) {...}
//其中，index表示当前元素在数组或对象中的索引，element表示当前元素的值。

2. attr()方法

jQuery的attr()方法是用于获取或设置HTML元素属性值的方法。它可以用于获取或设置一个或多个属性的值，支持链式调用。

attr()方法的语法为：

$(selector).attr(attributeName) // 获取指定属性的值
$(selector).attr(attributeName, value) // 设置指定属性的值
$(selector).attr({attributeName1:value1, attributeName2:value2,...}) // 设置多个属性的值
其中，selector表示要操作的元素，attributeName表示要获取或设置的属性名，value表示要设置的属性值。

示例：

// 获取id为myDiv的元素的title属性值
var title = $('#myDiv').attr('title');

// 设置id为myDiv的元素的title属性值为"hello"
$('#myDiv').attr('title', 'hello');

// 同时设置id为myDiv的元素的title和class属性
$('#myDiv').attr({title: 'hello', class: 'active'});
需要注意的是，在使用attr()方法设置属性值时，如果属性不存在，它会自动创建这个属性。如果要删除一个属性，可以将属性值设置为null或false，或者使用removeAttr()方法。

示例：

// 删除id为myDiv的元素的title属性
$('#myDiv').attr('title', null);
$('#myDiv').removeAttr('title');
另外，如果要设置元素的自定义属性值，建议使用data()方法，因为data()方法可以自动管理数据，避免与其他属性名冲突。

3. jQuery的定时器

在jQuery中，可以使用setInterval()方法和setTimeout()方法来创建定时器，这两种方法的用法类似于原生JavaScript的定时器。

4. jQuery修改样式

$("#myDiv").css("display", "none");

5. jQuery的hide()和show()方法

//jQuery的hide()方法可以用于隐藏任何元素，包括HTML元素、文本、图片、表单元素等。它可以将指定的元素隐藏起来，让它在页面上不可见。
hide()方法的语法为：
$(selector).hide(speed, callback)
其中，selector表示要隐藏的元素，speed表示隐藏的速度，可以是一个字符串（"slow"、"fast"）或一个数字（单位是毫秒），callback表示隐藏完成后要执行的回调函数。
示例：
// 隐藏id为myDiv的元素
$("#myDiv").hide();

// 慢慢地隐藏id为myDiv的元素
$("#myDiv").hide("slow");

// 隐藏完成后执行回调函数
$("#myDiv").hide(1000, function() {
  console.log("hidden");
});

芝麻开门

知识点

1. js创建节点，添加节点

const div = document.createElement("div");
  // TODO：待补充代码
div.innerHTML=template
document.body.append(div);

2. Promise异步函数

const promise = new Promise((resolve,reject){
    if (randomNum > 0.5) {
      resolve(randomNum); // 成功时调用 resolve 方法并传递结果
    } else {
      reject('Error'); // 失败时调用 reject 方法并传递错误信息
    }
})

分阵营，比高低

知识点

1. Object.hasOwnProperty.call

Object.hasOwnProperty.call 是一种严格的方式来检查一个对象是否具有指定的属性

//Object.hasOwnProperty.call 方法。它的用法如下：

Object.hasOwnProperty.call(obj, prop)
//其中，obj 表示要检查的对象，prop 表示要检查的属性名。这个方法会返回一个布尔值，表示对象是否具有指定的属性。

2. 遍历对象

obj.foo = 'foo'
 
for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
  console.log(obj[key]) // foo
 }
}

3. 数组去重

//ES6做法，将数组变成Set去重，再变回数组
List = Array.from(new Set(List));

4. 如果创建对象的key值为数字时,可以用object[123] 来设置key值

5. sort()对对象的某个值进行排序

//升序排序
arr.sort(function(a,b){
    return a-b；
});
//降序排序
arr.sort(function(a,b){
    return b-a；
});

更多内容 http://t.csdn.cn/1xpCM

数据类型检测

---

https://www.lanqiao.cn/problems/2283/learning/?contest_id=64

知识点

1. 数据类型检测，最好用的就是

Object.prototype.call(str)

2. 大小写转化

//转小写
str.toLocaleLowerCase();
/转大写
str.tolocaleUpperCase();

回文字符串

---

https://www.lanqiao.cn/problems/2284/learning/?contest_id=64

知识点

1. 字符串长度

str.length;

2. 截取字符串

str.slice(strat,end);

3. 字符串反转

//第一步先将字符串变成数组
var str = "abc"
var newArr = str.split("") // ["a","b","c"]
//第二步将数组反转
newArr.reverse(); // ["c","b","a"]
//第三步把数组变成字符串
newArr.join(""); // "cba"

凭空消失的 TA

---

知识点

1. 没有引入elementui的js文件

随机数生成器

知识点

1. 产生随机数

num = (Math.random()*(max-min))+min
//num 是在min到max之间的随机数

菜单树检索

知识点

1. foreach循环

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

折叠手风琴

知识点

1. jQuery给元素添加点击事件

var option = $(".option").click(function(){
    console.log(this.id);
    $("#"+this.id).addClass("active");
    $("#"+this.id).siblings().removeClass("active")
})

2. jQuery选择除自己外的兄弟元素

$("#"+this.id).addClass("active"); //给自己加上class
$("#"+this.id).siblings().removeClass("active")  //给兄弟元素去掉class

画一只考拉

知识点

1. grid布局

/*开启grid布局*/
display:grid
/** 定义行数和列数*/ 
grid-template-columns: auto auto auto;     有几个数值就有几列    全是auto时类似 

grid-template-rows: repeat(重复次数,重复的值);
/*定义范围 */
grid-area :1/2/2/3 /* 从第一行第二列到第二行第三列*/

别抖了

知识点

1. 防抖函数

//防抖函数通用格式
function debounce(fn, delay = 0) {
  // TODO: 在这里写入具体的实现逻辑
  // 返回一个新的防抖函数
  // 即使函数在 delay 时间段内多次被调用，也只会在最后一次函数被调用的 delay 时间结束后执行
  //1.先设置一个定时器
    let timer = null
  //2.返回函数
    return function(...args){
        //如果触发一次函数就重置定时器
        timer = setTimeout(()=>{
            return fn(this,args)
        },delay)
    }

}

新鲜的蔬菜

知识点

1.选择第几个后代元素

选择第几个后代元素
<div class="box" id="box2">
    <span class="item">
          <img src="./images/chili.svg" alt="" />
    </span>
    <span class="item">
          <img src="./images/chili.svg" alt="" />
    </span>
</div>

//选中第二个span标签
#box2 .item:nth-child(2){
    xxx:xxx
}

由文本溢出引发的“不友好体验”

知识点

1.

document.querySelector(".more2_info_name").style = 
"overflow:hidden;  //超出的隐藏
text-overflow: ellipsis; //超出的部分用省略号表示
-webkit-line-clamp: 2; " //不超过两行

灯的颜色变化

知识点

1. 定时函数中回调定时函数

function trafficlights() {
    setTimeout(()=>{
        red();
    },3000);
    setTimeout(()=>{
        green();
    },6000);
}
//与下面等效
function trafficlights() {
    setTimeout(()=>{
        red();
        setTimeout(()=>{
            green();
        },3000);
    },3000);
}

实现卡号绑定功能

知识点

1. Bootstrap 提供的 class fade 与 show

//Bootstrap提供的fade和show类通常用于实现淡入淡出效果。

//fade类用于在元素显示和隐藏时淡入淡出过渡动画。当元素被添加fade类时，它会自动应用CSS过渡效果，使元素的opacity和visibility属性在一段时间内发生变化。例如：

<div class="fade">
  Hello, world!
</div>
//在这个例子中，我们创建了一个带有fade类的div元素，它会在显示和隐藏时自动应用淡入淡出效果。

//show类用于在元素显示时立即显示元素，而不是使用默认的淡入效果。例如：

<div class="fade show">
  Hello, world!
</div>
//在这个例子中，我们创建了一个带有fade和show类的div元素，它会在显示时立即显示元素，而不是使用默认的淡入效果。这个类通常用于在页面加载时显示元素，避免出现闪烁的情况。

2. ajax获取数据

$.ajax({
        url: "js/cardnolist.json",
        method: "GET",
        dataType: "json"
    }).then(resp => {
    console.log("成功")
}.catch(resp=>{
  console.log("失败");
});

阅读吧

知识点

1. vue基础模板

let vm = new Vue({
    el:"#app",
    data(){
        return{
        
        }    
    },
    mounted(){
    },
    methods{
    }
})

2. 在js中修改css样式要用驼峰命名

document.style.backgroundColor = #333;
document.style.fontSize = 12px

3. classList.add()添加多个class

//添加多个class
document.classList.add("iconfont", "icon-selected");
//移除多个样式
document.classList.remove("iconfont", "icon-selected");

4. 字符串截取 slice()

str.slice(start,end);
//拓展
array.slice(start,end)

时间管理大师

知识点

1. 数组删除最后一个元素

//删除最后一个元素
arr.pop();
//从后添加一个元素
arr.push();
//删除数组指定的元素
arr.splice(开始位置,指定几个（如果为0，则添加元素）,添加的元素);