写点什么

教你用 JavaScript 实现大转盘

  • 2022-12-22
    河北
  • 本文字数:1321 字

    阅读完需:约 4 分钟

教你用JavaScript实现大转盘

案例介绍

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

我们来用 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 (视频源码免费获取)

(部分素材来源于互联网,如有保护请联系作者)

发布于: 刚刚阅读数: 4
用户头像

还未添加个人签名 2020-09-02 加入

还未添加个人简介

评论

发布
暂无评论
教你用JavaScript实现大转盘_JavaScript_小院里的霍大侠_InfoQ写作社区