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