原生js实现简易抽奖系统

当我们需要在网站上添加一个简单的抽奖系统时，可以使用原生js进行实现。以下是实现简易抽奖系统的详细攻略：

第一步：创建HTML结构

首先，在HTML页面上创建必要的结构。我们可以使用以下代码：

<div>
  <h1>抽奖系统</h1>
  <p>点击下面的按钮开始抽奖：</p>
  <button id="startBtn">开始抽奖</button>
  <p id="result"></p>
</div>

在这个HTML代码中，我们创建了一个div元素，里面包含了一个h1标签，一个描述文本，一个按钮以及一个用于显示抽奖结果的p标签。请注意，我们给“开始抽奖”按钮赋予了一个ID属性，这将在javascript中使用。

第二步：添加CSS样式

添加CSS样式将页面进行美化。我们可以使用以下代码：

div {
  text-align: center;
  padding: 20px;
  background-color: #f5f5f5;
  width: 50%;
  margin: auto;
  border-radius: 10px;
}

h1 {
  color: #ff6a00;
}

button {
  background-color: #ff6a00;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

p {
  margin-top: 20px;
  font-weight: bold;
}

这个CSS代码设置了div元素的样式，包括居中、宽度、间距、边框、背景等属性。添加了h1标签的颜色，按钮的样式，以及结果p标签的样式等。

第三步：编写JS代码

接下来，我们需要编写javascript代码，实现抽奖系统。以下是实现抽奖功能的js代码。

const startBtn = document.getElementById('startBtn');
const result = document.getElementById('result');

// 奖品列表
const prizes = ['一等奖', '二等奖', '三等奖', '四等奖', '五等奖'];

// 点击按钮时触发的函数
startBtn.addEventListener('click', () => {
  // 生成随机数
  const randomIndex = Math.floor(Math.random() * prizes.length);

  // 显示抽奖结果
  result.textContent = `恭喜你获得了${prizes[randomIndex]}！`
});

这段js代码首先获取了HTML页面中的开始抽奖按钮和结果标签，并使用了一个奖品列表。当用户点击抽奖按钮时，将会在奖品列表中随机选择一个奖品，并将结果展示在页面上。

示例一：增加奖品种类

若需要增加奖品种类及概率，则可以在奖品列表中添加多个相同的奖品，实现相应的概率分配。以下代码为示例：

const prizes = ['一等奖', '二等奖', '三等奖', '四等奖', '五等奖', '五等奖', '五等奖'];

在这个示例中，我们增加了三个“五等奖”奖品，相对应地，五等奖获奖的概率变为3/7。

示例二：多次抽奖

若需要连续抽取多次奖品，则可以修改JS代码以实现多次抽奖。一个简单的方法是添加循环结构。

for (let i = 0; i < 5; i++) {
  //生成随机数
  const randomIndex = Math.floor(Math.random() * prizes.length);

  // 显示抽奖结果
  console.log(`第${i+1}次抽奖，恭喜你获得了${prizes[randomIndex]}！`);
}

在这个示例中，我们使用了一个循环，进行了5次抽奖，并在控制台输出了结果。若需要在页面展示多次抽奖结果，可以在HTML页面中添加一个用于记录结果的列表元素，并将抽奖结果添加至其中。