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
Detailed explanation of how to install MySQL on Alibaba Cloud
As a lightweight open source database, MySQL is w...
Detailed explanation of multi-version concurrency control of large objects in MySQL
MySQL 8.0: MVCC for Large Objects in InnoDB In th...
Web form creation skills
In fact, the three tables above all have three ro...
MySQL series tutorials for beginners
Table of contents 1. Basic concepts and basic com...
Vue Element UI custom description list component
This article example shares the specific code of ...
Function overloading in TypeScript
Table of contents 1. Function signature 2. Functi...
Solution to Element-ui upload file upload restriction
question Adding the type of uploaded file in acce...
Test and solution for MySQL's large memory usage and high CPU usage
After the changes: innodb_buffer_pool_size=576M -...
Linux virtual memory settings tutorial and practice
What is Virtual Memory? First, I will directly qu...
Using vsftp to build an FTP server under Linux (with parameter description)
introduce This chapter mainly introduces the proc...
Briefly describe the four transaction isolation levels of MySql
Isolation Level: Isolation is more complicated th...
Looking at Tomcat's thread model from the connector component - BIO mode (recommended)
In higher versions of Tomcat, the default mode is...
What to do if you forget your password in MySQL 5.7.17
1. Add skip-grant-tables to the my.ini file and r...
Linux operation and maintenance basic swap partition and lvm management tutorial
Table of contents 1. Swap partition SWAP 1.1 Crea...
Detailed explanation of 7 SSH command usages in Linux that you don’t know
A system administrator may manage multiple server...