案例介绍
欢迎来到我的小院，我是霍大侠，恭喜你今天又要进步一点点了！
我们来用 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
二维码： http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg
公众号：有个小院（微信公众号：yougexiaoyuan）
github：yougexiaoyuan (视频源码免费获取)
（部分素材来源于互联网，如有保护请联系作者）
评论