这是一个用HTML和JavaScript实现的条件判断抽奖页面。用户需要输入年龄,根据年龄的不同,页面会给出相应的提示信息。
代码首先弹出一个提示框,告诉用户正在进入抽奖页面。然后通过事件监听,当用户点击确认按钮时,获取用户输入的年龄,通过多个if语句判断年龄的范围,并给出相应的提示信息。如果年龄小于18,提示不可抽奖,是未成年;如果年龄在18到25之间,提示不可以抽奖,是青少年;如果年龄在25到35之间,提示不可以抽奖,是壮年;如果年龄大于等于60,提示请在10秒内展示您的手速,并显示抽奖按钮和输入框,设置一个计时器,10秒后根据点击抽奖按钮的次数给出奖品提示。
在代码的后面,定义了一个变量adraws来记录点击抽奖按钮的次数,初始化为0。当用户点击抽奖按钮时,adraws的值增加,同时将其显示在输入框中。在计时器的回调函数中,根据adraws的值给出相应的奖品提示,然后将输入框和抽奖按钮的显示隐藏,将adraws重置为0,并清空年龄输入框的值。
需要注意的是,代码中还存在一些问题,比如输入的年龄为负数时没有进行处理,抽奖成功后没有重新抽奖的逻辑等。你可以根据需要进行修改和完善。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>条件判断抽奖</title> <style> </style> </head> <body> <input type="number" value="请输入年龄" id="age" placeholder="请输入年龄"/> <button id="send">确认</button> <input id="draws" type="number" value="0" style="display: none;" readonly="readonly" placeholder="请输入年龄"//> <button id="draw" style="display: none;" >抽奖</button> </body> <script> //要提醒用户进入的是抽奖页面、、提示弹窗用alert属性提示 //根据用户输入的数字(要数字框)来用if判断抽奖年龄用回是否可以抽奖 //( 1-18;不可抽奖,是未成年;18-25;不可以抽奖,是青少年;25-35;不可抽奖,是壮年;30-60不可以抽奖,加油;大于60,开始抽奖环节)、、提示弹窗用alert属性提示 //符合条件后(10秒后)还要根据点击抽奖按钮的次数来弹出相应的奖品弹窗; //( 0-30;参与奖;30-60;三等奖;60-90;二等奖;90-120;一等奖;120-160;特等奖;);提示弹窗用alert属性提示 //抽奖成功后可以重复抽奖 //抽奖结束 //刷新后要重新输入数字 //用一次性定时器去执行; // 代码 alert('正在进入抽奖页面'); //要提醒用户进入的是抽奖页面、、提示弹窗用alert属性提示 let ages = document.getElementById('age'); let draw = document.getElementById('draw'); let send = document.getElementById('send'); let draws= document.getElementById('draws'); send.onclick = function() { let age = parseInt(ages.value); if(age<0){ alert('不可抽奖,不可为负数'); }else if (age < 18) { alert('不可抽奖,是未成年'); console.log(age); } else if (age <= 25) { alert('不可以抽奖,是青少年'); console.log(age); } else if (age <= 35) { alert('不可以抽奖,是壮年'); console.log(age); } else if (age <60) { alert('请加油,马上就可以抽奖了'); } else if(age>=60){ alert('请在10秒内展示您的手速吧') draws.style.display='block'; draw.style.display='block'; console.log(age); setTimeout(function(){ if (adraws<=30) { alert('获得参与奖'); alert.value=null; } else if(adraws<=60){ alert('获得三等奖'); }else if(adraws<=90){ alert('获得二等奖'); }else if(adraws<=120){ alert('获得一等奖'); }else if(adraws<160){ alert('获得特等奖'); } draws.value=null; adraws= 0; draws.style.display='none'; draw.style.display='none'; ages.value=null; },10000); } }; let adraws= 0; draw.onclick=function(){ console.log(adraws); adraws++; draws.value=adraws; }; </script> </html>
?