js实现简单抽奖小功能

下面是我给出的详细讲解：

概述

实现简单抽奖小功能，需要以下几个步骤：

1.准备随机数据池；

2.编写一个生成随机数的函数；

3.获取抽奖结果，并展示给用户。

下面我将详细介绍每一个步骤的实现过程。

准备随机数据池

准备随机数据池要根据实际情况来定，可以是一个固定的数组，也可以是后台返回的数据。在本示例中，我们准备一个包含5个抽奖奖品的数组：

var prizeList = [
  {
    id: 1,
    name: '小米电视',
  },
  {
    id: 2,
    name: 'iphone12',
  },
  {
    id: 3,
    name: '谢谢参与',
  },
  {
    id: 4,
    name: '华为路由器',
  },
  {
    id: 5,
    name: '谢谢参与',
  },
];

生成随机数的函数

在实现简单抽奖小功能时，需要编写一个生成随机数的函数，该函数的作用是根据数据池的长度生成一个在0到数据池长度之间的随机数，作为抽奖的结果。下面是一个示例：

function getRandom(maxNumber) {
  return Math.floor(Math.random() * maxNumber);
}

该函数接受一个参数maxNumber，然后计算出一个不大于该参数的随机整数。

获取抽奖结果

在生成随机数的函数之后，我们需要实现获取抽奖结果的逻辑。根据上述步骤，我们已经有了一些数据，然后我们可以通过调用生成随机数的函数，获取一个随机数来获取一个中奖数据。

下面是一个例子：

function drawPrize() {
  var luckyNumber = getRandom(prizeList.length);
  return prizeList[luckyNumber];
}

该函数通过调用getRandom函数生成一个随机数，然后返回数据池中该随机数所对应的数据，即为中奖结果。

示例

下面给出两个示例：

示例一

假设需要在一个按钮button被点击时，生成一个中奖结果，并将结果展示在一个div中，那么可以这样实现：

//获取dom元素
var result = document.getElementById('result');
var button = document.getElementById('button');

//绑定点击事件
button.addEventListener('click', function() {
  var prize = drawPrize();
  result.innerText = prize.name;
});

该代码会为按钮button添加一个点击事件监听器，当按钮被点击时，调用drawPrize函数获取中奖结果，然后将中奖结果的名称展示在页面上。

示例二

假设需要在定时器到时时，生成一个中奖结果，并将结果展示在一个div中，那么可以这样实现：

var result = document.getElementById('result');

setInterval(function() {
  var prize = drawPrize();
  result.innerText = prize.name;
}, 2000);

该代码会开启一个2秒一次的定时器，每次到时时，调用drawPrize函数获取中奖结果，然后将中奖结果的名称展示在页面上。