Example code for implementing random roll caller in html
|
After this roll call device starts calling the roll, you need to click the stop button to complete the call, because it is a simplified version and does not take into account the need for automatic stopping. The name data is stored in the form of a string, which is suitable for a small range of roll calls. If there is a large demand, you can make appropriate improvements yourself.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random roll call generation</title>
<style>
/* Page css style */
.wrapper {
width: 800px;
margin: 100px auto;
border: 1px solid #ddd;
text-align: center;
}
.box li {
vertical-align: top;
display: inline-block;
width: 100px;
height: 50px;
border: 2px solid #ddd;
border-radius: 15px;
text-align: center;
line-height: 50px;
margin: 5px;
}
.wrapper button {
border: none;
width: 100px;
height: 50px;
border-radius: 10px;
cursor: pointer;
outline: none;
margin-top: 20px;
font-weight: bold;
color: #333;
background-color: rgb(14, 146, 43);
}
.wrapper button {
display: inline-block;
}
body {
background-color: #eee;
}
</style>
</head>
<body>
<div class="wrapper">
<h1 align="center">Random roll call system</h2>
//Real-time display of system time tag<h6 id="data" align="right"></h6>
<ul class="box"></ul>
<button class="start">Start</button>
<button class="stop">Stop</button>
</div>
</body>
<script>
//Define global variables for easy reference var boxUl = document.getElementsByClassName('box')[0];
var start = document.getElementsByClassName('start')[0];
var stop = document.getElementsByClassName('stop')[0]
var oLi = document.getElementsByTagName('li');
//Data preparation var nameString = new String("Zhang San, Li Si, Wang Wu, Zhao Liu, Zhou Qi, Tian Ba, Guo Jiu, return to zero, Zhang 3, Li 4, Wang 5, Zhao 6, Zhou 7, Tian 8, Guo 9, return to 0");
var nameArr = nameString.split(",");
//Get each student's name and add it to the label, automatically parse the HTML tag var str = "";
for (let i = 0; i < nameArr.length; i++) {
str += "<li >" + nameArr[i] + "</li>"
}
boxUl.innerHTML = str;
//Add the click event of the start button var timer = null;
start.onclick = function () {
// Set the timer timer = setInterval(function () {
// Generate random numbers based on the length range of the array var i = Math.floor(Math.random() * nameArr.length);
// First clear all style attributes through the for loop for (var j = 0; j < oLi.length; j++) {
oLi[j].removeAttribute("style");
}
// Color attribute for randomly selected li oLi[i].style.background = "red";
}, 150);
};
// Click to stop stop.onclick = function () {
// Clear the timer and stop calling clearInterval(timer);
}
//Page initialization time setting window.onload = function () {
datatime();
}
//Dynamic refresh of page time setInterval(datatime, 1000);
function datatime() {
let data = new Date();
let dataString = "Now it is Beijing time: " + data.toLocaleString();
document.getElementById("data").innerHTML = dataString;
}
</script>Attached is a rendering
This is the end of this article about the sample code of HTML to implement random roll call device. For more relevant HTML random roll call device content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! |
>>: Split and merge tables in HTML (colspan, rowspan)
Recommend
MySQL Optimization Summary - Total Number of Query Entries
1. COUNT(*) and COUNT(COL) COUNT(*) usually perfo...
Detailed explanation of the role and working principle of MySQL master-slave replication
1. What is master-slave replication? Master-slave...
Bootstrap 3.0 study notes for beginners
As the first article of this study note, we will ...
Nginx handles http request implementation process analysis
Nginx first decides which server{} block in the c...
CSS3 property line-clamp controls the use of text lines
Description: Limit the number of lines of text di...
HTML fixed title column, title header table specific implementation code
Copy code The code is as follows: <!DOCTYPE ht...
Use the vue-element-admin framework to dynamically obtain the menu function from the backend
Table of contents 2. Detailed explanation 2.1. Ad...
How to implement responsive layout with CSS
Implementing responsive layout with CSS Responsiv...
How to query the latest transaction ID in MySQL
Written in front: Sometimes you may need to view ...
More popular and creative dark background web design examples
Dark background style page design is very popular...
How to change the host name in Linux
1. View the current host name [root@fangjian ~]# ...
How to start a transaction in MySQL
Preface This article mainly introduces how to sta...
Detailed explanation of the application of CSS Sprite
CSS Sprite, also known as CSS Sprite, is an image...
How to use docker to deploy Django technology stack project
With the popularity and maturity of Docker, it ha...
Summary of synchronization and mutual exclusion knowledge points between Linux threads
When threads execute concurrently, we need to ens...