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

点击抽奖功能总结

news 来源：原创 2025/6/17 14:33:41

首先用户打开网页，映入眼帘的是一个输入框和一个提交按钮。当用户在输入框中输入自己的年龄并点击提交后，系统会根据输入的年龄给出相应提示。若年龄达到 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 动态显示。

// 首先获取到第一个提交按钮和第二个的大div
			let 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，用于记录抽奖次数。