web蓝桥杯第三期模拟赛_第十五届蓝桥杯(web 应用开发)模拟赛3期-大学组

分享一下我的方法供你们参考

第一题网页 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>

第九题效果一样过不了审核 仅供参考

题目还是比较简单的用用心省二/一 没啥问题