JS implements random roll call system

JS implements random roll call system

Use JS to implement a random roll call system for your reference. The specific content is as follows

Ten minutes before every class, the teacher would ask us to answer questions, but every time he would call out the student numbers, and it seemed like I would win every time. So I directly suggested to the teacher, "Teacher, let me use JS to help you write a random roll call system!" This way I won't be picked every time, haha

First look at the effect:

The code is as follows:

<!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-scale=1.0">
 <title>Document</title>
</head>

<body>
 <button id="box1">Start</button>
 <button id="box2">End</button>
 <span id="box">Tom</span>

 <script>
  //Get the element in the page var btn1 = document.getElementById('box1');
  var btn2 = document.getElementById('box2');
  var span = document.getElementById('box');
  var names = ['Tom', 'Jack', 'Lucy', 'Peter', 'Mark', 'Min', 'Liu', 'Rani'];
  var timer;

  btn1.onclick = function() {
   window.clearInterval(timer);

   timer = window.setInterval(countName, 100);
  };

  btn2.onclick = function() {
   window.clearInterval(timer);
  };

  function countName() {
   var index = parseInt(Math.random() * names.length);
   span.innerHTML = names[index];
  }
 </script>
</body>

</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • js implements random roll call system in classroom
  • js+html to realize the roll call system function
  • js implements random roll call system (example explanation)

<<:  How to add ansible service in alpine image

>>:  About the basic configuration tutorial of MySQL5.7.17 free installation version under Win10 (with pictures and text)

Recommend

Detailed explanation of how to install MariaDB 10.2.4 on CentOS7

CentOS 6 and earlier versions provide MySQL serve...

vue-pdf realizes online file preview

This article example shares the specific code of ...

MYSQL development performance research: optimization method for batch inserting data

1. What problems did we encounter? In standard SQ...

Solution to the problem of null column in NOT IN filling pit in MySQL

Some time ago, when I was working on a small func...

Summary of 76 Experience Points of User Experience

Classification of website experience 1. Sensory e...

What are Web Slices?

IE8 new feature Web Slices (Web Slices) Microsoft...

CentOS 6.6 source code compilation and installation of MySQL 5.7.18 tutorial detailed explanation

1. Add users and groups 1. Add mysql user group #...

CentOS 7.2 builds nginx web server to deploy uniapp project

Panther started as a rookie, and I am still a roo...

CSS example code for implementing sliding doors

The so-called sliding door technology means that ...

MySQL scheduled full database backup

Table of contents 1. MySQL data backup 1.1, mysql...

Simple tutorial on using Navicat For MySQL

recommend: Navicat for MySQL 15 Registration and ...

Detailed explanation of JavaScript's garbage collection mechanism

Table of contents Why do we need garbage collecti...

Complete example of Vue encapsulating the global toast component

Table of contents Preface 1. With vue-cli 1. Defi...

HTML table tag tutorial (20): row background color attribute BGCOLOR

The BGCOLOR attribute can be used to set the back...

Detailed explanation of MySql slow query analysis and opening slow query log

I have also been researching MySQL performance op...