基础抽奖程序的要求：
- 年龄18岁或小于18岁，提示 用户年龄尚小
- 大于18岁小于25岁提示（您正值青少年）
- 25-35岁提示您正值壮年
- 36-65岁提示加油
- 大于等于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++; } }
以上呢就是制作基础抽奖程序的一个小分享。
