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 相关文章推荐
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
纯js+css实现在线时钟
Aug 18 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
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
React实现评论的添加和删除
2020/10/20 Javascript
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
Django中URL的参数传递的实现
2019/08/04 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
大学生个人总结的自我评价
2013/10/05 职场文书
会计电算化个人求职信范文
2014/01/24 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
ant design vue的form表单取值方法
2022/06/01 Vue.js