Implementing a random roll caller based on JavaScript

This article shares the specific code of JavaScript to implement random roll caller for your reference. The specific content is as follows

HTML code:

<body>
 <h1>Roll Call</h1>
 <div id="did">
  <input id="rollcall-id" type="button" value="Random roll call"><br>
  <input id="action-id" type="submit" onclick="doClick()" value="Start">
 </div>
</body>

CSS code:

<style>
 * {
  margin: 0px;
  padding: 0px;
 }

 body {
  background-color: rgb(255, 249, 249);
 }

 h1 {
  text-align: center;
  padding-top: 100px;
  color: rgba(250, 54, 129, 0.562);
 }

 #did {
  position: relative;
  width: 200px;
  margin: 60px auto;
 }

 #did input:first-child {
  width: 200px;
  height: 60px;
  background-color: rgba(250, 54, 129, 0.562);
  /* No border or set the border to transparent*/
  border: none;
  border-radius: 20px;
  font-size: 25px;
  color: #fff;
  box-shadow: 0px 0px 3px 3px rgba(250, 54, 129, 0.158);
  /* Border disappears when clicked*/
  outline: 0;
 }

 #did input:nth-last-child(1) {
  width: 100px;
  height: 40px;
  margin: 40px 50px;
  background-color: rgba(250, 54, 129, 0.562);
  border: 1px solid transparent;
  background-color: rgba(255, 68, 177, 0.432);
  border-radius: 15px;
  box-shadow: 0px 0px 2px 2px rgba(250, 54, 129, 0.158);
  font-size: 17px;
  color: #333;
  outline: 0;
  transition: color 0.2s ease-out;
  transition: box-shadow 0.2s ease-out;
 }

 #did input:nth-last-child(1):hover {
  color: #fff;
  cursor: pointer;
  box-shadow: 0px 0px 4px 4px rgba(250, 54, 129, 0.158);
 }
</style>

JavaScript code:

<script>
 var rollcall = document.getElementById("rollcall-id");
 var action = document.getElementById("action-id");
 var h1 = document.getElementsByTagName("h1");

 //Cannot use name, using name will only get one character var allName = ["Zhang Liufei", "Gao Yingying", "Zhao Wenyan", "Li Ying", "Deng Chenxi", "Mo Ruolin", "Qin Cheng",
  "Wu Xiaoyu", "Zhao Xi", "Ma Suying", "Lü Qinya", "Luo Hongzhe", "Xia Suyun", "Xie Yanzhi",
  "Cao Mengmeng", "Li Yunshu", "Zhou Fengqiao", "Sun Hao", "Jiang Yanjing", "Yang Zhenkai", "Lin Shuyan",
  "Qian Miaomiao", "Guo Jing", "Du Beibei", "Tong Minran", "Zhong Xiaoling", "Han Yunyun", "Bai Ranzhi"];

 //Generate a random name function stringRandom() {
  return parseInt(Math.random() * allName.length);
 }

 var time = null;
 var luckName;
 //Start function doStart() {
  if (time == null) {
   time = setInterval(function () {
    //Get the value of the random name luckName = allName[stringRandom()];
    rollcall.setAttribute("value", luckName);
   }, 100);
  }
 }

 //Stop function doStop() {
  if (time != null) {
   clearInterval(time);
   time = null;
  }
 }

 //Click event function doClick() {
  if (action.value == "start") {
   //Change style action.style.backgroundColor = "#cecece";
   action.style.boxShadow = "0px 0px 2px 2px rgba(100, 100, 100, 0.4)";
   action.value = "Stop";
   h1[0].innerHTML = "Roll roll";

   //Start random roll call doStart();
  } else if (action.value == "Stop") {
   action.style.backgroundColor = "rgba(255, 68, 177, 0.432)";
   action.style.boxShadow = "0px 0px 2px 2px rgba(250, 54, 129, 0.158)";
   action.value = "Start";
   h1[0].innerHTML = "Congratulations" + luckName + "The classmate got a chance to speak";

   //Stop doStop();
  }
 }
</script>

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:

js implements a simple random color example code for the roll caller
js implements a simple random roll caller
js implements a simplified version of the random roll caller
JS implements random roll caller
JavaScript implementation of random roll caller
JavaScript implements a simple random roll caller
Detailed explanation of the example of random roll caller implemented in JavaScript
A random roll call function implemented by javascript
A random roll call program using javascript
js implements random roll call system (example explanation)

<<: Key features of InnoDB - insert cache, write twice, adaptive hash index details

>>: How to install and configure the Apache Web server