不完美的女孩 2023-02-28 03:40 采纳率: 100%
浏览 87
已结题

HTML随机点名系统怎么做，找不到问题



<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge"
        <meta name="viewport"content="width=device-width,initial-sca">
            <title>Document</title>
        <style>
        #names li {
        width: 100px;
        height: 100px; 
        text-align: center;
        line-height: 100px;
        margin-bottom: 10px;
        margin-left: 10px;
        background-color: aliceblue;
        list-style: none;
        padding: 0;
        float: left;
         }   
         #names {
            padding: 0;
            width: 500px;
         }
        </style>

    </head>
    <body> 
        <input id="btn" type ="button" value="随机点名">
        <ul id="names">
        <li>王虹</li>
        <li>李瑶嘉</li>
        <li>李宇鑫</li>
        <li>罗秀娟</li>
        <li>孙爱学</li>
        <li>罗秀文</li>
        <li>罗文阳</li>
        <li>于婉妮</li>
        <li>薛忠琴</li>
        <li>周倩</li>
        </ul>
        <script>
            let btn = document.querySelector('#btn')
            //定义一个变量记录上一次高亮的元素（定义变量不能放在上边的function里）
            //初始值默认没有高亮
            //布尔类型，记录定时器是否正在工作，默认false,没工作
            let previous =null
            let timerId = null
             btn.onclick =function () {
                if (isRunning){
                isRunning = false
                btn.value='随机点名'
                //停止定时器
                clearInterval(timerId)
                //读出高亮的Li的内容'
                let speech = new SpeechSynthesisUtterance(previousnode.textContent)
                speechSynthesis.speak(speech)
                // const text = node.textContent;)
              } else {
                isRunning =true
                //定时器没有工作，创建一个定时器，开始
                btn.value ='停止'
              let timerId = setInterval(function(){
               //把上一次高亮元素，重置背景颜色（默认背景颜色）
               //首次点的时候不需要重置，需判断
               if (previous != null) {
               previous.style.backgroundColor ='aliceblue'
                }
               //获取name的所有li
               let nameLis = document.querySelector('#names li')
               //生成随机数[0,li的个数]，生成随机索引
                let randomIndex = parseInt(Math.random() * nameLis.length)

               //记录当前高亮元素，记录到previous变量
                previous =nameLis[randomIndex]
               //根据索引获取对应的Li，设置背景颜色
               nameLis[randomIndex].style.backgroundColor = 'red'
               },80)       
            }   
          }   
        </script>
    </body>        
 </html>
  • 写回答

6条回答 默认 最新

  • 文盲老顾 WEB应用领新星创作者 2023-02-28 09:10
    关注

    img

    第一个问题

    img

    你在 onclick 时使用了 isRunning 变量，外边却没有定义

    第二个问题

    你在定义 nameLis 时使用的是 querySelector，这只返回第一个元素，你应该是使用 querySelectorAll，这样才是队列，你下边的索引才有意义

    第三个问题

    你在 onclick 里重新用 let 定义了 timerId，造成变量的使用域改变，记录的 timerId 无法传递到 isRunning 分支中，应该将 let 删除，外边已经有定义

    第四个问题

    你在 isRunning 分支中，使用了 preeviousnode，该变量未定义，应使用 previous
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(5条)

