年会抽奖实现

最新推荐文章于 2024-10-30 18:24:25 发布

xiSu_Er

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量372

点赞数 7

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/xiSu_Er/article/details/135987608

版权

本文介绍了如何使用JavaScript实现一个抽奖功能，包括设置抽奖人群、控制抽奖次数、响应Ctrl+L操作打开设置页面，以及与背景音乐的互动。通过键盘监听和定时器实现动态抽奖过程。

摘要由CSDN通过智能技术生成

抽奖效果

可以随意设置抽奖人群的名单，中奖人数，闪动的频率与抽奖过程中的背景音乐

Ctrl + L 打开设置页面

点击奖项开始对应人数抽奖

空格停止抽奖，停止音乐

判断拦截Ctrl+L与空格事件

registeKeyboard() {
      let vm = this;
      document.onkeyup = function(e) {
        var keyEvent = window.event || e;
        var code = keyEvent.keyCode || keyEvent.which;
        if (vm.keyArr.length == 1 && code == 32) {
          vm.keyArr = [];//清空按键记录
          console.log("只按了空格");
          vm.nameList = [...vm.rewardPeople];//停止抽奖时，更换显示的中奖名单
          vm.stop = true;//停止滚动计时器
          vm.handleMusic("stop");//停止背景音乐
        } else if (
          vm.keyArr.length == 2 &&
          vm.keyArr[0] == 17 &&
          vm.keyArr[1] == 76
        ) {//两个按键，第一个是ctrl，第二个是L
          vm.keyArr = [];
          console.log("ctrl+L");
          vm.dialogVisible = true;//展示设置框
        } else {//不符合条件的不再监听判断
          vm.keyArr = [];
        }
      };
      document.onkeydown = function(e) {//按下键盘，记录按键值
        var keyEvent = window.event || e;
        var code = keyEvent.keyCode || keyEvent.which;
        vm.keyArr.push(code); //保存按到的键
      };
    },

开始抽奖

keyArr: [], //键盘按键

allList: [], //所有人员名单

nameList: [], //闪现人员名单

rewardPeople: [], //实际中奖名单

this.nameList = [];//清空显示的人名数组
for (let index = 0; index < item.number; index++) {//按中奖人数保存空串
  this.nameList.push("");
}

this.time = setInterval(() => {//设置滚动计时器
  if (!this.stop) {//未停止时，更换显示的人名单
    for (let index = 0; index < item.number; index++) {
      //随机获取导入人名单中的任一元素
      let item = this.allList[
        this.getRandomNum(this.allList.length)//获取随机值时传入随机范围
      ];
      this.$set(this.nameList, index, item);
    }
  } else {//停止计时器后，更新中奖名单，停止计时器与背景音乐
    this.nameList = [...this.rewardPeople];
    clearInterval(this.time);
    this.handleMusic("stop");
  }
}, (60 / item.frequency) * 1000); // 60/n*1000 n是设置页配置的闪动频率

getRandomNum(max) {//按传入的随机范围返回随机值
  let num = Math.floor(Math.random() * max);
  return num;
},

背景音乐的处理在另一文档里有说明

js 音频保存至本地 - 简书