js点击抽奖符合条件触发点击次数

刘志辉

已于 2024-04-18 20:16:26 修改

阅读量135

点赞数 1

文章标签： javascript 前端开发语言

于 2024-04-18 20:15:56 首次发布

本文链接：https://blog.csdn.net/weixin_58462329/article/details/137935606

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#hidden_one,
			#hidden_two {
				display: none;
			}
		</style>
	</head>
	<body>
		<input type="number" id="numbers" />
		<input type="button" onclick="Click_Submit()" value="提交" />
		<input type="text" readonly id="hidden_one" value="" />
		<input type="button" value="抽奖" id="hidden_two" onclick="click_through()" />
		<script>
			var numss = 0;
			let hidden_one = document.getElementById("hidden_one");
			let hidden_two = document.getElementById("hidden_two");
			let num = document.getElementById("numbers");
			alert("手速大抽奖");
			// 获取输入的值并且判断
			function Click_Submit() {
				let num = parseFloat(document.getElementById("numbers").value);
				if (num < 18) {
					alert("年龄小");
				} else if (num >= 18 && num < 25) {
					alert("青少年");
				} else if (num >= 25 && num < 35) {
					alert("壮年");
				} else if (num >= 35 && num < 65) {
					alert("加油");
				} else if (num >= 66) {
					alert("开始抽奖");
					// 执行这个函数体的时候把隐藏的输入框和按钮显示出来
					hidden_one.style.display = "inline";
					hidden_two.style.display = "inline";
					// 一次性时钟事件，过十秒后
					setTimeout(lotterys, 10000);
				};
			};
			// 点击增加数字
			function click_through() {
				numss++;
				hidden_one.value = numss;
			}
			// 数字判断
			function lotterys() {
				if (numss < 20) {
					alert("加油")
				} else if (numss >= 20 && numss < 60) {
					alert("大奖")
				} else if (numss >= 60) {
					alert("太棒了")
				};
				hidden_one.style.display = "none";
				hidden_two.style.display = "none";
				numss = 0;
				hidden_one.value = "";
				num.value = "";
			};



			// 计时器练习

			// 每隔一秒在控制台打印输出，循环执行
			// let int = setInterval(function() {
			// 	console.log('永久性定时器');
			// }, 1000)

			// 每隔一段时间打印在控制台,只执行一次
			// setTimeout(function(){
			// 	console.log("一次性定时器");
			// },3000)

			// 中止永久性计时器
			// let i = 0;
			// let inter = setInterval(function() {
			// 	i++;
			// 	if (i == 5) {
			// 		clearInterval(inter);
			// 		console.log('终止定时器');
			// 	} else {
			// 		console.log(i);
			// 	}
			// }, 1000)


			// 中止一个一次性定时器
			// let timerId = setTimeout(function() {
			//   console.log('定时器触发');
			// }, 3000);
			// clearTimeout(timerId);
			// console.log(timerId);
		</script>
	</body>
</html>

上面就是我所写的代码，下面还有定时器的讲解

遇到了什么问题：开始没有使用定时器，使用的是for循环，想让他们随着循环的改变改变对应的背景颜色，可是行不通不转

怎么解决的：找老师询问使用定时器解决了

整体思路：先制作了在div内创建8个奖品，按照顺序分别利用固定定位定位到合适位置，在div内再创建一个标签作为抽奖按钮，并定位到中间，再把css样式颜色修改一下

然后在添加点击事件，然后再在里面添加一个永久定时器，随着时间的改变改变对应下标的背景颜色，改变的同时再改变已经经过的背景颜色为原来的颜色，最后在后面添加一个多长时间删除定时器结束这个函数，结束后输出弹出框并且颜色改回蓝色，并且下标p修改为，使下一次点击抽奖的时候从开始转

刘志辉

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js点击抽奖符合条件触发点击次数

然后在添加点击事件，然后再在里面添加一个永久定时器，随着时间的改变改变对应下标的背景颜色，改变的同时再改变已经经过的背景颜色为原来的颜色，最后在后面添加一个多长时间删除定时器结束这个函数，结束后输出弹出框并且颜色改回蓝色，并且下标p修改为，使下一次点击抽奖的时候从开始转。遇到了什么问题：开始没有使用定时器，使用的是for循环，想让他们随着循环的改变改变对应的背景颜色，可是行不通不转。上面就是我所写的代码，下面还有定时器的讲解。怎么解决的：找老师询问使用定时器解决了。
复制链接

扫一扫