16届蓝桥杯 - 技术栈

1.元素周期表

css 复制代码

/* TODO 待补充代码 Start*/

/* 根据题意先用flex布局，使元素周期表横向排列 */
.container .table {
    display: flex;
}

/* 再用题意的var函数写出一格的margin-top */
.container .table .interval1 {
    margin-top: var(--interval);
}

/* 这里需要三格margin-top所以要用calc函数 */
.container .table .interval3 {
    margin-top: calc(var(--interval) * 3);
}

/* TODO End */

2.每日签到

JS控制DOM元素，并使用到了日期类

javascript 复制代码

// TODO:请补充代码
// 先给signInBtn绑定一个点击事件
signInBtn.addEventListener('click', function () {
    // 获取当前系统的时间
    const time = new Date().getDate()
    // 获取daysBox中所有的日期
    const p = daysBox.querySelectorAll('p')
    // 用forEach遍历全部的p
    p.forEach(item => {
        // 用parseInt把日期字符串转化为整数
        // 用if语句判断给与系统日期相符的日期添加active类
        if (parseInt(item.innerHTML) === time) {
            item.classList.add('active')
        }
    })
    // 给signInBtn添加no-active类
    signInBtn.classList.add('no-active')
    // 秀修改signInBtn的文本
    signInBtn.innerHTML = '明天也要记得来哦'
})
// TODO:END

3.你还在等我吗

JS中localStorage函数和setTimeout函数的使用

javascript 复制代码

  setItem(key, value, expired) {
    // TODO 待补充代码
    // 存储key和value 
    localStorage.setItem(key, value)
    // 使用延迟执行函数达到在有效时长后清除数据
    setTimeout(function () {
      localStorage.removeItem(key)
    }, expired)

  }

  getItem(key) {
     // TODO 待补充代码 
    //  返回获取的数据
    return localStorage.getItem(key)

  }

  removeItem(key) {
    // TODO  待补充代码
    // 删除数据
    localStorage.removeItem(key)
    
  }

4.地址识别

JS正则表达式

要记一下常见的正则表达式

javascript 复制代码

function parseContactInfo(text) {
    // TODO: 请补充代码
    // 将字符串按空格分割为几个数组   split(' ')是把空格作为分割符
    let result = text.split(' ')
    // 定义正则表达式
    const reg1 = /^[\u4e00-\u9fa5]{2,4}$/
    const reg2 = /\d{11}$/
    const reg3 = /^[\u4e00-\u9fa5][A-Za-z0-9\u4e00-\u9fa5]{3,}$/
    //声明变量 
    let name 
    let phone
    let address
    // 使用for循环，遍历切割后的数组，将符合条件的赋值给对应的
    for (let i = 0; i < result.length; i++) {
        // .test() 检测一个字符串是否符合当前的正则
        if (reg1.test(result[i])) {
            name = result[i]
        } else if (reg2.test(result[i])) {
            phone = result[i]
        } else if (reg3.test(result[i])) {
            address = result[i]
        }
    }
    // 返回解析的数组
    return {name: name, phone: phone, address: address}
}

文本自动生成器 (看不懂题目)

JS递归

javascript 复制代码

function compose(...middlewares) {
   // TODO : 待补充代码 
  //  返回一个新函数，initalValue是中间件传输的初始值，callback被调用的最终结尾函数
   return (initalValue, callback) => {
    // 用index代表当前执行到第几个中间件，index = 0 代表第一个中间件
    let index = 0
    // 定义next函数
    function next (str) {
      // 更新当前传递值
      initalValue = str
      // 判断是否还有未执行的中间件
      if (index < middlewares.length) {
        // 取出下一个要执行的中间件函数
        const fn = middlewares[index]
        // 标记执行过的中间件
        index++
        // 执行当前中间件函数
        fn (initalValue, next)
      } else {
        // 没有中间件就返回最终结尾的函数
        callback(initalValue)
      }
    }
    // 开启第一个中间件
    // 判断是否传入至少一个中间件
    if (middlewares.length > 0) {
      // 取出第一个要执行的中间件函数
      const firstFn = middlewares[0]
      // 给索引号+1
      index++
      // 执行第一个中间件函数
      firstFn (initalValue, next)
    } else {
      // 如果是一个空数组,中间返回最终结尾的函数
      callback (initalValue)
    }
   }
}

7.企业微信会议助手

javascript 复制代码

// 目标1
const fetchMeetingData = async () => {
      // TODO: 待补充代码
      // fetch  向本地./js/meetings.json文件发起 GET 请求，获取原始响应对象
      // .then(res => res.json())
      // 将响应体解析为JSON形式，得到JS对象
      return fetch('./js/meetings.json').then(res => res.json()).then(res => {
        // 从JSON中提取title/time/location，组装成对象存入
        meeting.value = {
          title: res.title,
          time: res.time,
          location: res.location
        }
        // 直接将JSON中的participants数组存入
        participants.value = res.participants
      })
    };
    const formatDate = (dateStr) => {
      // TODO: 待补充代码
      // if语句避免传入空值时出问题
      if(dateStr){
        // 将日期按照-拆分为数组
        let [year,month,day] = dateStr.split('-');
        // 如果月份/日期的长度不足2，就在前面加0
        if(month.length<2) month = '0'+month;
        if(day.length<2)  day = '0'+day;
        // 返回符合格式的字符串
       return year+'-'+month+'-'+day
      }
    };

javascript 复制代码

// 目标2
<!-- TODO: 待补充代码 -->
<tr v-for="item in participants">
  <td>{{item.name}}</td>
  <td><span :class="statusClass(item.status)">{{item.status}}</span></td>
</tr>

const statusClass = (status) => {
      // TODO: 待补充代码
      // 用if判断接收参数status：表示参会状态
      // 返回与状态对应的CSS类名字符串
      if (status === '待确认') {
        return 'status-pending'
      };
      if (status === '已接受') {
        return 'status-ready'
      }; 
      if (status === '已拒绝') {
        return 'status-declined'
      }
    };

javascript 复制代码

// 目标3
function myAllSettled(promises) {
  // TODO: 待补充代码
  // 不能使用 Promise.allSettled, Promise.all，Promise.race 等方法
  return new Promise((resolve, reject) => {
    // 初始化变量 
    // res 存储每个Promise的执行结果
    // cnt 记录已完成的Promise数量
    let res = [], cnt = 0;
    // 遍历Promise数组
    promises.forEach((item,index) => {
      // 给当前Promise注册成功回调
      item.then((result) => {
        // 将成功结果存入结果数组的对应位置
        res[index] = result
        cnt ++;
        // 判断是否所有Promise都已完成
        if (cnt == promises.length)
        // 全部完成后,调用resolve并返回结果数组res
          resolve(res);
      });
    })
  });
}