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的eval()中使用函数的进一步讨论
Jul 26 Javascript
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
JQuery 弹出框定位实现方法
Dec 02 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
JS通用方法触发点击事件代码实例
Feb 17 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
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
在Python中关于中文编码问题的处理建议
2015/04/08 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
基于Python List的赋值方法
2018/06/23 Python
Python和Go语言的区别总结
2019/02/20 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
车间组长岗位职责
2013/12/20 职场文书
初三英语教学计划
2015/01/23 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
社区节水倡议书
2015/04/29 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android