第十三届蓝桥杯省赛：冬奥大抽奖

玛卡巴卡又想干饭了

已于 2023-04-02 00:29:54 修改

阅读量97

点赞数

文章标签：蓝桥杯

于 2023-04-02 00:12:49 首次发布

本文链接：https://blog.csdn.net/qq_63931453/article/details/129905403

版权

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() {
  time++; // 转动次数加1

  $(".ul > li").removeClass("active")
  if(time%8==0) {
    $(".li"+8).addClass("active");
  } else {
    $(".li"+(time%8)).addClass("active");
  }

  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); // 进行递归动画
  }, speed);

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

    var result=$(".li"+(time%8)).html();
    $("#award").html("恭喜您抽中了"+result+"!!!");

    time = 0;
    return;
  }
}

优化：

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

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

// TODO：请完善此函数
function rolling() {
  time++; // 转动次数加1
  num++;
  if (num > 8) {
    num = 1;
  }

  $("li").removeClass("active");
  $(".li" + num).addClass("active");
  var s=$(".li" + num).html();

  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); // 进行递归动画
  }, speed);

  // time > times 转动停止
  if (time > times) {
    clearInterval(rollTime);
    time = 0;
    num = 0;
    $("#award").html("恭喜您抽中了"+ s+"!!!")
    return;
  }
}