当前位置：首页 > 行业动态 > 正文

html制作抽奖网页

创建抽奖网页需 HTML 结构作框架，CSS 美化界面，JS 实现抽奖逻辑，涉及随机数生成与交互

页面结构设计

使用HTML标签构建基础框架,包含输入框、按钮和结果显示区域。

元素类型 说明 代码示例
input 用户输入姓名/手机号 <input type="text" id="userInput" placeholder="请输入姓名">
button 触发抽奖动作 <button onclick="startLottery()">开始抽奖</button>
div 显示抽奖结果 <div id="result"></div>

核心功能实现（JavaScript）

通过随机数生成模拟抽奖逻辑,并将结果动态插入页面。

html制作抽奖网页 第1张

<script>
// 1. 定义参与抽奖的名单数组
const participants = [];
// 2. 收集用户输入并触发抽奖
function startLottery() {
  const userName = document.getElementById('userInput').value.trim();
  if(userName === '') {
    alert('请输入姓名');
    return;
  }
  participants.push(userName); // 将用户加入名单
  document.getElementById('userInput').value = ''; // 清空输入框
  // 3. 生成随机索引
  const randomIndex = Math.floor(Math.random()  participants.length);
  // 4. 显示中奖结果
  document.getElementById('result').innerText = `恭喜 ${participants[randomIndex]} 中奖！`;
}
</script>

样式美化（CSS）

通过CSS增强视觉效果,提升用户体验。

样式属性 说明 代码示例
按钮样式 圆角+渐变色 button {border-radius:5px; background: linear-gradient(orange, red);}
结果区域 闪烁动画 #result {animation: blink 2s infinite;}
输入框 阴影效果 input {box-shadow: inset 0 0 5px #ccc;} 
<style>
/ 抽奖结果闪烁动画 /
@keyframes blink {
  0% {color: red;}
  50% {color: yellow;}
  100% {color: red;}
}
</style>

相关问题与解答

Q1：如何防止用户重复提交相同信息？
A1：在startLottery函数中添加去重逻辑，使用includes()方法检测数组中是否已存在该用户名，修改后的代码如下：

if(participants.includes(userName)) {
  alert('请勿重复提交');
  return;
}
participants.push(userName);

Q2：如何限制抽奖次数为每人一次？
A2：需记录用户设备唯一标识（如localStorage），在页面加载时检查是否已参与过，示例代码：

// 页面加载时执行
window.onload = function() {
  if(localStorage.getItem('hasLottery')) {
    alert('每个设备仅限参与一次');
    document.getElementById('button').disabled = true;
  }
}
// 抽奖后设置标记
function startLottery() {
  // ...原有逻辑
  localStorage.setItem('hasLottery', 'true');
}
0

相关文章