案例介绍

欢迎来到我的小院              ，我是霍大侠 
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，恭喜你今天又要进步一点点了！

我们来用JavaScript编程实战案例













，做一个大转盘  
  
  
  
  
  
  
。当你难以抉择的时候不妨用这个案例来帮你做选择 
  
  
  
  
  
  
 。通过编程实战我们可以学到按钮的点击事件onclick()以及定时器的使用.

案例演示

每个选择都展示在不同的盒子里
  
  
  
  
  
  
  ，通过点击中间的开始选择按钮 
  
  
  
  
  
  
 ，系统就会在5s内自动为您做出选择


 


 


 


 


 


 


 。

源码学习

进入核心代码学习 


 


 


 


 


 


 


，我们先来看HTML中的核心代码 
 
 
 
 
 
 
。

<!-- 有个小院-兴趣编程 --> <div class=big> <div class="option">大盘鸡</div> <div class="option">麻辣香锅</div> <div class="option">酸辣粉</div> <div class="option">兰州拉面</div> <div id="start">开始选择</div> <div class="option">疙瘩汤</div> <div class="option">鱼香肉丝</div> <div class="option">麻辣烫</div> <div class="option">咸菜</div> </div>

然后再让我们来看CSS核心代码
 
 
 
 
 
 
 ，CSS代码主要是对盒子的大小等进行布局  
   
   
   
   
   
   
 。

.big{ width: 600px; height: 600px; border: 1px solid red; } .big>div{ width:33%; height: 33%; border: 1px solid red; float: left; line-height: 200px; text-align: center; font-size: 30px; font-weight: bold; } #start{ cursor: pointer; background-color: rgb(160, 110, 119); }

接下来进行核心的JavaScript代码编写  
   
   
   
   
   
   
 ，首先根据id和className获取对象

 

 

 

 

 

 

 。通过onclick设置中间按钮的点击事件 

 

 

 

 

 

 

，触发一个定时器setInterval()
 

 

 

 

 

 

 
。然后通过random获取0-7的随机数作为索引

 

 

 

 

 

 

 ，并据此将其索引对应的盒子设为选中的目标              ，设置选中的背景颜色              。利用for循环取消之前盒子的选定 
 

 
 

 
 

 
 

 
 

 
 

 
 

，设置时间点timer用于停止定时器
 

 
 

 
 

 
 

 
 

 
 

 
 

 。

//有个小院-兴趣编程 let but=document.getElementById("start"); let options=document.getElementsByClassName("option"); let timer=null; but.onclick=function(){ let num=0; if(timer==null){ timer=setInterval(()=>{ num++; let ran= Math.round(Math.random()*(7-0)+0); for(let i=0;i<options.length;i++){ options[i].style.backgroundColor=white; } options[ran].style.backgroundColor=orange; if(num>=50){ clearInterval(timer); timer=null; } },100); } }

记得关注我













，每天学习一点点

你觉得大转盘还能用在什么地方？

全网可搜：小院里的霍大侠                     ， 免费获取简单易懂的实战编程案例













。编程/就业/副业/创业/资源                     。

私微信：huodaxia_xfeater

二维码： https://www.yuucn.com/wp-content/uploads/2022/11/1669777238-fc7aa5051075c5b.jpg

公众号：有个小院（微信公众号：yougexiaoyuan）

github：yougexiaoyuan (视频源码免费获取)

（部分素材来源于互联网 
 
 
 
 
 
 
 
 
 
 
 
 
 
，如有保护请联系作者）