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 相关文章推荐
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 Javascript
JavaScript实现前端倒计时效果
Feb 09 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
在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+mysql写的留言本
2006/10/09 PHP
如何在PHP程序中防止盗链
2008/04/09 PHP
PHP DataGrid 实现代码
2009/08/12 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
PHP反射机制用法实例
2014/08/28 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
JS解析XML实例分析
2015/01/30 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
jQuery事件详解
2017/02/23 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
Python装饰器使用示例及实际应用例子
2015/03/06 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
如何在Django项目中引入静态文件
2019/07/26 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
疾病防治方案
2014/05/31 职场文书
2015年大学生工作总结
2015/04/21 职场文书
Java实现带图形界面的聊天程序
2022/06/10 Java/Android