1.元素周期表
/* 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元素，并使用到了日期类
// 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:END3.你还在等我吗
JS中localStorage函数和setTimeout函数的使用
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正则表达式
要记一下常见的正则表达式
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} }5. 文本自动生成器 (看不懂题目)
JS递归
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.企业微信会议助手
// 目标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 } };// 目标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' } };// 目标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); }); }) }); }
