上阵不离本行，抽奖软件1个小时搞定

2023-10-06 16:17:24

有些时候，我们难免会遇到这样的情况：接手临时任务时，因为时间紧迫，手头没有成熟的工具和方案，只能临时进行简单策划与制作。本文，就以开发一个小型的基于网页的抽奖程序为例，跟大家聊一聊如何在没有太多时间和准备的情况下，快速地完成一项临时任务。

快速入门：1小时完成抽奖程序

第一步：打开文本编辑器，创建一个名为“index.html”的文件，并输入以下代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>抽奖程序</h1>
  <form>
    <input type="text" id="name" placeholder="姓名">
    <input type="submit" value="提交">
  </form>
  <div id="result"></div>
</body>
</html>

第二步：创建一个名为“script.js”的文件，并输入以下代码：

// 获取元素
const form = document.querySelector('form');
const result = document.querySelector('#result');

// 监听表单提交事件
form.addEventListener('submit', (event) => {
  // 阻止表单默认提交行为
  event.preventDefault();

  // 获取参赛者姓名
  const name = document.querySelector('#name').value;

  // 将参赛者姓名添加到数组中
  const participants = [];
  participants.push(name);

  // 从数组中随机抽取一名获奖者
  const winner = participants[Math.floor(Math.random() * participants.length)];

  // 显示获奖者姓名
  result.innerHTML = `<h1>获奖者：${winner}</h1>`;
});