23模拟赛2
1 凭空消失的TA
<script src="./element-ui-2.15.10/index.js"></script>
2 用户名片
.card {
position: relative;
margin: 0 auto;
top: 50vh;
transform: translateY(-50%);
}
.card img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.user-card {
position: relative;
float: left;
display: flex;
justify-content:center;
}
3 芝麻开门
const div = document.createElement("div");
// TODO：待补充代码
div.innerHTML = template;
document.querySelector('body').appendChild(div);
return new Promise((res, rej) => {
document.querySelector('#confirm').addEventListener('click', () => {
let input = document.querySelector(".message-body input").value;
res(input);
document.querySelector(".modal").remove();
})
document.querySelector('#cancel').addEventListener('click', () => {
rej(false);
document.querySelector(".modal").remove();
})
})
div.innerHTML = template;
document.body.appendChild(div);
return new Promise((resolve, reject) => {
document.querySelector("#confirm").addEventListener("click", () => {
let input = document.querySelector(".message-body input");
resolve(input.value);
document.querySelector(".modal").remove();
});
document.querySelector("#cancel").addEventListener("click", () => {
document.querySelector(".modal").remove();
reject(false);
});
});
4.宝贵的一票
<!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>`;
};
$(
(function () {
// 初始化的时候渲染两条数据，且不带删除符号
for (let index = 0; index < 2; index++) {
let initList = initRender(`选项${index + 1}`);
$(".list").append(initList);
}
// 点击加号逻辑
// 点击加号逻辑
$(".add").click(function () {
// TODO 待补充代码
const length = $(".list").children().length + 1
let initList = initRender(`选项${length}`);
$(".list").append(initList);
if (length > 2) {
$(".list").children().each((i, item) => {
const text = `<div class="col-sm-1"><img class="del-icon" src="./images/x.svg" alt="" /></div>`
const flag = $(item).html().includes('<div class="col-sm-1">')
if (!flag)
$(item).append(text)
})
}
});
// 点击 x 删除逻辑，列表小于 2 项时不显示删除图标
$(document).on("click", ".del-icon", function (e) {
// TODO 待补充代码
$(this).parents('div.mb-3.row').remove()
$(".list").children().each((i, item) => {
const label = $(item).find('label')
label.html(`选项${i + 1}`)
if ($(".list").children().length <= 2) {
const delDOM = $(item).find('div.col-sm-1')
delDOM.remove()
}
})
});
})()
);
</script>
</body>
</html>
const render = (add=0) => {
const list = document.querySelector(".list");
let near = document.querySelectorAll(".list>div").length + add;
let initList = ``;
// debugger
if (near <= 2) {
for (let index = 0; index < 2; index++) {
initList += initRender(`选项${index + 1}`);
}
list.innerHTML = initList;
} else {
for (let index = 0; index < near; index++) {
initList += `<div class="mb-3 row item">
<label class="col-sm-2 col-form-label txt">选项${
index + 1
}</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="" />
</div>
</div>`;
}
list.innerHTML = initList;
}
};
// 点击加号逻辑
$(".add").click(function () {
render(1)
});
// 点击 x 删除逻辑，列表小于 2 项时不显示删除图标
$(document).on("click", ".del-icon", function (e) {
e.target.parentElement.parentElement.remove();
render()
});
5.粒粒皆辛苦
<!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%" },
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();
async function getData() {
let data = await axios.get('data.json')
data = data.data.data;
let hash = { '小麦': 'wheat', '大豆': 'soybean', '马铃薯': 'potato', '玉米': 'corn' }
let target = option.dataset.source;
for (let i = 1; i < 7; i++) {
for (let j = 1; j < 5; j++) {
target[j][i] = data[target[0][i]][hash[target[j][0]]];
}
}
myChart.setOption(option); //注意！！！！！
}
getData();
</script>
</body>
</html>
axios("./data.json").then((res) => {
initCharts(res.data.data);
});
let ans = [
["全部", "2017", "2018", "2019", "2020", "2021", "2022"],
["小麦"],
["大豆"],
["马铃薯"],
["玉米"],
];
let categories = ["wheat", "soybean", "potato", "corn"];
let index=1
for (let category of categories) {
for (let key in data) {
ans[index].push( data[key][category]);
}
index++
}
option.dataset.source=ans
7 资讯接口
const http=require('http')
const server = http.createServer((req, res) => {
res.setHeader("Content-type", "text/html;charset=utf8");
if (req.method === "GET" && req.url === "/news") {
const data=[
{
channelId: "5572a108b3cdc86cf39001cd",
name: "国内焦点",
},
{
channelId: "5572a108b3cdc86cf39001ce",
name: "国际焦点",
},
]
res.write(JSON.stringify(data));
res.end();
}else{
res.end('404');
}
});
server.listen(8080, () => {
console.log("Server running on port 8080");
});
8.绝美宋词
<!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" class="search" placeholder="词牌名 词句 词人" v-model="keyword" />
<ul class="suggestions">
<li v-for="item in dataList">
<span class="poet" v-html="highlight(item.poetry_content)"></span>
<span class="title">
<span v-html="highlight(item.title)"></span>
-
<span v-html="highlight(item.author)"></span>
</span>
</li>
</ul>
</div>
</div>
<script>
let vm = new Vue({
el: '#app',
// TODO：待补充代码
data() {
return {
keyword: '',
list: [],
}
},
mounted() {
axios.get('./data.json').then(res => this.list = res.data)
},
computed: {
dataList() {
return this.keyword ? this.list.filter(e =>
e.poetry_content.includes(this.keyword) ||
e.title.includes(this.keyword) ||
e.author.includes(this.keyword)
) : []
},
},
methods: {
highlight(v) {
return v.replaceAll(this.keyword, `<span class="highlight">$&</span>`)
}
},
})
</script>
</body>
</html>
let vm = new Vue({
el: "#app",
data() {
return {
target: "",
resource: [],
};
},
mounted() {
axios("./data.json").then((res) => {
this.resource = res.data;
});
},
watch: {
target(newVlaue) {
let inner = ``;
if (newVlaue != "") {
let list = this.resource.filter((item) =>Object.values(item).some((sentence) =>sentence.includes(newVlaue))
);
list = JSON.parse(JSON.stringify(list));
for (let li of list) {
for (let key in li)
li[key] = li[key].replaceAll(newVlaue,`<span class="highlight">${newVlaue}</span>`);
}
inner = list.reduce(
(pre, curr) => pre +`<li> <span class="poet">${curr.poetry_content}</span>
<span class="title">${curr.author} - ${curr.title}</span> </li>`,"");
}
document.querySelector(".suggestions").innerHTML = inner;
},
},
});
9 平地起高楼
// 作用：把.pid==id的返回出去
function convertToTree(regions, rootId = "0") {
let ans = [];
ans = regions.filter((item) => item.pid == rootId);
if (ans) {
for (let item of ans) {
item.children = convertToTree(regions, item.id);
}
}
console.log(ans);
return ans;
}
return regions.filter(item =>item.pid == rootId).map(item => (item.children = convertToTree(regions,item.id),item))
// ,逗号运算符返回最表达式最右边的值
10 收快递了
function findRegion(regions, regionName) {
// TODO: 在这里写入具体的实现逻辑
// 需要从树状结构的行政信息中，遍历找到目标区域的行政信息，如输入：成都市，返回 [四川省，成都市]
// 如果所输入的位置信息不存在，则返回 null
let parent = regions.find((item) => item.name === regionName);
if (parent) return [regionName];
else {
for(const element of regions){
if(findRegion(element.children, regionName)){
return [ element.name, ...findRegion(element.children, regionName)]
}
};
return null;
}
}