第十四届蓝桥杯（web应用开发）模拟赛2期 -大学组
Posted H-rosy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第十四届蓝桥杯（web应用开发）模拟赛2期 -大学组相关的知识，希望对你有一定的参考价值。
凭空消失的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 = "芝麻开门";
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 = `
<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：待补充代码
return new Promise((resolve, reject) =>
// 点击确定事件
confirmBtn.onclick = function ()
// 注意getElementsByTagName获取到的是数组，取第一个
inputVal = document.getElementsByTagName("input")[0].value
body.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啦~ 我是小辣鸡一起进步吧
题解
<!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>
let initRender = (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>
<html style="height: 100%">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>粒粒皆辛苦</title>
<script type="text/javascript" src="./js/echarts.min.js"></script>
<script src="./js/axios.min.js"></script>
</head>
<body style="height: 100%; margin: 0; overflow: hidden">
<div id="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,
);
let initCharts = () =>
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%" ,
以上是关于第十四届蓝桥杯（web应用开发）模拟赛2期 -大学组的主要内容，如果未能解决你的问题，请参考以下文章
蓝桥杯Web第十四届蓝桥杯Web模拟赛 3 期 | 精品题解（上）