使用JS来实现随机点名的效果

最新推荐文章于 2023-11-16 23:59:17 发布

几何小超

最新推荐文章于 2023-11-16 23:59:17 发布

阅读量1.9k

点赞数 20

文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/weixin_64965154/article/details/130856389

版权

今天我们来做一个比较简单的JS点名效果，先把HTML和css给准备好，然后我们开始写JS结构

HTML

<h2>随机点名</h2>

<div class="box">

<span>名字是：</span>

<div class="qs">这里显示姓名</div>

</div>

<div class="btns">

<button class="start">开始</button>

<button class="end">结束</button>

</div>

CSS

* {

margin: 0;

padding: 0;

}

h2 {

text-align: center;

}

.box {

width: 600px;

margin: 50px auto;

display: flex;

font-size: 25px;

line-height: 40px;

}

.qs {

width: 450px;

height: 40px;

color: red;

}

.btns {

text-align: center;

}

.btns button {

width: 120px;

height: 35px;

margin: 0 50px;

}

JS结构首先分析点名事件三个事情，第一个是事件源，第二个点击事件的程序

第三个就是事件的结果

首先我们需要定义一个数组

比如我这里定义五个数组

const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']

然后第一步我们开始模块按钮

首先我们需要获取两个按钮，一个开始，一个结束

const qs=document.querySelector('.qs')

const start=document.querySelector('.start')

然后我们获取开始按钮对象

addEventListene是监听事件的按钮，然后后面的click是事件，就是点击这个按钮就会执行下面的随机数的方法

这里我们在这里写一个timeid是指这个事件的按钮，所以我们要在首页去定义二个变量

let random=0

let timerId=0

start.addEventListener('click',function(){

timerId=setInterval(function(){

random=parseInt(Math.random()*arr.length)

qs.innerHTML=arr[random]

}, 35)

第二步就是关闭按钮，我们筛选完之后需要关闭然后删除抽取的元素

const end=document.querySelector('.end')

end.addEventListener('click',function(){

clearInterval(timerId)

//结束了，删掉当前抽取的元素

arr.splice(random,1)

console.log(arr)

arr.splice(random,1)：意思就是这个事件结束了删掉这个随机数的一个元素

clearInterva：关闭定时器的意思，因为我们做一个点名事件是需要通过定时器来完成，这里的意思是停止的意思

最后我们在加一个步骤

if(arr.length===1){

start.disabled=end.disabled=true

}

这里的意思是这个素组如果只剩下一个元素，那么就会禁用开始和停止这两个按钮，如果换是flase就可以继续使用

接下来是源码

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        h2 {
            text-align: center;
        }
 
        .box {
            width: 600px;
            margin: 50px auto;
            display: flex;
            font-size: 25px;
            line-height: 40px;
        }
 
        .qs {
 
            width: 450px;
            height: 40px;
            color: red;
 
        }
 
        .btns {
            text-align: center;
        }
 
        .btns button {
            width: 120px;
            height: 35px;
            margin: 0 50px;
        }
    </style>
</head>
 
<body>
    <h2>随机点名</h2>
    <div class="box">
        <span>名字是：</span>
        <div class="qs">这里显示姓名</div>
    </div>
    <div class="btns">
        <button class="start">开始</button>
        <button class="end">结束</button>
    </div>
 
    <script>
        // 数据数组
        let random=0
        let timerId=0
        const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
        //业务1开始模块按钮
        const qs=document.querySelector('.qs')
        const start=document.querySelector('.start')
        //1.1获取开始按钮对象
        start.addEventListener('click',function(){
            //1.获取随机数
           timerId=setInterval(function(){
             random=parseInt(Math.random()*arr.length)
            qs.innerHTML=arr[random]
           }, 35)
           if(arr.length===1){
            start.disabled=end.disabled=true
           }
        })
        //2.关闭按钮
        const end=document.querySelector('.end')
        end.addEventListener('click',function(){
            clearInterval(timerId)
            //结束了，删掉当前抽取的元素
            arr.splice(random,1)
            console.log(arr)
        })
    </script>
</body>
 
</html>

几何小超

关注

20
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
17
评论
使用JS来实现随机点名的效果

addEventListene是监听事件的按钮，然后后面的click是事件，就是点击这个按钮就会执行下面的随机数的方法。clearInterva：关闭定时器的意思，因为我们做一个点名事件是需要通过定时器来完成，这里的意思是停止的意思。这里的意思是这个素组如果只剩下一个元素，那么就会禁用开始和停止这两个按钮，如果换是flase就可以继续使用。const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']这里我们在这里写一个timeid是指这个事件的按钮，所以我们要在首页去定义二个变量。
复制链接

扫一扫