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

最新推荐文章于 2024-07-24 11:16:38 发布

IKUNzhenin

最新推荐文章于 2024-07-24 11:16:38 发布

阅读量387

点赞数 10

分类专栏： js练手功能文章标签： css html5

本文链接：https://blog.csdn.net/IKUNzhenin/article/details/135332756

版权

js练手功能专栏收录该内容

59 篇文章 0 订阅

订阅专栏

基于HTML和JavaScript构建的抽奖系统，根据用户输入的年龄进行不同阶段的提示和抽奖规则，包含计时和按钮操作。

摘要由CSDN通过智能技术生成

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

IKUNzhenin

关注

10
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
如何用弹窗制作一个简单的抽奖功能

然后通过事件监听，当用户点击确认按钮时，获取用户输入的年龄，通过多个if语句判断年龄的范围，并给出相应的提示信息。如果年龄大于等于60，提示请在10秒内展示您的手速，并显示抽奖按钮和输入框，设置一个计时器，10秒后根据点击抽奖按钮的次数给出奖品提示。在计时器的回调函数中，根据adraws的值给出相应的奖品提示，然后将输入框和抽奖按钮的显示隐藏，将adraws重置为0，并清空年龄输入框的值。需要注意的是，代码中还存在一些问题，比如输入的年龄为负数时没有进行处理，抽奖成功后没有重新抽奖的逻辑等。
复制链接

扫一扫

专栏目录