<!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修改为，使下一次点击抽奖的时候从开始转
