分享一下我的方法供你们参考
第一题网页 PPT
function switchPage() {
// 隐藏所有的 section 元素
$("section").hide();
// 获取当前的 section 元素并显示
const $currentSection = $("section").eq(activeIndex);
$currentSection.show();
// 设置页码
const pageText = `${activeIndex + 1}/${sectionsCount}`;
$(".page").text(pageText);
// 判断是否需要禁用按钮
if (activeIndex === 0) {
$(".btn.left").addClass("disable");
} else {
$(".btn.left").removeClass("disable");
}
if (activeIndex === sectionsCount - 1) {
$(".btn.right").addClass("disable");
} else {
$(".btn.right").removeClass("disable");
}
}
本题比较简单 使用JQuery添加删除类即可
第二题西游记之西天取经
.actor:first-child {
width: 200px;
height: 180px;
background: url(../images/west_01.png) no-repeat;
/* TODO 填空 */
animation: a1 0.8s steps(8) infinite;
}
.actor:nth-child(2) {
width: 200px;
height: 180px;
background: url(../images/west_02.png) no-repeat;
/* TODO 填空 */
animation: a2 0.8s steps(8) infinite;
}
.actor:nth-child(3) {
width: 170px;
height: 240px;
background: url(../images/west_03.png) no-repeat;
/* TODO 填空 */
animation: a3 0.8s steps(8) infinite;
}
.actor:last-child {
width: 210px;
height: 200px;
background: url(../images/west_04.png) no-repeat;
/* TODO 填空 */
animation: a4 0.8s steps(8) infinite;
}
就加一个infinite的事情 明显的送分题
第三题商品销量和销售额实时展示看板
yAxis: [{
type: 'value',
name: '销售额',
position: 'left',
},
{
type: 'value',
name: '销量',
position: 'right',
}],
async function renderChart() {
const result = await Ajax();
document.querySelector("#result").innerText = JSON.stringify(result);
const myChart = echarts.init(document.getElementById('main'));
const saleData = Object.values(result.data.saleObj);
const countData = Object.values(result.data.countObj);
const timeData = Object.keys(result.data.saleObj);
charData.xAxis.data = timeData;
charData.series[0].data = saleData;
charData.series[1].data = countData;
myChart.setOption(charData, true);
document.querySelector("#data").innerText = JSON.stringify(charData);
}
简单的echarts 也是送分题 比起模拟赛2简单很多
第四题 蓝桥校园一卡通
submit.onclick = () => {
// TODO 待补充代码
const nameValue = studentName.value.trim(); // 获取姓名的输入值
const studentIdValue = studentId.value.trim(); // 获取学号的输入值
// 姓名验证
const nameRegex = /^[\u4e00-\u9fa5]{2,4}$/; // 姓名正则,2-4个汉字
if (!nameRegex.test(nameValue)) {
studentName.parentElement.classList.add("has-error"); // 添加 has-error 类
document.getElementById("vail_name").style.display = "block"; // 显示报错信息
return; // 验证失败,退出函数
} else {
studentName.parentElement.classList.remove("has-error"); // 移除 has-error 类
document.getElementById("vail_name").style.display = "none"; // 隐藏报错信息
}
// 学号验证
const studentIdRegex = /^\d{1,12}$/; // 学号正则,1-12位数字
if (!studentIdRegex.test(studentIdValue)) {
studentId.parentElement.classList.add("has-error"); // 添加 has-error 类
document.getElementById("vail_studentId").style.display = "block"; // 显示报错信息
return; // 验证失败,退出函数
} else {
studentId.parentElement.classList.remove("has-error"); // 移除 has-error 类
document.getElementById("vail_studentId").style.display = "none"; // 隐藏报错信息
}
// 显示卡片信息
item[0].textContent = `姓名:${nameValue}`;
item[1].textContent = `学号:${studentIdValue}`;
item[2].textContent = `学院:${college.value}`;
// 添加 showCard 类显示放大一卡通的动画,请勿删除
cardStyle.classList.add("showCard");
};
一个简单的rule验证没难度 送分题目
第五题 纯耗时间题目 我没写 写了的可以分享给别人
第六题 心愿便利贴
<div class="card" :class="item.css" v-for="(item,index) in wishList" :key="index">
<div class="header">
<img class="close" @click="closeCard(index)" src="./images/ding.png" alt="close">
</div>
<el-image v-if="item.pic" style="width: 100px; height: 100px" :src="item.pic"
:preview-src-list="picList">
</el-image>
<div class="content">
{{item.content}}
</div>
<div class="name">{{item.name}}</div>
</div>
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
],
content: [
{ required: true, message: '请输入许愿内容', trigger: 'blur' },
{ min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
]
},
rule题目
第七题 消失的Token
data() {
return{
username:'',
token:''
}
},
login(username) {
username && store.commit('login', { username, token: 'sxgWKnLADfS8hUxbiMWyb' })
if(username=='admin'){
this.token ='sxgWKnLADfS8hUxbiMWyb'
this.username ='admin'
store.commit('say', '登录成功,欢迎你回来!')
}
}
第八题 封装Promisefy函数
const promisefy = (fn) => {
return (...args) => {
return new Promise((resolve, reject) => {
fn(...args, (err, data) => {
if (err) {
reject(err)
} else {
resolve(data)
}
})
})
}
}
node送分题
第九题 趣购
<template>
<div class="container">
<div class="good-list">
<div v-for="good in goods" :key="good.name" class="good">
<img :src="good.cover" />
<span>{{ good.name }}</span>
<span>¥{{ good.price }}</span>
</div>
</div>
<div id="trolley" class="trolley">
<span id="bought" class="bought" v-if="sum !== 0">{{sum}}</span>
<img src="./images/trolley.jpeg" />
</div>
<div class="result">
<div>
购物车商品:<span id="goods">{{ goodsDetail }}</span>
</div>
<div>
购物车商品总计:<span id="total">{{ totalPrice }}</span>
</div>
</div>
</div>
</template>
<script>
module.exports = {
data() {
return {
goods: [
{
name: "畅销书",
price: 30,
cover: "./images/book.jpeg",
},
{
name: "收纳箱",
price: 60,
cover: "./images/box.jpeg",
},
{
name: "纸巾",
price: 20,
cover: "./images/paper.jpeg",
},
{
name: "电视",
price: 1000,
cover: "./images/tv.jpg",
},
],
bought: [],
sum:0
};
},
computed: {
totalPrice() {
// 计算购物车商品总价
return this.bought.reduce((acc, good) => {
return acc + good.price * good.count;
}, 0);
},
goodsDetail() {
// 构造购物车商品详情文本
return this.bought
.map((good) => `${good.name}*${good.count} `)
.join(" ");
},
},
mounted() {
const trolley = this.$el.querySelector("#trolley");
const goodsEl = this.$el.querySelector("#goods");
const totalEl = this.$el.querySelector("#total");
trolley.addEventListener("dragover", (e) => {
e.preventDefault();
});
trolley.addEventListener("drop", (e) => {
e.preventDefault();
// 获取拖拽的商品信息
const goodName = e.dataTransfer.getData("text");
let indexss = goodName.lastIndexOf("/");
var resolvess = goodName.substring(indexss + 1, goodName.length);
const good = this.goods.find((g) => {
let int = g.cover.lastIndexOf("/");
var r = g.cover.substring(int + 1, g.cover.length);
return r === resolvess;
});
if (good) {
// 如果购物车中已有该商品,则将其数量加一
const boughtGood = this.bought.find((g) => g.name === good.name);
if (boughtGood) {
count+=1
} else {
// 否则将商品添加到购物车
this.bought.push({
...good,
count:1
});
}
this.sum =0
this.bought.forEach(element => {
this.sum += element.count
});;
// 更新页面上的购物车商品数量和商品详情
goodsEl.textContent = this.goodsDetail;
totalEl.textContent = this.totalPrice;
}
});
},
};
</script>
第九题效果一样过不了审核 仅供参考
题目还是比较简单的用用心省二/一 没啥问题