报告相同问题？

  • HTML随机点名系统怎么做，找不到问题 html javascript 前端
    2023-02-28 03:40
    回答 6 已采纳 第一个问题 你在 onclick 时使用了 isRunning 变量，外边却没有定义 第二个问题 你在定义 nameLis 时使用的是 querySelector，这只返回第一个元素，你应该是使用
  • Java做随机点名系统 java
    2023-03-08 15:30
    回答 5 已采纳 小魔女参考了bing和GPT部分内容调写:要实现这个需求，首先需要准备一个存储名字的数据结构，比如数组。然后在点击开始按钮时，设置一个定时器，每隔一段时间，从数组中取出一个名字，显示到界面上，然后继续
  • C语言解决之随机点名 c语言 有问必答
    2021-06-26 00:34
    回答 3 已采纳 定义一个学生结构，包括学号，姓名和是否班干部，然后形成一个数组。用随机数产生一个序号，然后在学生中找到第n个同学即可 #include <stdio.h> #include <s
  • flash做的随机点名系统
    2017-04-20 11:42
    《使用Flash制作随机点名系统详解》 在教育和培训领域，点名是常见的管理活动，而使用技术手段实现这一过程可以大大提高效率。本篇文章将详细介绍如何利用Flash软件开发一个随机点名系统，并探讨其中涉及的技术要点...
  • 线上上课，随机点名。 python
    2022-05-29 08:55
    回答 2 已采纳 import random n = int(input("n:")) lst = [] for i in range(n): m = random.randint(1,n) whil
  • 用Java创建，实现随机点名等 java
    2022-03-11 15:37
    回答 1 已采纳 这样吗
  • 如何用web编写一个随机点名页面， javascript
    2022-04-21 11:36
    回答 1 已采纳 https://www.sohu.com/a/473840198_107229找到一个PPT加word的随机点名
  • 使用javascript做的一个随机点名程序
    2020-10-26 07:02
    在这个使用JavaScript实现的随机点名程序中，主要涉及到的知识点包括JavaScript基础语法、DOM操作、事件处理以及定时器的使用。下面将详细解释这些知识点： 1. JavaScript基础语法：这是编写JavaScript程序的基础。...
  • 随机点名表的制作求解 javascript
    2021-12-03 20:27
    回答 1 已采纳 设置个定时器，过段时间再把颜色变回去
  • java实训题随机点名程序 java
    2021-06-02 09:55
    回答 3 已采纳 import java.util.*; public class Random_call { public static String[] name_scan(int num){ int
  • Java实现随机点名 java
    2022-11-23 00:35
    回答 1 已采纳
  • 随机点名系统Delphi编写
    2013-06-26 16:09
    本文将深入探讨如何使用Delphi编程语言开发一个随机点名系统。 Delphi是Embarcadero Technologies开发的一种集成开发环境（IDE），基于Object Pascal编程语言，以其高效、快速的编译能力和强大的Windows应用程序...
  • C#做的随机点名系统
    2010-06-14 12:15
    总的来说，这个C#随机点名系统展示了C#语言在开发桌面应用方面的灵活性和实用性。它利用了Windows Forms库构建用户界面，通过Random类实现随机选择功能，是学习C#和Windows Forms编程的一个良好示例。对于想要提升...
  • 随机点名系统（VB做的可以增加概率）
    2010-06-29 13:41
    这里我们讨论的是一款使用Visual Basic (VB) 编程语言开发的随机点名系统，该系统不仅具备基本的点名功能，还引入了概率调整机制，根据学生答题的正确与否动态调整被点中的概率。 首先，我们要理解Visual Basic (VB...
  • 我写了个随机点名系统，非常好用~ 我给它取名叫做——随机点名系统
    2022-08-15 09:07
    是江迪呀的博客 我做了一个点名系统，非常好用！我给他取名叫做点名系统！
  • 自动点名c语言,编撰一个随机点名系统
    2021-05-19 15:39
    weixin_39628247的博客 编写一个随机点名系统1、编写一个随机点名系统，运行该系统后，按空格键可以显示出一名同学，以前被选中的同学，将不会再次被选中2、采用C语言数据结构数组指针随机数文件读写的方式不必使用服务器的情况不适用...
  • 用python做一个随机点名程序（不重复点名）
    2021-10-17 11:21
    A1gorithms的博客 用python做一个简单的随机点名程序(不重复点名) 废话不多说,上代码! import random #导入随机模块 import pyttsx3 #导入第三方语音模块 listen = pyttsx3.init() #初始化 txt_path = input('请输入txt文件的path:')...
  • Java实战：随机点名程序
    2022-04-16 14:29
    howard2005的博客 本实战项目通过Java Swing库构建了一个功能完备的随机点名程序，实现了从指定文件夹加载班级名单数据并进行随机点名的核心功能。项目设计充分运用了Swing组件如JFrame、JPanel、JLabel、JButton和JList等，并结合...
  • python|用列表做一个随机点名小程序
    2022-11-09 20:23
    一名12岁的学生党的博客 上课时，老师会叫人回答问题，一些小伙伴非常害怕自己被点到，于是，会找一些博主发的点名小程序代码，想着发给老师,让老师用，再把要点名的花名册做一下手脚 ,把自己名字删了，嘻嘻嘻
  • 没有解决我的问题, 去提问

问题事件

  • 已结题 （查看结题原因） 3月1日
  • 已采纳回答 2月28日
  • 创建了问题 2月28日

悬赏问题

  • ¥15 问题重发，R语言：代码运行过程中出现如下警告，请求如何解决！
  • ¥15 神经网络模型一直不能上GPU
  • ¥15 苍穹外卖拦截器token为null
  • ¥15 pyqt怎么把滑块和输入框相互绑定，求解决！
  • ¥20 wpf datagrid单元闪烁效果失灵
  • ¥15 券商软件上市公司信息获取问题
  • ¥100 ensp启动设备蓝屏，代码clock_watchdog_timeout
  • ¥15 Android studio AVD启动不了
  • ¥15 陆空双模式无人机怎么做
  • ¥15 想咨询点问题，与算法转换，负荷预测，数字孪生有关