JavaScript实现随机点名小程序


Posted in Javascript onOctober 29, 2020

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

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

JavaScript实现随机点名小程序

代码实现

<!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 相关文章推荐
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
Javascript 跨域访问解决方案
Feb 14 Javascript
js no-repeat写法 背景不重复
Mar 18 Javascript
拉动滚动条加载数据的jquery代码
May 03 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
详解Vue串联过滤器的使用场景
Apr 30 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 #Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 #Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 #Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 #Javascript
微信小程序实现可长按移动控件
Nov 01 #Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 #Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 #Javascript
You might like
PHP树的代码,可以嵌套任意层
2006/10/09 PHP
建立动态的WML站点(一)
2006/10/09 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
python实现图片转字符小工具
2019/04/30 Python
Python通过Pillow实现图片对比
2020/04/29 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
UNIX文件系统分类
2014/11/11 面试题
《凡卡》教学反思
2014/04/09 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
污水处理保证书
2015/05/09 职场文书