您现在的位置是:首页 > 正文

JavaScript---随机点名小案例

2024-04-01 04:51:53阅读 2
<body>
<div>
    <h2>随机点名</h2>
    <div class="box">
        <span>名字是:</span>
        <span class="qs">小1</span>
    </div>
    <div class="btns">
        <button class="start">开始</button>
        <button class="end">结束</button>
    </div>
</div>

<script>
    const arr = ["小1", "小2", "小3", "小4", "小5", "小6"]
    let timerId = 0
    let random = 0   // 需要重新赋值不能用const
    // 开始
    const start = document.querySelector(".start")
    start.addEventListener("click", function () {
        timerId = setInterval(function () {
            random = parseInt(Math.random() * arr.length)
            const qs = document.querySelector(".qs")
            qs.innerHTML = arr[random]
        }, 100)

    })

    // 结束
    const end = document.querySelector(".end")
    end.addEventListener("click", function () {
        clearInterval(timerId)
        arr.splice(random, 1)
        if (arr.length === 0) {
            start.disabled = true
            end.disabled = true
        }
    })

</script>

网站文章

  • HTTP首部(3)

    HTTP首部(3)

    1、响应首部字段  响应首部字段是由服务器端向客户端返回响应报文中所使用的字段,用于补充响应的附加信息、服务器信息以及对客户端的附加要求等。  1.1、Accept-Range    Accept-Range:告知服务器是否能处理范围请求,以指定获取服务器端某个部分的资源,值有两种:bytes和none。  1.2、age    Age:告知客户端,源服务器多久前穿件...

    2024-04-01 04:51:12
  • vue3 图片路径转base64 base64转file(二进制一般后台需要格式) file转base64

    vue3 图片路径转base64 base64转file(二进制一般后台需要格式) file转base64 图片转二进制

    2024-04-01 04:51:04
  • 在Vue.js中,什么是mixins?它们的作用是什么?

    在Vue.js中,什么是mixins?它们的作用是什么?

    在Vue.js中,什么是mixins?它们的作用是什么?

    2024-04-01 04:50:58
  • Node.js的事件循环

    什么是事件循环?让nodejs执行非阻塞I/O操作的就是事件循环–尽管事实上JavaScript是单线程–它无论何时都尽可能把操作丢给系统内核(相当于一个管家把任务都丢给手下)。因为大多数现代内核都是多线程,在这样的背景下内核就能处理多线程操作的执行。当这些操作中的一个完成后,内核会告诉nodejs以便适当的回调函数会被添加到轮询队列然后被执行。接下来我们将解释更多的细节在这篇文章中。事件循...

    2024-04-01 04:50:15
  • 剑指Offer(8)——跳台阶+变态跳台阶

    题目描述一只青蛙一次可以跳上1级台阶,也可以跳上2级。求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果)。/**要到达第n个台阶,第一次跳跃可以跳1个台阶或者两个台阶,如果第一次跳一个台阶,则后面的n-1个台阶有f(n-1)中跳法,如果第一次跳两个台阶,则后面的N-2个台阶有f(n-2)种跳法。则总共的跳法就是f(n)=f(n-1)+ f(n-2):*/pu...

    2024-04-01 04:50:07
  • MyBatis框架搭建快速入门

    MyBatis框架搭建快速入门

    MyBatis是一款优秀的开发,用于简化JDBC开发使开发人员只专注于SQL语句,而无需关注JDBC的API执行细节。

    2024-04-01 04:49:29
  • [NODE之18]Server

    /**http.Server 类 * Created by liyanq on 17/4/1. *//*express中没有对server类进行扩展,这点还比较好~~ * express框架中,app.listen是获得server的主要方法(可能是唯一的~),相当于http.createSever * 继承:server:Server->events.EventEmitter *

    2024-04-01 04:49:22
  • mongodb时间戳转换成格式化时间戳 热门推荐

    db.pay_order.find({&quot;id&quot;:&quot;5332336532&quot;},{&quot;tradeNo&quot;:true,&quot;status&quo...

    2024-04-01 04:49:13
  • Hive中删除表数据的几种方式

    在内部表中 仅删除表中数据,保留表结构 方法一 truncate table 表名;(truncate用于删除所有的行,这个行为在hive元存储删除数据是不可逆的) truncate 不能删除外部表!...

    2024-04-01 04:49:08
  • 操作系统存储管理习题

    1.主存与辅存间频繁的页面置换现象被称为:系统抖动 2.把进程地址空间中使用的逻辑地址变成内存中物理地址的过程称为:重定位 3.在可变分区存储管理中,最佳适应分配算法要求对空闲区表项按尺寸从小到大进行...

    2024-04-01 04:48:27