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:
|
<<: How to add ansible service in alpine image
Recommend
How to modify the length limit of group_concat in Mysql
In MySQL, there is a function called "group_...
Linux installation MySQL tutorial (binary distribution)
This tutorial shares the detailed steps of instal...
Implementation of MYSQL (telephone number, ID card) data desensitization
1. Data desensitization explanation In daily deve...
Detailed steps to enable SourceGuardian (sg11) encryption component on Linux virtual hosts
Note: sg11 Our company only supports self-install...
10 very good CSS skills collection and sharing
Here, clever use of CSS techniques allows you to g...
MySQL study notes on handling duplicate data
MySQL handles duplicate data Some MySQL tables ma...
Detailed explanation of the mysqlslap command and syntax for the built-in stress test in MySQL 5.7
Preface mysqlslap is a diagnostic program designe...
Practical record of optimizing MySQL tables with tens of millions of data
Preface Let me explain here first. Many people on...
Detailed steps to build an NFS file sharing server in Linux
Linux builds NFS server In order to achieve data ...
Nginx uses reverse proxy to implement load balancing process analysis
Introduction Based on docker container and docker...
MySQL data loss troubleshooting case
Table of contents Preface On-site investigation C...
Detailed tutorial on configuring local yum source in CentOS8
The centos8 distribution is released through the ...
Methods for deploying MySQL services in Docker and the pitfalls encountered
I have been learning porters recently. I feel lik...
MySQL master-slave synchronization principle and application
Table of contents 1. Master-slave synchronization...
Things You Don’t Know About the CSS ::before and ::after Pseudo-Elements
CSS has two pseudo-classes that are not commonly ...