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)