[]2024年第⼗五届蓝桥杯全国软件和信息技术专业人才大赛（Web 应用开发）

时间：2024-05-03 22:23:20

介绍

        蓝⼩胖在公司上班多年，公司⼀直没有举⾏什么年会活动，很多员⼯都在背后抱怨。⽼板为了安抚⼈ ⼼，让蓝⼩胖设计⼀个抽奖活动，蓝⼩胖设置的奖品有⼿机、空调、平板、200 现⾦，并且设置对应的 中奖概率分别为 10% ， 20% ， 30% ， 40% 。

准备

在浏览器中预览 index.html ⻚⾯效果如下：

目标

完成 index.html 中的 TODO 部分代码 ，实现以下⽬标：
  1. 不使⽤任何第三⽅库的情况下，请求奖品数据（请求地址必须使⽤提供的常量 MockUrl），将请求 数据赋值给已有 list 变量，并在 .reward 元素内（注意：不是循环 .reward 元素）正确渲染 奖品。
请求来的数据如下：
奖品在 .reward 元素中的 DOM 结构如下：
⽬标 1 完成后效果如下：

        2.完善 reward ⽅法，返回值是根据相应概率从 list 中选取奖品的索引，为数值类型。

  • ⼿机【索引为 0】的概率是 10%。
  • 空调【索引为 1】的概率是 20%。
  • 平板【索引为 2】的概率是 30%。
  • 200 现⾦【索引为 3】的概率是 40%。

规定

  • 请勿修改 index.html ⽂件外的任何内容。
  • 请严格按照考试步骤操作，切勿修改考试默认提供项⽬中的⽂件名称、⽂件夹路径、class 名、id 名、图⽚名等，以免造成判题⽆法通过。

解题

1.思路：

        目标一：

        题目要求不能使用第三方库请求数据，那么我们可以考虑使用fetch方法从MockUrl获取奖品数据并赋值给list（如图3.1），之后在模板中使用 v-for 指令遍历奖品列表，显示每个奖品的图片、名称、等级和中奖概率（如图3.2）。

图3.1

图3.2

目标二：

        首先生成一个随机数 rand，然后遍历奖品列表，累加每个奖品的概率，当随机数小于等于累加值时，返回当前奖品的索引。（如图3.3）

图3.3

2.解题：

完整index.html代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>年会不能停</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <div id="app">
    <h1 class="title">抽奖活动</h1>
    <div class="reward"  v-if="list&&showList">
       <!-- TODO：待补充代码 -->
       <div v-for="item in list" :key="item.title">
        <img class="reward-image" :src="item.src" />
        <div class="reward-title">{{ item.title }}</div>
        <div class="reward-level">{{ item.prizeLevel }}</div>
        <div class="reward-probability">中奖概率：{{ item.probability }}</div>
    </div>
    </div>
    <div v-else>
      <img class="reward-image" :src="goods.src" alt="Reward Image">
      <div class="reward-title">{{ goods.title }}</div>
      <div class="reward-level">{{ goods.prizeLevel }}</div>
      <div class="tips">恭喜你中奖啦！</div>
    </div>
    <div class="button" v-if="showList">
      <button @click="handleReward">抽奖</button>
    </div>
  </div>

  <script src="./lib/vue.global.prod.js"></script>
  <script>
    const { createApp, ref } = Vue;
    let reward; // 定义reward 函数 -> 检测需要，请勿修改或删除
    const MockUrl= `./mock/data.json`; // 请求地址
    const app = createApp({
      setup() {
        const list = ref([]); // 奖品列表
        // TODO：待补充代码
        const MockUrl = `./mock/data.json`;

      Vue.onMounted(() => {
          fetch(MockUrl)
          .then(response => response.json())
          .then(data => {
            list.value = data;
        });
});

        const goods = ref(null);
        const showList = ref(true);
        reward = () => {
           //  TODO：待补充代码
          const rand = Math.random() * 100;
          let sum = 0;
          for (let i = 0; i < list.value.length; i++) {
            sum += parseInt(list.value[i].probability);
            if (rand <= sum) {
                return i;
              }
            }
            return list.value.length - 1;
        };

        const handleReward = () => {
          const i = reward();
          goods.value = list.value[i];
          showList.value = false;
        };

        return {
          list,
          goods,
          showList,
          handleReward,
          reward
        };
      },
    });

    const vm = app.mount('#app');
  </script>
</body>

</html>

相关文章