首页 > 编程语言 >教你用JavaScript获取大转盘

教你用JavaScript获取大转盘

时间:2022-12-22 14:22:20浏览次数:60  
标签:JavaScript 教你用 编程 timer 大转盘 获取 let

大转盘-竖-封面.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 (视频源码免费获取)
(部分素材来源于互联网,如有保护请联系作者)

标签:JavaScript,教你用,编程,timer,大转盘,获取,let
From: https://www.cnblogs.com/xFeater/p/16997884.html

相关文章

  • JavaScript的Array一些非常规玩法
    [{name:1},{name:2}].forEach((v,i,ar)=>{console.log(v,i,ar)});//基础遍历[{name:1},{name:2}].map((v)=>v.name);//[1,2]返回对象数组中指定字段值的一位数组(不改变......
  • JavaScript原生代码处理JSON的一些高频次方法合集
    letjson={/**判断JSON格式*/isJSON:function(str){if(typeofstr=="string"){try{varobj=JSON.parse(str);......
  • JavaScript Date 对象知识点复习
    复制单个代码控制台运行看结果从Date对象返回一个月中的某一天(1~31)。console.log("newDate().getDate()"-----------,newDate().getDate())从Date对象返......
  • 教你用Java实现动态调色板
    案例介绍欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用Java编程实战案例,做一个动态调色板。案例界面会出现三个滑动组块以及对应的数值,通过移动滑块可以......
  • javaScript中??和?.简记
    ??表示:只有当左侧为null和undefined时,才会返回右侧的数;空值合并操作符(??)是一个逻辑操作符,当左侧的操作数为[null]或者[undefined]时,返回其右侧操作数,否则返回左侧操作数;......
  • JavaScript中数组中的方法
    将数组转换成字符串JavaScript方法 toString() 把数组转换为数组值(逗号分隔)的字符串。实例: varfruits=["Banana","Orange","Apple","Mango"]; ......
  • JavaScript
    1、什么是JavaScriptJavaScript是一门世界上最流行的脚本语言Java、JavaScript没有任何关系,当初为了热门,所以在Script前面加上Java~~10天~一个合格的程序员,必须要精通......
  • 第一百一十六篇: JavaScript理解对象
    好家伙,本篇为《JS高级程序设计》第八章“对象、类与面向对象编程”学习笔记 1.关于对象ECMA-262将对象定义为一组属性的无序集合。严格来说,这意味着对象就是一组没有特......
  • vscode 调试 C++/JavaScript
     MicrosoftVisualStudioCode  在调试JavaScript代码时,其中三种比较简单:1.使用Chrome等浏览器调试2. 使用Ctrl+Shift+B 快捷键运行html文件,需要在Task......
  • JavaScript 逆向 ( 一 ) --- JavaScript 语法基础
    1、JavaScript基础菜鸟教程JavaScript教程:​​https://www.runoob.com/js/js-tutorial.html​​1.基础数据类型:number、string、boolean、null、undefined、object2.顺......