记录JavaScript练习

定时器练习

HTML代码：

<div id="lottery">
		  <div class="box-one">1</div>
		  <div class="box-two">2</div>
		  <div class="box-three">3</div>
		  <div class="box-four">4</div>
		  <div class="box-five">5</div>
		  <div class="box-six">6</div>
		  <div class="box-seven">7</div>
		  <div class="box-eight">8</div>
		</div>
		<button id="start-btn">开始抽奖</button>

CSS代码：

		<style>
			#lottery {
			
			}
			.box-one {
			  width: 100px;
			  height: 100px;
			  font-size: 50px;
			  text-align: center;
			  line-height: 100px;
			  background-color: #fff;
			  border: 1px solid black;
			  margin: 5px;
			  position: absolute;
			  left: 330px;
			  top: 6px;
			}
			.box-two {
			  width: 100px;
			  height: 100px;
			  font-size: 50px;
			  text-align: center;
			  line-height: 100px;
			  background-color: #fff;
			  border: 1px solid black;
			  margin: 5px;
			  position: absolute;
			  left: 440px;
			  top: 6px;
			}
			.box-three {
			  width: 100px;
			  height: 100px;
			  font-size: 50px;
			  text-align: center;
			  line-height: 100px;
			  background-color: #fff;
			  border: 1px solid black;
			  margin: 5px;
			  position: absolute;
			  left: 550px;
			  top: 6px;
			}
			.box-four {
			  width: 100px;
			  height: 100px;
			  font-size: 50px;
			  text-align: center;
			  line-height: 100px;
			  background-color: #fff;
			  border: 1px solid black;
			  margin: 5px;
			  position: absolute;
			  left: 550px;
			  top: 120px;
			}
			.box-five {
			  width: 100px;
			  height: 100px;
			  font-size: 50px;
			  text-align: center;
			  line-height: 100px;
			  background-color: #fff;
			  border: 1px solid black;
			  margin: 5px;
			  position: absolute;
			  left: 550px;
			  top: 234px;
			}
			.box-six {
			  width: 100px;
			  height: 100px;
			  font-size: 50px;
			  text-align: center;
			  line-height: 100px;
			  background-color: #fff;
			  border: 1px solid black;
			  margin: 5px;
			  position: absolute;
			  left: 440px;
			  top: 234px;
			}
			.box-seven {
			  width: 100px;
			  height: 100px;
			  font-size: 50px;
			  text-align: center;
			  line-height: 100px;
			  background-color: #fff;
			  border: 1px solid black;
			  margin: 5px;
			  position: absolute;
			  left: 330px;
			  top: 234px;
			}
			.box-eight {
			  width: 100px;
			  height: 100px;
			  font-size: 50px;
			  text-align: center;
			  line-height: 100px;
			  background-color: #fff;
			  border: 1px solid black;
			  margin: 5px;
			  position: absolute;
			  left: 330px;
			  top: 120px;
			}
			
			.lottery-active {
			  background-color: orange;
			}
			button{
				width: 100px;
				height: 100px;
				background-color: aqua;
				position: absolute;
				left:446px;
				top: 126px;
				
			}
			button:hover{
				cursor: grabbing;
			}
		</style>

 JS代码:

		<script>
			let but = document.getElementById('start-btn');
			let lot = document.getElementById('lottery');
			let num = lot.getElementsByTagName('div');
			let i = 0;
			let speed = 0;
			let nums;
			let time = 500;
			but.onclick = button;

			function button() {
				num[i].style.backgroundColor = "orange";
				inner = setInterval(rotates, time)
				nums = Math.floor(Math.random() * num.length);
				console.log(nums);
				but.onclick = null
			}

			function rotates() {
				if (i < num.length - 1) {
					i++;
					num[i].style.backgroundColor = "orange";
					num[i - 1].style.backgroundColor = "white";

				} else {
					i = 0;
					num[i].style.backgroundColor = "orange";
					num[num.length - 1].style.backgroundColor = "white";
					speed++;
				}
				if (speed <= 3) {
					if (time <= 100) {
						time = 100;
					} else {
						time -= 50;
					}
				} else {
					if (time >= 500) {
						time = 500;
					} else {
						time += 50;
					}
				}
				console.log(time);
				if (i == nums && speed > 5) {
					clearInterval(inner)
					setTimeout(function() {
						alert("获得" + num[i].innerHTML);
						num[i].style.backgroundColor = "white";
						but.onclick = button;
						nums = 0;
						i = 0;
						time = 500;
						speed = 0;
					}, 200)
				} else {
					clearInterval(inner);
					inner = setInterval(rotates, time)
				}
			}
		</script>

效果为九宫格旋转抽奖。仅为个人记录练习。

ヾ(•ω•`)oByeBye~