2022年第十三届蓝桥杯web开发—东奥大抽奖题目附官方解答

Posted Leo的蕾奥拉

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了2022年第十三届蓝桥杯web开发—东奥大抽奖题目附官方解答相关的知识,希望对你有一定的参考价值。

冬奥大抽奖

介绍

蓝桥云课庆冬奥需要举行一次抽奖活动,我们一起做一个页面提供给云课冬奥抽奖活动使用。

准备

开始答题前,需要先打开本题的项目代码文件夹,目录结构如下:

├── css
│   └── style.css
├── effect.gif
├── index.html
└── js
    ├── index.js
    └── jquery.js

其中:

  • css/style.css 是样式文件 。
  • index.html 是主页面。
  • js/jquery.js 是 jQuery 文件。
  • js/index.js 是需要补充的 js 文件。
  • effect.gif 是最终实现的效果图。

在浏览器中预览 index.html 页面效果如下:

目标

找到 index.jsrolling 函数,使用 jQuery 或者 js 完善此函数,达到以下效果:

  1. 点击开始后,以 classli1 的元素为起点,黄色背景(.active 类)在奖项上顺时针转动。
  2. 当转动停止后,将获奖提示显示到页面的 idaward 元素中。获奖提示必须包含奖项的名称, 该名称需与题目提供的名称完全一致
  3. 转动时间间隔和转动停止条件已给出,请勿修改。

完成后的效果见文件夹下面的 gif 图,图片名称为 effect.gif(提示:可以通过 VS Code 或者浏览器预览 gif 图片)。

规定

  • 转动时间间隔和转动停止条件已给出,请勿修改。
  • 请严格按照考试步骤操作,切勿修改考试默认提供项目中的文件名称、文件夹路径等。
  • 请勿修改项目中提供的 idclass、函数名等名称,以免造成无法判题通过。

判分标准

  • 本题完全实现题目目标得满分,否则得 0 分。

解答

我的解答

let rollTime; // 定义定时器变量用来清除定时器
let time = 0; // 转动次数
let speed = 300; // 转动时间间隔
let times; // 总转动次数

// 开始按钮点击事件后开始抽奖
$("#start").on("click", function () 
  $("#award").text(""); //清空中奖信息
  times = parseInt(Math.random() * (20 - 30 + 1) + 20, 10); // 定义总转动次数,随机20-30次
  rolling();
);

// TODO:请完善此函数
function rolling() 
  document.querySelector('.li1').classList.add('active')

  time++; // 转动次数加1
  clearTimeout(rollTime);
  rollTime = setTimeout(() => 
    window.requestAnimationFrame(rolling); // 进行递归动画
  , speed);
  
  
  let liNum = 1
	if(time <= 8 ) liNum = time;
	else if(time >= 9 && time <= 17) liNum = time - 8;
	else if(time >= 18 && time <= 24) liNum = time - 16;
	else if(time >= 25&& time <= 36) liNum = time - 24;
  console.log(liNum,time);

// 删除颜色
const list = document.querySelectorAll('li')
for(const imte of list) imte.classList.remove('active')

  // 添加
  document.querySelector(`.li$liNum`).classList.add('active')

  // time > times 转动停止
  if (time > times) 
    clearInterval(rollTime);
    time = 0;
    return;
  


问题一:对于liNum的控制不够灵活!!

因为这里的li的num只有1 ~ 8,但是这个time又一直是递增的,所以就需要进行重置操作

但是我这里仅仅只是从数学的角度考虑这个问题,虽然也能通过,但是这样的代码十分不好,一旦修改了对应的随机数,将需要添加代码逻辑

问题二:未使用jQuery对代码进行优化

因为我本人对于jQuery使用的较少,所以并没有直接一上手就开始用jQuery操作,而是采用JS的原生方法进行实现。存在优化空间

官方答案

let rollTime; // 定义定时器变量用来清除定时器
let time = 0; // 转动次数
let speed = 300; // 转动时间间隔
let times; // 总转动次数

// 开始按钮点击事件后开始抽奖
$("#start").on("click", function () 
  $("#award").text(""); //清空中奖信息
  times = parseInt(Math.random() * (20 - 30 + 1) + 20, 10); // 定义总转动次数,随机20-30次
  rolling();
);

// TODO:请完善此函数
let num = 0;
function rolling() 
  
  num ++;

  if(num >= 9)
    num = 1;
  
  time++; // 转动次数加1
  clearTimeout(rollTime);
  rollTime = setTimeout(() => 
    window.requestAnimationFrame(rolling); // 进行递归动画
  , speed);


  $('.li' + num).addClass('active').siblings().removeClass('active')
  console.log(num);

  // time > times 转动停止
  if (time > times) 
    clearInterval(rollTime);

    $('#award').text($('.active').text())

    time = 0;
    time = 0;
    return;
  


巧妙点一:直接重置!!

上面我自己的代码对于这个num的控制十分粗糙,但是官方答案对于这个数的控制,直指本源!

我们仅需要让其自增,并在出界时及时拉回来即可(num = 1)

巧妙点二:通过siblings直接修改所有的兄弟节点

很巧妙的是,这里直接采用siblings删除兄弟节点,这样的代码会更加简洁、高效

虽然本质上就是循环删除,但是这里直接采用函数去remove还是值得学习的

第十三届蓝桥杯 ——刷题统计

题目描述
小明决定从下周一开始努力刷题准备蓝桥杯竞赛。

他计划周一至周五每天做 a a a 道题目,周六和周日每天做 b b b 道题目。

请你帮小明计算,按照计划他将在第几天实现做题数大于等于 n n n 题?

输入格式
输入一行包含三个整数 a , b a,b a,b n n n

输出格式
输出一个整数代表天数。

输入样例
10 20 99

输出样例
8

数据范围
对于 50 50 50% 的评测用例, 1 ≤ a , b , n ≤ 1 0 6 1≤a,b,n≤10^6 1a,b,n106
对于 100 100 100% 的评测用例, 1 ≤ a , b , n ≤ 1 0 18 1≤a,b,n≤10^18 1a,b,n1018


题解:模拟

#include <iostream>
using namespace std;

typedef long long LL;

int main()

    LL a, b, n;
    cin >> a >> b >> n;
    
    LL week = n / (a * 5 + b * 2);
    LL last = n - week * (a * 5 + b * 2);
    
    LL ans = week * 7;
    for (int i = 1; i <= 7; i ++)
        if(last > 0)
        
            if(i < 6) last -= a;
            else last -= b;
            ans ++;
        
        
    cout << ans << endl;
    return 0;


蓝桥杯C/C++省赛历年题

以上是关于2022年第十三届蓝桥杯web开发—东奥大抽奖题目附官方解答的主要内容,如果未能解决你的问题,请参考以下文章

蓝桥杯Web2022年第十三届蓝桥杯Web大学组国赛真题解析

2022年第十三届蓝桥杯比赛Java B组 全部真题答案解析-第一部分

2022年第十三届蓝桥杯B组 试题 E: 求阶乘

2022年第十三届蓝桥杯省赛Java B组真题及题解

第十三届蓝桥杯c++b组2022年国赛决赛题解

蓝桥杯第十三届Web组国赛天气趋势A详细题解