凭空消失的TA
题解
加入第二行代码即可，没有使用elementUI提供的js文件，所以说提供的所有文件都是有用的呀~
<!-- 引入 element-ui 样式 --><link rel="stylesheet" href="./element-ui-2.15.10/index.css"/><script src="./element-ui-2.15.10/index.js"></script>
用户名片
题解
核心就是让整个卡片无论在什么时候都是页面居中，就是无论你缩放页面总是居中。这里就必须用到最后的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 ="芝麻开门";functioninit(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}
*/functionmPrompt(){// 弹窗必须使用以下结构 template 保存的是弹窗的结构字符串，可以先转化为 DOM 再通过 appendChild 方式插入到 body 中const template =`
<div class="modal">
<div class="message-box">
<div class="message-header">请输入咒语</div>
<div class="message-body">
<input type="text">
</div>
<div class="message-footer">
<button class="btn btn-small" id='cancel'>取消</button>
<button class="btn btn-small btn-primary" id='confirm'>确定</button>
</div>
</div>
</div>
`;// 让对话框弹出，先创建子节点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：待补充代码returnnewPromise((resolve, reject)=>{// 点击确定事件
confirmBtn.onclick=function(){// 注意getElementsByTagName获取到的是数组，取第一个
inputVal = document.getElementsByTagName("input")[0].value
body.removeChild(dialogDiv)if(inputVal =="芝麻开门"){returnresolve("芝麻开门")}else{returnreject(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啦~ 我是小辣鸡一起进步吧
题解
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>宝贵的一票</title><script src="./js/jquery.min.js"></script><link rel="stylesheet" href="./css/bootstrap.min.css"/><link rel="stylesheet" href="./css/style.css"/></head><body><div class="inner-container shadow"><div class="mb-3 row"><label class="col-sm-2 col-form-label">投票主题</label><div class="col-sm-9"><input type="text"class="form-control"/></div></div><div class="list"></div><div class="add"><div class="addtxt"><img src="./images/plus-square.svg" alt="加号图标"/>
添加选项
</div></div><div class="form-check checkbox-one"><input class="form-check-input" type="checkbox" value=""/><label class="form-check-label"for="flexCheckDefault">
支持多选
</label></div><div class="form-check"><input class="form-check-input" type="checkbox" value=""/><label class="form-check-label"for="flexCheckDefault">
公开投票结果
</label></div><div class="row bottom"><div class="col"><a class="historytxt" href="javascript:void(0)">历史投票</a></div><div class="col"></div><div class="col"><button type="button"class="btn btn-light">取消</button><button type="button"class="btn btn-primary">发起投票</button></div></div></div><script>letinitRender=(txt)=>{return`<div class="mb-3 row" >
<label class="col-sm-2 col-form-label txt">${txt}</label>
<div class="col-sm-9">
<input type="text" class="form-control">
</div>
<div class="col-sm-1">
<!-- 删除图标 -->
<img class="del-icon" src="./images/x.svg" alt="" style="display:none" />
</div>
</div>`;};$((function(){// 初始化的时候渲染两条数据，且不带删除符号for(let index =0; index <2; index++){let initList =initRender(`选项${index +1}`);$(".list").append(initList);}// 点击加号逻辑$(".add").click(function(){// TODO 待补充代码// 获取当前选项列表的长度，根据initRender函数中的模板字符串可得到灵感let listLength =$('.list .row').length;let initList =initRender(`选项${listLength +1}`);$(".list").append(initList);
console.log(listLength);if(listLength >=2){$('.del-icon').css("display","block")}});// 点击 x 删除逻辑，列表小于 2 项时不显示删除图标$(document).on("click",".del-icon",function(){// TODO 待补充代码// console.log($(this).parent().parent());等价于$(this).parents()[1]$(this).parents()[1].remove()let listLength =$('.list .row').length;for(let index =0; index < listLength; index++){$('.txt')[index].innerHTML=`选项${index+1}`}
console.log(listLength);if(listLength>2){$('.del-icon').css("display","block")}else{$('.del-icon').css("display","none")// 切记要删除这里呀，因为判题应该是根据dom结构来滴$('.list .col-sm-1').remove()}});})());</script></body></html>
粒粒皆辛苦
思路：
- 先直接看json文件中的数据格式，看到是一个对象中嵌套对象的格式。获取数据就好
- 一般echarts题都有初始化渲染的例子，
我们不要动，然后直接看它是怎么渲染的，照着写就行。 获取到数据后对数据进行处理，我是直接使用for of 对对象进行遍历然后将里面不同类型的值进行分类- 直接修改 option.dataset.source中的值注意最前面要加上大豆，玉米啥的中文名。最后一定得调用
渲染函数myChart.setOption(option);最终页面才会改变
题解
<!DOCTYPE html><htmlstyle="height: 100%"><head><metacharset="utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><title>粒粒皆辛苦</title><scripttype="text/javascript"src="./js/echarts.min.js"></script><scriptsrc="./js/axios.min.js"></script></head><bodystyle="height: 100%;margin: 0;overflow: hidden"><divid="container"style="height: 80%;width: 80%;margin: 5% auto"></div><script>var dom = document.getElementById("container");var option;var myChart = echarts.init(dom,null,{
renderer:"canvas",
useDirtyRect:false,});letinitCharts=()=>{
option ={
title:{
text:"近五年 x 市粮食总产量分布以及 2022 年粮食产量比例",
subtext:"单位（万吨）",},
dataset:{//source -> 图表显示所需的数据格式（饼形图和折线图共用），请勿手动修改此行
source:[["全部","2017","2018","2019","2020","2021","2022"],["小麦",1,1,1,1,1,1],["大豆",9,9,9,9,9,9],["马铃薯",13,13,13,13,13,13],["玉米",23,23,23,23,23,23],],},
xAxis:{ type:"category"},
yAxis:{ gridIndex:0},
grid:{ top:"55%"},
series:[{
type:"line",
seriesLayoutBy:"row",},{
type:"line",
seriesLayoutBy:"row",},{
type:"line",
seriesLayoutBy:"row",},{
type:"line",
seriesLayoutBy:"row",},{
type:"pie",
id:"pie",
radius:"30%",
center:["50%","25%"],
label:{// 2022 数据的百分比
formatter:"{b} {@2022} ({d}%)",},
encode:{
itemName:"全部",
value:"2022",
tooltip:"2022",},},],};if(option &&typeof option ==="object"){// myChart.setOption -> 设置 echarts 数据的方法
myChart.setOption(option);}
window.addEventListener("resize", myChart.resize);};initCharts();// TODO: 待补充代码var dataList ={}// 初始化四个数组var wheat =["小麦"], soybean =["大豆"], corn =["玉米"], potato =["马铃薯"]
window.onload=function(){
axios.get(' ./data.json').then(res =>{
dataList = res.data.data;// 双重循环取对象值for(item in dataList){// console.log(dataList[item]);let value = dataList[item]for(subitem in value){// console.log(value[subitem]);if(subitem ==="wheat"){
wheat.push(value[subitem])}elseif(subitem ==="soybean"){
soybean.push(value[subitem])}elseif(subitem ==="corn"){
corn.push(value[subitem])}elseif(subitem ==="potato"){
potato.push(value[subitem])}}}
option.dataset.source =[["全部","2017","2018","2019","2020","2021","2022"],
wheat,
soybean,
potato,
corn,]
myChart.setOption(option);
console.log(option);})}</script></body></html>
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指令在展示经过我们处理的字符串
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"/><title>绝美宋词</title><link rel="stylesheet" href="css/style.css"/><script src="./js/vue.min.js"></script><script src="./js/axios.min.js"></script></head><body><div id="app"><h1 style="text-align: center">输入关键字，找一首词</h1><!--TODO：待补充代码 --><div class="search-form"><input type="text" id="search" v-model="words"class="search" placeholder="词牌名 词句 词人"/><ul class="suggestions" v-if=""><li v-for="item in resultList":key="item.title"><span class="poet" v-html="item.poetry_content"></span><span class="title" v-html=`${item.title}-${item.author}`></span></li></ul></div></div><script>let vm =newVue({
el:'#app',// TODO：待补充代码data(){return({
poetryList:[],//数据库数据
resultList:[],//最终展示数据
words:''//关键字})},mounted(){
axios.get('./data.json').then(res =>{this.poetryList = res.data
})},
watch:{words(newVal, oldVal){if(newVal ===''){//如果关键字为空不匹配，直接返回this.resultList =[];return;}
console.log("newVal值", newVal);this.resultList =[];this.poetryList.forEach(item =>{// 处理关键字，得到含有关键字的对象if(item.poetry_content.includes(newVal)|| item.title.includes(newVal)|| item.author.includes(newVal)){// 注意这里得使用深拷贝，不然在下面重新赋值resultList时会改变原有的从JSON中的数据，// 导致最终只能匹配一个字符this.resultList.push(JSON.parse(JSON.stringify(item)))}})// 处理高亮，全部的let reg =newRegExp(newVal,'g');this.resultList.forEach(ele =>{// 关键字替换
ele.poetry_content = ele.poetry_content.replace(reg,`<span class="highlight">${newVal}</span>`)
ele.title = ele.title.replace(reg,`<span class="highlight">${newVal}</span>`)
ele.author = ele.author.replace(reg,`<span class="highlight">${newVal}</span>`);})},}})</script></body></html>
平地起高楼
题解
这个题最开始我是想直接一遍又一片for循环的后来发现好像所有的流程都是一样的，就开始尝试使用递归，但是最开始的递归时所有的数据都是单独存在的，并没有什么联系，于是我就打开了控制台反复测试每一次递归的结果，发现的确每一次递归都是正确的，但是我设置的
resultList.children=convertToTree(regions, item.id)并没有效果，导致所有的数据都无法关联，最后测试出了可以直接使用item.children,因为regions的数据是我们每一次递归都不会改变的，所以可以对其进行操作，保证最后的递归数据能够串联起来。
其实就是六行代码搞定
functionconvertToTree(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;// 检测需要，请勿删除
收快递了
其实也可以使用递归，向上一题平地起高楼一样的思路，就是先查找省的名字是否符合，如果不符合就查询这个省里面的市名，类似于算法中的深搜。
最初错误示例
functionfindRegion(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<replceList.children.length;i++){// 市级if(replceList.children[i].name===regionName){
resultArr.push(regionName)
flag1=truebreak;}else{// 区级
replceList.children[i].children.forEach(item=>{if(item.name===regionName){
flag1=true
resultArr.push(replceList.children[i].name)
resultArr.push(item.name)}})}}if(flag1){return resultArr;}else{returnnull;}}
module.exports = findRegion;// 检测需要，请勿删除
题解
检测发现原来是我最初的时候就把省份定死啦，我以为最后测试的数据只有一个省原来不是！！！所以在加一层循环就好啦！！！但是这样真的很消耗时间哦，幸好不是算法竞赛，不然就给我TTL了，真给我写麻了。
需要注意的是只有for循环或者while等其他循环语句才可以使用break，所以当我使用forEach时是没有使用break跳出的。
functionfindRegion(regions, regionName){// TODO: 在这里写入具体的实现逻辑// 需要从树状结构的行政信息中，遍历找到目标区域的行政信息，如输入：成都市，返回 [四川省，成都市]// 如果所输入的位置信息不存在，则返回 nulllet 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 =true
resultArr.push(regions[t].name)
resultArr.push(regions[t].children[i].name)
resultArr.push(item.name)}})}}}}if(flag1){return resultArr;}else{returnnull;}}
module.exports = findRegion;// 检测需要，请勿删除
本文转载自: https://blog.csdn.net/qq_51580852/article/details/127967370
版权归原作者 H-rosy 所有， 如有侵权，请联系我们删除。
版权归原作者 H-rosy 所有， 如有侵权，请联系我们删除。