如何用JS实现基础的抽奖程序

基础抽奖程序的要求：

1.  年龄18岁或小于18岁，提示 用户年龄尚小
2.  大于18岁小于25岁提示（您正值青少年）
3.  25-35岁提示您正值壮年
4. 36-65岁提示加油
5.  大于等于66岁则可以进行抽奖，用户在十秒内点击按钮20次，提示抽奖成功，否则失败

   ---

我们首先要用html把结构写出来：

<form>
	<input type="number" placeholder="请输入年龄" id="age" value="">
	<input type="button" value="提交" onclick="con()" id="sub">
	<input type="number" id="num" style="display: none;">
	<input type="button" value="抽奖" id="but" value="" style="display: none;">
</form>

默认先把第三第四个input隐藏起来，当点击第一个按钮时才显示，css样式就先不设置了，主要的就是JS的部分，该如何执行呢？

先简单看一下代码

// 获取第一个按钮
let sub = document.getElementById('sub');
// 获取第二个数字输入框
let num = document.getElementById("num");
// 获取第二个按钮
let but = document.getElementById("but");

function con() {
	// 获取第一个数字输入框的value的值
	let age = document.getElementById('age').value;
	console.log(age);
	// 程序要求
	if (age <= 18) {
		alert("用户年龄尚小");
	} else if (age > 18 && age < 25) {
		alert("您正值青少年");
	} else if (age >= 25 && age <= 35) {
		alert("您正值壮年");
	} else if (age >= 36 && age <= 65) {
		alert("加油");
	} else if (age >= 66) {
		// 当年龄大于66岁时出现弹窗，并显示第三四个input
		alert('开始抽奖');
		document.getElementById('num').style.display = "block";
		document.getElementById('but').style.display = "block";
		num.value = 0;
		// 使用一次性定时器判断点击次数是否大于20次
		setTimeout(function() {
			if (num.value > 20) {
				alert('抽奖成功');
			} else {
				alert('抽奖失败');
			}
		}, 10000)
	}
	// 点击添加点击事件
	but.onclick = function() {
		num.value++;
	}
}

以上呢就是制作基础抽奖程序的一个小分享。