用html5做一个随机抽奖程序

涛哥
Html代码

要使用HTML5创建一个简单的随机抽奖程序，您可以结合JavaScript代码和HTML表单元素。以下是一个基本示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>随机抽奖</title>
</head>
<body>
  <h1>随机抽奖程序</h1>

  <form>
    <label for="participants">参与者名单:</label><br>
    <textarea id="participants" name="participants" rows="10" cols="50"></textarea><br>
    <button onclick="startLottery()">开始抽奖</button>
  </form>

  <p id="result"></p>

  <script>
    function startLottery() {
      var participants = document.getElementById("participants").value.split("\n");
      var winnerIndex = Math.floor(Math.random() * participants.length);
      var winnerName = participants[winnerIndex];
      document.getElementById("result").innerHTML = "恭喜 " + winnerName + " 获胜!";
    }
  </script>
</body>
</html>

在上述用html5做一个随机抽奖程序示例中，我们首先创建了一个HTML表单，其中包含一个文本框<textarea>用于输入参与者名单，以及一个按钮<button>来启动抽奖程序。

然后，我们使用JavaScript编写了一个名为startLottery()的函数来处理抽奖逻辑。该函数首先获取参与者名单，并将其分割成一个数组。然后，它使用Math.random()函数生成一个随机索引数，并使用该数确定获胜者的名称。最后，它将获胜者名称显示在页面上。

注意：上述示例只是一个基本的随机抽奖程序示例，如果您需要更复杂的功能，例如排除某些参与者或多个获奖者等，则需要添加更多的代码逻辑和HTML元素。

 
  • 抽奖功能