凭空消失的TA

题解

加入第二行代码即可，没有使用elementUI提供的js文件，所以说提供的所有文件都是有用的呀~

用户名片

题解

核心就是让整个卡片无论在什么时候都是页面居中，就是无论你缩放页面总是居中。这里就必须用到最后的center样式，使用绝对定位实现居中

* {margin: 0;padding: 0;
}
html,
body {background: #fceeb5;height: 100%;overflow: hidden;
}html,
body {background: #fceeb5;
}
.card {width: 450px;height: 250px;background: #fff;box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.4);border-radius: 6px;overflow: hidden;position: absolute;margin: auto;left: 0px;bottom: 0;top: 0;right: 0;
}
.card h1 {text-align: center;
}.card img {width: 110px;height: 110px;border-radius: 50%;
}
.additional {position: absolute;height: 100%;background: #92bca6;z-index: 2;
}.user-card {width: 150px;height: 100%;position: relative;float: left;
}
.user-card .points {top: 85%;
}
.general {width: 300px;height: 100%;position: absolute;top: 0;right: 0;z-index: 1;box-sizing: border-box;padding: 12px;padding-top: 0;display: flex;flex-flow: column;justify-content: space-around;
}
.more{display: block;text-align: right;
}
/* level 和  points 定位位置 */
.level,
.points {width: 72px;text-align: center;position: absolute;color: #fff;font-size: 12px;font-weight: bold;background: rgba(0, 0, 0, 0.15);padding: 2px 0;border-radius: 100px;white-space: nowrap;/*这里改了一下*/bottom: 5% !important;
}/*  level 位置这里也改了一下 */
.level {top: -68% !important;height: 15px;
}/* TODO 待补充代码 居中样式*/
.center{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;
}

芝麻开门

题解

需要注意的是得把点击确定按钮的事件放在promise中，以至于最终返回的是mPrompt()的状态，不然放在外面返回的就是点击事件的状态了。我就是犯了这个错误，然后答案一直不对。然后点击事件用了.onclick和addEventListener事件监听器，因为开始不太熟悉还是什么都要多用用

