快捷導(dǎo)航

JavaScript實現(xiàn)隨機(jī)點名小程序

更新時間：2020年10月29日 12:04:13 作者：xm_hello

這篇文章主要介紹了JavaScript實現(xiàn)隨機(jī)點名小程序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)隨機(jī)點名小程序的具體代碼，供大家參考，具體內(nèi)容如下

導(dǎo)入jar包
將jquery-3.3.1.min.js包導(dǎo)入到web目錄下的js包

代碼實現(xiàn)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>點名器</title>
 <style>
  body{
   background-color: gray;
  }
  .box{
   width: 1000px;
   height: 280px;
   margin: 0 auto;
   margin-top: 100px;
   clear: both;
  }
  #btn,#btn2,#btn3,#btnStop{
   width: 150px;
   height: 50px;

   margin-top: 50px;
   font-size: 18px;
  }
  .name{
   width: 100px;
   height: 30px;
   float: left;
   background-color: antiquewhite;
   margin-left: 10px;
   margin-top: 10px;
   text-align: center;
   line-height: 30px;
  }
  #span{
   float: right;
   position: relative;
   top: 55px;
   right: 185px;
  }
  h1{
   text-align: center;
  }
  .high{
   background-color: #FFDEAD;
   font-weight:500;
  }
 </style>
</head>
<body>
<h1>隨機(jī)點名系統(tǒng)</h1>
<span id="span"></span>
<div class="box" id="box"></div>
<div style="text-align: center">
 <input type="button" id="btn" value="點名"/>
 <input type="button" id="btnStop" value="停止"/>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
 var arr = [ "張恒",
  "李偉",
  "文子昂",
  "李彥松",
  "廖彬",
  "金鑫",
  "夏華伶",
  "鄧洪",
  "陳紫橋",
  "羅繼財",
  "陳治豪",
  "李坤耀",
  "母天鑫",
  "馮思皓",
  "谷康杰",
  "李輝",
  "李先進(jìn)",
  "米俊杰",
  "彭小平",
  "唐旭",
  "萬云松",
  "向星宇",
  "張全鑫",
  "鄔建科",
  "徐江濤",
  "李連輝",
  "肖云龍",
  "徐浪",
  "馬俊杰",
  "歐陽平",
  "周雨凡"];
 //生成數(shù)組中的名單div并添加到box中
 let boxNode = document.getElementById("box");

 boxNode.innerHTML = "";
 //循環(huán)遍歷數(shù)組
 for(let i = 0;i< arr.length;i++){
  //創(chuàng)建div元素
  let divNode = document.createElement("div");
  //設(shè)置div內(nèi)容
  divNode.innerHTML = arr[i];
  //設(shè)置div樣式
  divNode.className = "name";
  //添加到box元素中
  boxNode.appendChild(divNode);
 }
 let time = null
 //點擊開始點名,開啟一個循環(huán)定時器,綁定鼠標(biāo)單擊事件
 $("#btn").click(function () {
   time = setInterval(function () {
   //隨機(jī)被選中的div設(shè)置背景顏色為紅色
    let index = Math.floor(Math.random()*arr.length);
    //清除之前的顏色
    $("#box div").css("background-color","");
    //找到生成的名單div
    let mySelector = "#box div:eq("+ index+")";
    $(mySelector).css("background-color","red");
  },50);
 });
 //點擊停止按鈕清除定時器
 $("#btnStop").click(function () {
  clearInterval(time);
 })
</script>
</html>

小結(jié)

1.div元素使用循環(huán)動態(tài)生成,循環(huán)長度是名單數(shù)組的長度
2.div生成后要添加box到父元素中
3.Math.random()隨機(jī)數(shù)為0-10以內(nèi)的小數(shù).隨機(jī)范圍為數(shù)組的長度
4.在生成名單顏色時需要清除之前的顏色

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: