Example code for implementing random roll caller in html

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

Reasons and optimization solutions for slow MySQL limit paging with large offsets

In MySQL, we usually use limit to complete the pa...

MySQL transaction control flow and ACID characteristics

Table of contents 1. ACID Characteristics Transac...

MySQL database deletes duplicate data and only retains one method instance

1. Problem introduction Assume a scenario where a...

Application of mapState idea in vuex

Table of contents 1. Map method 2. Application ba...

Detailed explanation of single-choice and multiple-choice selection in HTML select tag

The select element creates a single-select or mult...

An experienced person will show you how to develop a professional and standardized MySQL startup script

Every qualified Linux operation and maintenance p...

Detailed explanation of JavaScript stack and copy

Table of contents 1. Definition of stack 2. JS st...

A brief discussion on whether MySQL can have a function similar to Oracle's nvl

Use ifnull instead of isnull isnull is used to de...

A brief talk about calculated properties and property listening in Vue

Table of contents 1. Computed properties Syntax: ...

5 ways to quickly remove the blank space of Inline-Block in HTML

The inline-block property value becomes very usef...

There is no problem with the Linux file path when deploying the window and Linux projects

I haven't written a blog for a long time. Las...

Tutorial on reinstalling MySQL on Windows 64-bit (Zip version, decompressed version MySQL installation)

Uninstall MySQL 1. In the control panel, uninstal...

Vue uses element-ui to implement menu navigation

This article shares the specific code of Vue usin...

Setting up Docker proxy under CentOS 7 (environment variable configuration of Systemd service under Linux)

The Docker daemon uses HTTP_PROXY , HTTPS_PROXY ,...

JavaScript design pattern learning adapter pattern

Table of contents Overview Code Implementation Su...