高级版随机点名-跳动格子

完成的效果是点击开始按钮，红色格子开始随机跳动，与此同时开始按钮也变成结束按钮，当点击结束按钮时，红色格子选到的就会在页面的左边显示出来，下面我们开始吧！

HTML

		

			天选之子
		
		

			开始
			
		

       html部分很简单，主要就分为左右两个板块 为了限制两个板块的位置我们又在外面添加了一个大div(可以不加！直接给body设置flex布局)

1.左边板块就是用来存放我们点到的数据

2.右边板块我们来布局整体的样式 就是一个按钮加上下面的格子 在这里为了方便看，我们可以先写上一个span标签给他设置样式 后面再在js里面给他添加上

CSS

        整体的css也是非常的简单，需要注意的是我们右边的div宽度为600px，但是span标签的宽度是100px，因为要放6个span标签，所以span一定会自动换行 这时候一定要记得怪异盒子！box-sizing:border-box

       最后要注意的是我们先给红色格子设置好样式 类名为active方便后面操作

JS

//获取右边div
		let right = document.querySelector(".right")

//声明数组 并把数组的数据放入span中
		let data = ["孙悟空", "唐僧","猪八戒","沙僧","白龙马","观音菩萨","如来佛祖","玉皇大            
                  帝","太白金星","牛魔王","铁扇公主","红孩儿","二郎神","哪吒","托塔天王","蜘 
                  蛛精","白骨精","金角大王","银角大王"]
//声明一个spans
		let spans;

//for循环把数据放入新创建的span里面
		for(let i = 0 ;i < data.length;i++){	
			right.innerHTML += `${data[i]}`	
		}

//重新获取现在页面已有的spans
		spans = document.querySelectorAll(".right span")

		let btn = document.querySelector(".right button")
        let currentactive = document.querySelector(".active");
        let divleft = document.querySelector(".left")
//添加点击事件
		btn.addEventListener('click',function(){
			//两个等号是判断
			if(btn.innerText=="开始"){
				//一个等号是赋值
				btn.innerText="结束"
    
        //添加定时器
			    time = setInterval(function(){				
        //if里面的条件返回值是true/false 是true的时候就执行 
			    if(currentactive != null){
				    currentactive.classList.remove("active")
    			}
        //定义一个随机数
			    num = parseInt(Math.random()*spans.length)
			    currentactive = spans[num]
			    currentactive.classList.add("active")
				
				},100)
			}else{
				btn.innerText = '开始'
				clearInterval(time)
				
				divleft.innerHTML +=`
天选之子${spans[num].innerText}
`
				
				
		         if (currentactive != null) {
		            currentactive.remove();
		            spans = document.querySelectorAll(".right span");//获取新的span
		        }
			}
		})

 大概的思路我都已经在上面注释出来了

1. 看到这个练习我第一个想到的是创建一个数组存放数据，然后把数组中的数据放到页面上去
2. 所以我先获取了右边的div 然后创建数组、for循环遍历数组
3. ✨值得一提的是for循环  原本的代码：                                                                                            let span = document.createElement("span")  //创建span标签
               right.appendChild(span)  //把新创建的span标签加入到右边的div中
               span.innerText=data[i]  //把数组中的数据放入span标签并且渲染到页面上            优化后的代码：right.innerHTML += `${data[i]}`  优化后的代码其实就是根据innerHTML的特性(可以以代码的形式获取或设置内容)在right中创建span标签，并给span标签设置内容 ，这里用到了用到了模板字符串`${}`  ，一定要注意模板字符串使用的是反引号(在tab键上方)  ，还有一个点就是！这里注意要用+= 不然前面的数据会被覆盖 页面上只能得到最后一个数据
4. 我们前面定义了一个spans的全局变量，for循环结束之后，我们重新获取一下页面上的span标签 这样下面就可以用我们新创建的span标签了
5. 获取按钮之后给按钮添加点击事件
6. 整体思路：①点击开始之后，先让按钮的文字变成结束，添加定时器让红色格子跳动（给span标签添加active类名）②点击结束之后，设置按钮文本变成开始，清除定时器，在左边添加上选中的数据
7. currentactive代表有active类名的span标签    但目前if语句里面的currentactive=null，所以条件为false，不执行   执行一次之后，currentactive != null，这时候就把有这个类名的span标签类名清除
8. 定义一个随机数，把随机span标签(spans[num])给currentactive，给currentactive添加上类名，形成跳动的效果 注意！if语句和随机数赋值给currentactive的顺序不要写错！！！先清除类名，再添加类名
9. 点击停止按钮，先改变按钮文本、暂停定时器，然后把得到的数据放到左边(在这里我还是用到了第三步提到的简单方法)
10. 又到了下面的if语句，这时if语句的意思为删除我们已经选到的span标签，然后！！！重新获取现在已有的所有span标签
11. 全部的就完成了，小伙伴们有什么不懂的或者高超见解可以在下面留言，我们一起讨论哦~