const incantations = "芝麻开门";
function init(el) {document.querySelector(".wrapper .btn").addEventListener("click", () => {mPrompt().then((res) => {console.log("@@@@@@@@@@" + res);if (res === incantations) {document.querySelectorAll("#door .doors")[0].classList.add("door-left");document.querySelectorAll("#door .doors")[1].classList.add("door-right");}}).catch((err) => {console.log(err);});});
}
/*** @description: 调用函数，开启弹窗，记录输入框的内容，并通过 promise 异步返回输入框中的内容* @return {Promise}*/
function mPrompt() {// 弹窗必须使用以下结构 template 保存的是弹窗的结构字符串，可以先转化为 DOM 再通过 appendChild 方式插入到 body 中const template = `
请输入咒语
取消确定
`;// 让对话框弹出，先创建子节点const dialogDiv = document.createElement("div");dialogDiv.innerHTML = template;// body元素最后追加一个div元素let body = document.querySelector('body');body.appendChild(dialogDiv);// 获取对话框的确定和取消按钮，通过这个来操作对话框的显示与隐藏let confirmBtn = document.getElementById("confirm");let cancelBtn = document.getElementById("cancel");let inputVal = "";// TODO：待补充代码return new Promise((resolve, reject) => {// 点击确定事件confirmBtn.onclick = function () {// 注意getElementsByTagName获取到的是数组，取第一个inputVal = document.getElementsByTagName("input")[0].valuebody.removeChild(dialogDiv)if (inputVal == "芝麻开门") {return resolve("芝麻开门")} else {return reject(false)}}// 取消事件cancelBtn.addEventListener("click", () => {body.removeChild(dialogDiv)reject(false)})})
}

宝贵的一票

总结

这个题还是比较简单的就是考察了简单点dom操作，但是犯了一点错误，就是最终一直没有评测成功，最后发现应该是我动了初始化函数initRender 最初的dom结构，我为了图方便直接在里面都加了那个叉号的dom，但是最后评测时是不能有叉号的dom元素存在的，虽然我使它的display为none了但是还是不能通过检测，提示只有第一次删除检测成功，后面的直到选项小于等于2时应该就失败了。因为它检测到了序列小于2时还存在删除按钮的dom结构。

写这些的目的就是告诉大家一定不要随便操作题目已经给出的dom结构，因为它的评判标准里面就应该会检测最终的dom结构。当然我这个也是有解决办法的，就是在最后判断选项长度小于等于2时直接把选项1和选项2的删除按钮的dom结构remove就ok啦~ 我是小辣鸡一起进步吧

题解

投票主题
添加选项
支持多选
公开投票结果
历史投票
取消发起投票

粒粒皆辛苦

思路：

• 先直接看json文件中的数据格式，看到是一个对象中嵌套对象的格式。获取数据就好
• 一般echarts题都有初始化渲染的例子，我们不要动，然后直接看它是怎么渲染的，照着写就行。
  获取到数据后对数据进行处理，我是直接使用for of 对对象进行遍历然后将里面不同类型的值进行分类
• 直接修改 option.dataset.source中的值注意最前面要加上大豆，玉米啥的中文名。最后一定得调用渲染函数myChart.setOption(option);最终页面才会改变

题解

618 活动

介绍

最近蓝桥准备了很多 618 优惠，今天我们将化身蓝桥前端小工，亲自动手制作一个 618 活动页面，快来一显身手吧。

后面补哈~~

资讯接口

题解

其实和模拟一的那个node题都是一样的原理

const http=require('http');const server=http.createServer();
server.on('request',(req,res)=>{// 设置请求头res.setHeader("Content-type", "text/html;charset=utf8");if(req.url=="/news"){res.end(JSON.stringify([{"channelId": "5572a108b3cdc86cf39001cd","name": "国内焦点"},{"channelId": "5572a108b3cdc86cf39001ce","name": "国际焦点"}]))}else{res.end("404")}
})server.listen(8080,function(){console.log("8080端口启动成功");
})

绝美宋词

题解

思路：使用v-model实现双向绑定，最后使用watch监听words的变化，最后需要使用v-html指令在展示经过我们处理的字符串

输入关键字，找一首词
item.title}-${item.author}`>

平地起高楼

题解

这个题最开始我是想直接一遍又一片for循环的后来发现好像所有的流程都是一样的，就开始尝试使用递归，但是最开始的递归时所有的数据都是单独存在的，并没有什么联系，于是我就打开了控制台反复测试每一次递归的结果，发现的确每一次递归都是正确的，但是我设置的resultList.children=convertToTree(regions, item.id)并没有效果，导致所有的数据都无法关联，最后测试出了可以直接使用item.children,因为regions的数据是我们每一次递归都不会改变的，所以可以对其进行操作，保证最后的递归数据能够串联起来。

其实就是六行代码搞定

function convertToTree(regions, rootId = "0") {// TODO: 在这里写入具体的实现逻辑// 将平铺的结构转化为树状结构，并将 rootId 下的所有子节点数组返回// 如果不存在 rootId 下的子节点，则返回一个空数组let resultList=[];// let testList=[]regions.forEach(item=>{// let testList=[];if(item.pid===rootId){// 符合结果就放进去，比如最先找到四川，然后就把四川//放进去，之后在把四川作为pid去查找下一个子代。之后在遍历子代resultList.push(item);// testList=resultList// 没用,因为每一次递归后的return的是resultList，所以最终会不断//的改变，所以得使用item.children，直接改变它的值//resultList.children=convertToTree(regions, item.id)// 为孩子做准备，题目也说了如果没有孩子就设置为空数组，不影响// item.children=[]，这一次递归的结果就是找到这一轮符合要求的子代//这里把item.id作为pid继续查找子代item.children=convertToTree(regions, item.id)// console.log(convertToTree(regions, item.id));// resultList.children=convertToTree(regions, item.id); // console.log(resultList);解开注释，观察递归效果}})return resultList;
}module.exports = convertToTree; // 检测需要，请勿删除

收快递了

其实也可以使用递归，向上一题平地起高楼一样的思路，就是先查找省的名字是否符合，如果不符合就查询这个省里面的市名，类似于算法中的深搜。

最初错误示例

function findRegion(regions, regionName) {// TODO: 在这里写入具体的实现逻辑// 需要从树状结构的行政信息中，遍历找到目标区域的行政信息，如输入：成都市，返回 [四川省，成都市]// 如果所输入的位置信息不存在，则返回 nulllet replceList=regions[0];// 省let resultArr=[regions[0].name];if(replceList.name===regionName){return resultArr;}var flag1=false;for(let i=0;i// 市级if(replceList.children[i].name===regionName){resultArr.push(regionName)flag1=truebreak;}else{// 区级replceList.children[i].children.forEach(item=>{if(item.name===regionName){flag1=trueresultArr.push(replceList.children[i].name)resultArr.push(item.name)}})}}if(flag1){return resultArr;}else{return null;}
}
module.exports = findRegion; // 检测需要，请勿删除

题解

检测发现原来是我最初的时候就把省份定死啦，我以为最后测试的数据只有一个省原来不是！！！所以在加一层循环就好啦！！！但是这样真的很消耗时间哦，幸好不是算法竞赛，不然就给我TTL了，真给我写麻了。
需要注意的是只有for循环或者while等其他循环语句才可以使用break，所以当我使用forEach时是没有使用break跳出的。

function findRegion(regions, regionName) {// TODO: 在这里写入具体的实现逻辑// 需要从树状结构的行政信息中，遍历找到目标区域的行政信息，如输入：成都市，返回 [四川省，成都市]// 如果所输入的位置信息不存在，则返回 null
let resultArr=[]var flag1 = false;//最终返回条件for (let t = 0; t < regions.length; t++) {// 省if (regions[t].name === regionName) {resultArr.push(regions[t].name)flag1 = true;break} else {for (let i = 0; i < regions[t].children.length; i++) {// 市级if (regions[t].children[i].name === regionName) {//如果是省里面的市找到啦名字那就得先加入省的名字，下面区也是//一个道理resultArr.push(regions[t].name)resultArr.push(regionName)flag1 = truebreak;} else {// 区级regions[t].children[i].children.forEach(item => {if (item.name === regionName) {flag1 = trueresultArr.push(regions[t].name)resultArr.push(regions[t].children[i].name)resultArr.push(item.name)}           })}}}}if (flag1) {return resultArr;} else {return null;}
}module.exports = findRegion; // 检测需要，请勿删除