大转盘-竖-封面.jpg

案例介绍

欢迎来到我的小院，我是霍大侠，恭喜你今天又要进步一点点了！
我们来用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 (视频源码免费获取)
（部分素材来源于互联网，如有保护请联系作者）