如何用弹窗制作一个简单的抽奖功能

2024-01-02 10:26:57

这是一个用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>

?

文章来源:https://blog.csdn.net/IKUNzhenin/article/details/135332756
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。