抽奖程序介绍:
1. 年龄18岁或小于18岁, 提示( 青年 )
2. 大于18岁小于30岁提示( 年龄不够)
3. 大于30岁小于66岁提示 (年龄还差一点)
4. 大于等于66岁则可以进行抽奖, 用户在十秒内点击按钮20次, 提示抽奖成功, 否则失败
根据需求可知:
需要有一个input框来输入年龄,并且需要有一个按钮来点击进行判断是否比66大
(可以有一个提交按钮,当输入的值大于66的时候抽奖按钮才出来,我这里为了方便就直接用一个按钮了)
当大于66岁的时候,需要再有一个input框,默认值为0,每点击一次抽奖按钮,他就会加1,
在10秒内如果点击的次数超过20即为抽奖成功,反之则失败
代码实现:cv可以直接使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <style> #we { display: none; } #wea { display: none; } </style> <body> <input type="number" id="input"> <button onclick="fu()">提交</button> <input type="text" id="we" disabled> <button id="wea" >开始点击</button> <script> //获取元素id let input = document.getElementById("input"); let id = document.getElementById("we"); let kai = document.getElementById("wea"); //命名函数 function fu() { //判断input元素的值小于18弹出 if (input.value < 18) { alert('青年') //否则 判断input元素值小于30弹出 } else if (input.value < 30) { alert('年龄不够') //否则 判断input元素值小于66弹出 } else if (input.value < 66) { alert('年龄还差一点') //否则 } else{ //id样式显示、kai样式显示 id.style.display = "block"; kai.style.display = "block"; //设置变量a=0; let a = 0; //设置kai按钮点击事件 kai.onclick = function() { //每次加1; a++; //id值=a; id.value = a console.log(a); } //设置一个定时器 setTimeout(function() { //判断id元素的值大于10弹出 if (id.value > 10) { alert('抽奖成功'); //id样式隐藏,kai样式隐藏 id.style.display = "none"; kai.style.display = "none"; //成功后让a=0; a = null; id.value = a; input.value = null; //否则 弹出 } else { alert('抽奖失败'); id样式隐藏,kai样式隐藏 id.style.display = "none"; kai.style.display = "none"; //失败后让a=0; a = null; id.value = a; input.value = null; } //1000毫秒等于1秒 }, 5000) } } </script> </body> </html>