JavaScript实现随机点名小程序

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

这篇文章主要介绍了JavaScript实现随机点名小程序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript实现随机点名小程序的具体代码，供大家参考，具体内容如下

导入jar包
将jquery-3.3.1.min.js包导入到web目录下的js包

代码实现

<!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>随机点名系统</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 = [ "张恒",
  "李伟",
  "文子昂",
  "李彦松",
  "廖彬",
  "金鑫",
  "夏华伶",
  "邓洪",
  "陈紫桥",
  "罗继财",
  "陈治豪",
  "李坤耀",
  "母天鑫",
  "冯思皓",
  "谷康杰",
  "李辉",
  "李先进",
  "米俊杰",
  "彭小平",
  "唐旭",
  "万云松",
  "向星宇",
  "张全鑫",
  "邬建科",
  "徐江涛",
  "李连辉",
  "肖云龙",
  "徐浪",
  "马俊杰",
  "欧阳平",
  "周雨凡"];
 //生成数组中的名单div并添加到box中
 let boxNode = document.getElementById("box");

 boxNode.innerHTML = "";
 //循环遍历数组
 for(let i = 0;i< arr.length;i++){
  //创建div元素
  let divNode = document.createElement("div");
  //设置div内容
  divNode.innerHTML = arr[i];
  //设置div样式
  divNode.className = "name";
  //添加到box元素中
  boxNode.appendChild(divNode);
 }
 let time = null
 //点击开始点名,开启一个循环定时器,绑定鼠标单击事件
 $("#btn").click(function () {
   time = setInterval(function () {
   //随机被选中的div设置背景颜色为红色
    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>

小结

1.div元素使用循环动态生成,循环长度是名单数组的长度
2.div生成后要添加box到父元素中
3.Math.random()随机数为0-10以内的小数.随机范围为数组的长度
4.在生成名单颜色时需要清除之前的颜色

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Javascript中的数组常用方法解析
这篇文章主要介绍了Javascript中的数组常用方法解析的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
动态的9*9乘法表效果的实现代码
下面小编就为大家带来一篇动态的9*9乘法表效果的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
2016-05-05
30个高逼格代码的JavaScript高级单行代码
这篇文章中列出了一个系列的 30 个 JavaScript 单行代码,它们在使用 vanilla js（≥ ES6）进行开发时非常有用,它们也是使用该语言在最新版本中为我们提供的所有功能来解决问题的优雅方式,将它们分为以下5大类：日期、字符串、数字、数组、工具
2023-08-08
通过实例解析javascript Date对象属性及方法
这篇文章主要介绍了通过实例解析javascript Date对象属性及方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-11-11
Javascript实现表单检验
这篇文章主要介绍了Javascript实现表单检验，以注册界面为例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
给Function做的OOP扩展
自编框架Megami的一部分……现在发现自己实在太宅了…… 文件中出现的名字请对号入座……
2009-05-05
微信小程序动态增加按钮组件
这篇文章主要为大家详细介绍了微信小程序动态增加按钮组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-09-09
ArtEditor富文本编辑器增加表单提交功能
artEditor是一款基于jQuery的移动端富文本编辑器，支持插入图片，后续完善其他功能。接下来通过本文给大家介绍ArtEditor富文本编辑器增加表单提交功能，对arteditor编辑器相关知识感兴趣的朋友一起学习吧
2016-04-04
用Javascript 获取页面元素的位置的代码
制作网页的过程中，你有时候需要知道某个元素在网页上的确切位置。
2009-09-09
TypeScript中interface和type的区别详解
本文主要介绍了TypeScript中interface和type的区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07