用html5做一个随机抽奖程序

要使用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元素。

 
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定