JavaScript to implement random roll call web page

JavaScript writes a random roll call webpage for your reference. The specific content is as follows

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
   * {
    margin: 0;
    padding: 0;
   }
   #box {
    border: 1px solid black;/*Set the border and color of the box*/
    width: 500px;
    height: 500px;
    margin: 100px auto;/*200px from the top and centered*/
    background-color: #000000;/*background color of the box*/
    position: relative;/*positioning*/
   }
   p{
    width: 500px;
    height: 200px;
    text-align: center;/*Center the text*/
    line-height: 200px;/*Set line height*/
    font-size: 80px;/*font size*/
    color: #ffff00;
   }
   #anniu {
    width: 200px;
    height: 50px;
    background-color:#00aaff;
    position: absolute;
    bottom: 100px;/*100px from the bottom*/
    left: 50%;
    margin-left: -100px;
    color: #ffffff;
    font-size: 20px
   }
  </style>
 </head>
 <body>
  <div id="box">
   <p id="wenben">Random roll call</p>
   <input type="button" value="Start roll call" id="anniu">
  </div>
 </body>
 <script>
  var wenben = document.getElementById("wenben")
  var anniu = document.getElementById("anniu")
  var timer //define timer var arr = ['Liu Yi', 'Chen Er', 'Zhang San', 'Li Si', 'Wang Wu', 'Zhao Liu', 'Sun Qi', 'Zhou Ba', 'Wu Jiu', 'Zheng Shi']
  var test = true
  anniu.onclick = function() {
   if (test) {
    start()
    anniu.innerHTML = "end"
    test = false
   } else {
    stop()
    anniu.innerHTML = "Start"
    test = true
   }
  }
  function start() { /*Start*/
   timer = setInterval(function random() {
    var index = parseInt(Math.random() * arr.length)
    wenben.innerHTML = arr[index]
   }, 50);
  }
  function stop() { /*End*/
   clearInterval(timer)
  }
 </script>
</html>

The effect is as follows:

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:

A random roll call function implemented by javascript
A random roll call program using javascript
JS implements random and sequential roll call in class
js implements random roll call system (example explanation)
JS+CSS to achieve random roll call (example code)
js implements random roll call function
JS implements random roll caller
Specific analysis of the needs of implementing random roll call in class with JavaScript
JavaScript implementation of random roll caller
Detailed explanation of the example of random roll caller implemented in JavaScript

<<: Detailed explanation of fuser command usage in Linux

>>: Detailed explanation of the idea of querying the difference between hourly data and last hourly data in MySQL