当前位置：首页 > news >正文

点击抽奖功能总结

news 来源：原创 2025/9/18 12:27:39

首先用户打开网页，映入眼帘的是一个输入框和一个提交按钮。当用户在输入框中输入自己的年龄并点击提交后，系统会根据输入的年龄给出相应提示。若年龄达到 60 岁，页面将显示一个新的抽奖区域，用户可以点击 “抽奖” 按钮开始抽奖。随着每次点击，抽奖次数会实时更新显示，并且根据抽奖次数的不同，用户将有机会获得不同等级的奖项，从 “恭喜你，没抽到” 到 “隐藏款” 惊喜，充满了未知与期待。

html

<div class="text_box"><input type="text" class="text" /><input type="submit" id="sub" name="sub" onclick="sub_num()" /></div><div class="draw_box"><input type="text" class="draw" readonly /><button onclick="click_draw()">抽奖</button></div>

在这段 HTML 代码中，我们构建了两个主要的区域。text_box类所在的<div>包含一个用于输入年龄的文本框和一个提交按钮，用户在此输入年龄并提交。draw_box类所在的<div>初始时是隐藏的（通过 CSS 的display: none设置），当用户满足特定条件（年龄达到 60 岁）时，该区域将显示出来，其中包含一个只读的文本框用于显示抽奖次数，以及一个 “抽奖” 按钮。

css

	* {margin: 0;padding: 0;}.text_box {width: 30%;margin: 20px 10px 20px 20px;}.draw_box {display: none;margin: 20px 10px 20px 20px;}

CSS 部分，通配符选择器*用于清除所有元素的默认内外边距，保证页面布局的整洁统一。.text_box类设置了宽度以及外边距，定义了输入区域的大小和位置。.draw_box类除了设置外边距外，通过display: none确保抽奖区域初始时不显示在页面上，直到满足条件才通过 JavaScript 动态显示。

// 首先获取到第一个提交按钮和第二个的大divlet submit = document.getElementById('sub');let draw = document.getElementsByClassName('draw_box')[0];let draw_num = document.getElementsByClassName('draw')[0];let draw_button = document.getElementsByTagName('button')[0];let submit_box = document.getElementsByClassName('text_box')[0];let click_num = 0;function sub_num() {let num = document.getElementsByClassName('text')[0];console.log(num);if (num.value <= 18) {alert('年龄不够哦');num.value = "";} else if (num.value > 18 && num.value < 35) {alert('青少年');num.value = "";} else if (35 <= num.value && num.value < 60) {alert('加油');num.value = "";} else if (num.value >= 60) {alert('年龄到啦！可以抽奖啦！');draw.style.display = 'block';num.value = "";// submit_box.style.display='none';setTimeout(function() {if (click_num <= 30) {alert('恭喜你，没抽到');draw.style.display = 'none';submit_box.style.display = 'block';alert('要在抽一次吗？');} else if (click_num > 30 && click_num < 60) {alert('太可惜了，二等奖');draw.style.display = 'none';submit_box.style.display = 'block';alert('要在抽一次吗？');} else if (click_num <= 60 && click_num < 120) {alert('恭喜你！一等奖');submit_box.style.display = 'block';draw.style.display = 'none';alert('要在抽一次吗？');} else {alert('隐藏款');submit_box.style.display = 'block';draw.style.display = 'none';alert('要在抽一次吗？');}draw_num.value = "";// click_num = 0;}, 10000)}}function click_draw() {click_num++;draw_num.value = click_num;console.log(click_num);}

变量初始化：

首先获取提交按钮元素并赋值给submit变量。获取抽奖区域的<div>元素并赋值给draw变量。获取抽奖次数显示的文本框元素并赋值给draw_num变量。获取 “抽奖” 按钮元素并赋值给draw_button变量。获取输入年龄的区域<div>元素并赋值给submit_box变量。
初始化click_num变量为 0，用于记录抽奖次数。

提交年龄相关的函数sub_num：

获取输入年龄的文本框元素num。
根据输入的年龄进行条件判断：

若年龄小于等于 18 岁，弹出提示 “年龄不够哦”，并清空输入框内容。

若年龄大于 18 岁且小于 35 岁，弹出提示 “青少年”，并清空输入框内容。

若年龄在 35 岁到 60 岁之间，弹出提示 “加油”，并清空输入框内容。

若年龄大于等于 60 岁，弹出提示 “年龄到啦！可以抽奖啦！”，显示抽奖区域（通过draw.style.display = 'block'），清空输入框内容。同时，设置一个 10 秒的定时器（setTimeout），在 10 秒后根据当前的抽奖次数click_num判断奖项：

若click_num小于等于 30，弹出提示 “恭喜你，没抽到”，隐藏抽奖区域，显示输入年龄区域，并询问是否再抽一次。

若click_num大于 30 且小于 60，弹出提示 “太可惜了，二等奖”，隐藏抽奖区域，显示输入年龄区域，并询问是否再抽一次。

若click_num在 60 到 120 之间，弹出提示 “恭喜你！一等奖”，隐藏抽奖区域，显示输入年龄区域，并询问是否再抽一次。

若click_num大于 120，弹出提示 “隐藏款”，隐藏抽奖区域，显示输入年龄区域，并询问是否再抽一次。最后清空抽奖次数显示文本框的内容。

抽奖函数click_draw：

每次点击 “抽奖” 按钮，click_num自增 1。

将更新后的click_num值显示在抽奖次数显示的文本框中（通过draw_num.value = click_num），并在控制台打印click_num值，方便调试。

相关文章：