JS点击抽奖

实现思路

1.打开页面 出现弹窗，弹窗显示内容‘开始抽奖活动’ 使用alert实现
2.通过文档的id名找到按钮 let声明变量为but
3.给按钮添加点击事件 使用onclick
4.通过文档的类名找到输入框 let声明变量为age 及是用户输入的数字
5.先要输入年龄 根据年龄来进行划分 用if判断输入的数字是否大于60 大于60可以 60岁以下不能
6.在六十岁以下再次划分 不同年龄段弹窗alert提示也不同
小于18 返回未成年不能抽奖
大于18小于25 返回青少年不能抽奖
大于25小于35 返回青年不能抽奖
大于35小于60 返回壮年不能抽奖
7.大于60 开始抽奖，抽奖时间要限制在10秒内 使用一次性定时器
8.十秒之后判断抽奖次数是否大于20 if判断
大于的话alert弹窗提示抽奖成功
数字越大奖品越大 20-40 一瓶水
40-60 一杯奶茶 60-100三杯奶茶
9.小于的话alert弹窗提示抽奖失败
10.抽奖结束后把输入框的值清空掉 可以用元素.value = null方法

在HTML中的结构代码为：

<input type="number" class="int" placeholder="请输入年龄" />
<button id="but">确认</button><br>
<input id="num" style="display: none;" type="number" value="0" />
<button id="bon" style="display: none;">点击抽奖</button>

在JS样式中的代码为：

<script>

	alert('开始抽奖活动');
	let but = document.getElementById('but');
	let bon = document.getElementById('bon');
	let num = document.getElementById('num');
	but.onclick = function() {
		let dom = document.getElementsByClassName('int')[0];
		let age=dom.value;
		console.log(age);
		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('是壮年不能抽奖');
			console.log('age');
		} else if (60 < age) {
			alert('可以抽奖，请在十秒内完成抽奖');
			bon.style = 'display=block';
			num.style = 'display=block';
			console.log('age');
			setTimeout(function() {
				if (value < 20) {
					alert('没有奖品')
				} else if (value < 40) {
					alert('奖励一瓶水')
				} else if (value < 60) {
					alert('奖励一杯奶茶')
				} else if (value < 100) {
					alert('奖励三杯奶茶')
				}
				num.value = null;
				value = 0;
				bon.style.display = 'none';
				num.style.display = 'none';
				dom.value= '';
			}, 10000);
		}

	}

	// 输入框中的值从0开始 并且在输入框上显示 每点击按钮一次就+1
	//实现方法 给按钮绑定点击事件 onclick
	let value = 0;
	bon.onclick = function() {
		console.log(value);
		value++;
		num.value = value;

	}
</script>