JS/JQuery实现随机点名功能(包含点名、记录、清除记录)

已于 2024-07-27 09:51:21 修改
阅读量1.4k 收藏 9
点赞数 1
分类专栏： web前端 文章标签： javascript css js html5 jquery
于 2020-10-03 13:24:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45491473/article/details/108909285
版权

文前推荐一下👉前端必备工具推荐网站(图床、API和ChatAI、智能AI简历、AI思维导图神器等实用工具):
站点入口：http://luckycola.com.cn/
图床：https://luckycola.com.cn/public/dist/#/imghub
多种API：https://luckycola.com.cn/public/dist/#/
ChatAI：https://luckycola.com.cn/public/dist/#/chatAi
AI思维导图神器：https://luckycola.com.cn/public/dist/#/aiQStore/aiMindPage

实现班级中随机点名功能

前言:班里老师想要一个上课随机点名的功能，哈哈临时做了一个。本功能用了jQuery实现，用jQuery和JS没什么两样，核心代码写法几乎一模一样，就是调用方法不一样。

  • 先看看效果图:
    效果图：

一、 功能思路

  1. 实现此功能首先想要随机random，JS中能随机的就是Math.random()，所以我们就从随机数下手
  2. 名字数组中能随机的就是下标，所以拿到数组下标总长度，让他自己随机
  3. 最重要的是怎么实现一直随机，那就是定时器setInterval()，每个多少毫秒反复调用。随机点名就能实现

二、实现随机点名

  • 点击随机抽取名名字(放关键代码)
  <div div class="outline" id="button1">
       开始点名<span class="lines"></span>
   </div>
   <script>
    //名字列表
      var nameList = [
        "高某某",
        "李某某",
        "张某某",
        "贾某某",
        "刘某某",
        "杨某某",
        "柳某某",
        "吴某某",
        "崔某某",
        "尹某某",
      ];
      //定义未开始
      var flag = true;
      //全局设置定时器
      var time = null;
      //选中的人名
      var value = "";
      /**
       *点击随机抽取名字
       */
      $("#button1").click(function () {
      //用flag识别是开始还是停止
        if (flag) {
          $(this).css({ color: "#ff0000" }).html("停止点名");
          //每50毫秒执行一次
          time = setInterval(function () {
            //用下标控制随机选中名字
            index = Math.floor(Math.random() * nameList.length);
            //选中的人名
            value = nameList[index];
            $("#select").css({ color: "#016dfc" }).html(value);
          }, 50);
          //取反
          flag = !flag;
        } else {
          $(this).css({ color: "#fff" }).html("开始点名");
          $("#select").css({ color: "#ff0000" });
          clearInterval(time);
          flag = !flag;
        }
      });
  </script>
  • 如果想用原生JS写的话，只需要把调用方法和获取元素的方法换了

三、实现记录和清除记录

  • 记录生成的名字和清除记录
 <div class="outline" id="button2">
    记录<span class="lines"></span>
</div>
<div class="outline" id="button3">
    清空记录<span class="lines"></span>
</div>
<script>
      /**
       *记录生成的名字（记录）
       */
      $("#button2").click(function () {
        if (value != null && value != "") {
          //记录名字模板
          var nameblok = `<div class="nameblock">${value}</div>`;
          //向容器中追加名字
          $(".selectNames").append(nameblok);
        } else {
          alert("请先开始!");
        }
      });
      /**
       *删除所有生成的名字（清空记录）
       */
      $("#button3").click(function () {
        if (value != null && value != "") {
          //删除记录的名字
          $(".selectNames").empty();
        } else {
          alert("无记录!");
        }
      });
</script>
  • 原生JS的话用添加节点appendChild(child)方法、删除用removeChild(child)方法

四、整体写法

  • 目录结构:
    目录:
  • HTML
<!--
 * @Description:随机点名
 * @Version: 1.0
 * @Autor: LG
 * @Date: 2020-10-02 14:15:43
 * @LastEditors: LG
 * @LastEditTime: 2020-10-03 12:58:54
-->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LG-随机点名</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <!-- 背景logo区域start -->
    <div class="pg-bg"></div>
    <!-- 背景logo区域end -->

    <!-- 核心内容区域 -->
    <div class="container">
      <!-- 本来想放小logo，需要的话自加 -->
      <!-- <a href="javascript:;">
        <h1>普歌</h1>
      </a> -->
      <!-- 点名按钮区域start -->
      <div class="content">
        <div class="button">
          <div div class="outline" id="button1">
            开始点名<span class="lines"></span>
          </div>
          <div class="outline" id="button2">
            记录<span class="lines"></span>
          </div>
          <div class="outline" id="button3">
            清空记录<span class="lines"></span>
          </div>
        </div>
        <div class="name"><span id="select">天选之子</span></div>
      </div>
      <!-- 点名按钮区域end -->
      <!-- 生成记录名字区域start -->
      <div class="selectNames"></div>
      <!-- 生成记录名字区域end -->
    </div>
    <script src="jquery-3.5.1.min.js"></script>
    <script>
      //名字列表
      var nameList = [
        "高某某",
        "李某某",
        "张某某",
        "贾某某",
        "刘某某",
        "杨某某",
        "柳某某",
        "吴某某",
        "崔某某",
        "尹某某",
      ];
      //定义未开始
      var flag = true;
      //全局设置定时器
      var time = null;
      //选中的人名
      var value = "";
      /**
       *点击随机抽取名字
       */
      $("#button1").click(function () {
        if (flag) {
          $(this).css({ color: "#ff0000" }).html("停止点名");
          //每50毫秒执行一次
          time = setInterval(function () {
            //用下标控制随机选中名字
            index = Math.floor(Math.random() * nameList.length);
            //选中的人名
            value = nameList[index];
            $("#select").css({ color: "#016dfc" }).html(value);
          }, 50);
          //取反
          flag = !flag;
        } else {
          $(this).css({ color: "#fff" }).html("开始点名");
          $("#select").css({ color: "#ff0000" });
          clearInterval(time);
          flag = !flag;
        }
      });
      /**
       *记录生成的名字（记录）
       */
      $("#button2").click(function () {
        if (value != null && value != "") {
          //记录名字模板
          var nameblok = `<div class="nameblock">${value}</div>`;
          //向容器中追加名字
          $(".selectNames").append(nameblok);
        } else {
          alert("请先开始!");
        }
      });
      /**
       *删除所有生成的名字（清空记录）
       */
      $("#button3").click(function () {
        if (value != null && value != "") {
          //删除记录的名字
          $(".selectNames").empty();
        } else {
          alert("无记录!");
        }
      });
    </script>
  </body>
</html>
  • less 如果需要css，在下面
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  position: relative;
  min-width: 1500px;
  background-color: #212121;
}
// 背景logo区域start
.pg-bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: url("pg_logo-bg.png") no-repeat top center;
  background-size: 100vh auto;
  opacity: 0.2;
  z-index: -1;
}
// 背景logo区域end

//核心内容区域
.container {
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  //小logo样式，需要的话就加
  a {
    display: block;
    height: 52px;
    width: 130px;
    margin: 20px 0 0 50px;
    cursor: pointer;
    h1 {
      display: block;
      height: 52px;
      width: 130px;
      background: url("pg_logo.png") no-repeat 0 0;
      text-indent: -9999px;
      overflow: hidden;
      -o-background-size: 100% 100%;
      background-size: 100% 100%;
    }
  }
  //<!-- 点名按钮区域start -->
  .content {
    padding: 20px;
    color: #fff;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -20%);
    .button {
      text-align: center;
      font-weight: 600;
      font-size: 30px;
      .outline {
        color: #fff;
        overflow: hidden;
        position: relative;
        user-select: none;
        display: inline-block;
        font-weight: 400;
        padding: 10px 30px;
        line-height: 45px;
        text-decoration: none;
        margin-right: 20px;
        cursor: pointer;
        text-align: center;
        transition: all 300ms;
      }
      .outline:before,
      .outline:after,
      .outline .lines:before,
      .outline .lines:after {
        content: "";
        height: 2px;
        left: 0;
        position: absolute;
        top: 0;
        transition: transform 300ms;
        width: 100%;
      }
      .outline:before {
        bottom: 0;
        top: auto;
      }

      .outline .lines {
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
      }

      .outline .lines:before,
      .outline .lines:after {
        height: 100%;
        width: 2px;
      }

      .outline .lines:after {
        left: auto;
        right: 0;
      }
      .outline:hover {
        font-size: 35px;
      }
      .outline:hover:before {
        transform: translateX(-100%);
      }

      .outline:hover:after {
        transform: translateX(100%);
      }

      .outline:hover .lines:before {
        transform: translateY(-100%);
      }

      .outline:hover .lines:after {
        transform: translateY(100%);
      }
      #button1:before,
      #button1:after,
      #button1 .lines:before,
      #button1 .lines:after {
        background-color: #f8c013;
      }
      #button2:before,
      #button2:after,
      #button2 .lines:before,
      #button2 .lines:after {
        background-color: #dd483f;
      }
      #button3:before,
      #button3:after,
      #button3 .lines:before,
      #button3 .lines:after {
        background-color: #56c5ff;
      }
    }
    .name {
      margin-top: 50px;
      text-align: center;
      font-size: 60px;
      font-weight: 600;
      letter-spacing: 3px;
    }
  }
  //  <!-- 点名按钮区域end -->
  //<!-- 生成记录名字区域start -->
  .selectNames {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    bottom: 20px;
    left: 0;
    .nameblock {
      padding: 10px 15px;
      border-radius: 3px;
      background: #fff;
      color: #a92733;
      font-weight: 600;
      font-size: 30px;
      margin: 20px;
      box-shadow: 0 3px 10px #fff, 0 0 10px;
    }
  }
  // <!-- 生成记录名字区域end -->
}
  • CSS
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  position: relative;
  min-width: 1500px;
  background-color: #212121;
}
.pg-bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: url("pg_logo-bg.png") no-repeat top center;
  background-size: 100vh auto;
  opacity: 0.2;
  z-index: -1;
}
.container {
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}
.container a {
  display: block;
  height: 52px;
  width: 130px;
  margin: 20px 0 0 50px;
  cursor: pointer;
}
.container a h1 {
  display: block;
  height: 52px;
  width: 130px;
  background: url("pg_logo.png") no-repeat 0 0;
  text-indent: -9999px;
  overflow: hidden;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
}
.container .content {
  padding: 20px;
  color: #fff;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -20%);
}
.container .content .button {
  text-align: center;
  font-weight: 600;
  font-size: 30px;
}
.container .content .button .outline {
  color: #fff;
  overflow: hidden;
  position: relative;
  user-select: none;
  display: inline-block;
  font-weight: 400;
  padding: 10px 30px;
  line-height: 45px;
  text-decoration: none;
  margin-right: 20px;
  cursor: pointer;
  text-align: center;
  transition: all 300ms;
}
.container .content .button .outline:before,
.container .content .button .outline:after,
.container .content .button .outline .lines:before,
.container .content .button .outline .lines:after {
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: 0;
  transition: transform 300ms;
  width: 100%;
}
.container .content .button .outline:before {
  bottom: 0;
  top: auto;
}
.container .content .button .outline .lines {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}
.container .content .button .outline .lines:before,
.container .content .button .outline .lines:after {
  height: 100%;
  width: 2px;
}
.container .content .button .outline .lines:after {
  left: auto;
  right: 0;
}
.container .content .button .outline:hover {
  font-size: 35px;
}
.container .content .button .outline:hover:before {
  transform: translateX(-100%);
}
.container .content .button .outline:hover:after {
  transform: translateX(100%);
}
.container .content .button .outline:hover .lines:before {
  transform: translateY(-100%);
}
.container .content .button .outline:hover .lines:after {
  transform: translateY(100%);
}
.container .content .button #button1:before,
.container .content .button #button1:after,
.container .content .button #button1 .lines:before,
.container .content .button #button1 .lines:after {
  background-color: #f8c013;
}
.container .content .button #button2:before,
.container .content .button #button2:after,
.container .content .button #button2 .lines:before,
.container .content .button #button2 .lines:after {
  background-color: #dd483f;
}
.container .content .button #button3:before,
.container .content .button #button3:after,
.container .content .button #button3 .lines:before,
.container .content .button #button3 .lines:after {
  background-color: #56c5ff;
}
.container .content .name {
  margin-top: 50px;
  text-align: center;
  font-size: 60px;
  font-weight: 600;
  letter-spacing: 3px;
}
.container .selectNames {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  bottom: 20px;
  left: 0;
}
.container .selectNames .nameblock {
  padding: 10px 15px;
  border-radius: 3px;
  background: #fff;
  color: #a92733;
  font-weight: 600;
  font-size: 30px;
  margin: 20px;
  box-shadow: 0 3px 10px #fff, 0 0 10px;
}
  • 如果想下载源码包，在我的资源里下载即可

如果有帮助到小伙伴的，点个赞+收藏呗

更多推荐：wantLG的《普歌-码上鸿鹄团队:微信小程序的配置(项目开发配置、小程序收录配置、全局配置、页面配置)》

wantLG
关注
专栏目录
jQuery随机点名系统
m0_51707539的博客
12-03 811
仔细看步骤，复制只是你写出来了，当你看懂步骤你一类所有题你都会
JS点名器
weixin_47917392的博客
06-19 884
点名器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } body{ background:black url(imges/a.png); } h2{
在线图片编辑网站推荐(图片压缩)
最新发布
qq_48896417的博客
08-18 424
🌟「可乐改图」是一款简单易用的在线图片编辑神器，它不仅涵盖了“压缩图片”、“图片格式转换”这些基础功能，还提供了“图片编辑（裁剪、旋转、涂鸦等）”以及“PDF转图”等一站式解决方案，满足你日常工作和创作中的各种需求。二、🛠️。
随机点名
aikong3218的博客
03-12 147
package lijun.cn.demo1; public class Student { //描述学生 属性 姓名 年龄 String name; int age;} package lijun.cn.demo1; import java.util.ArrayList;import java.util.Random; public class CallNa...
js随机点名
素描本里的男子的博客
04-29 877
<script type="text/javascript"> function name(){ var arr=["嘿嘿","德泽","海超","海阳","海荣","海逸","海昌","瀚钰","瀚文","涵亮","涵煦","涵蓄","涵衍","浩皛", "浩波","浩博","浩初","浩宕","浩歌","浩广","浩邈"]; document.write(arr[Ma...
js制作点名
shi_jia233的博客
03-30 439
效果展示 1打开Visual Studio Code然后CTRL+n新建然后把文件设置成HTML然后！获取html内容 2在body做一个p标签和按钮，按钮需要用div包裹。Button按钮和p标签都要给id 3在style里给body背景颜色，按钮大小，p标签居中，div居中。 4在script里声明p拿来获取文字，还要做防暴力点击,按钮按下后获取名字,然后几秒后停止 小结:这次的随机点名是上次抽奖的升级版它多了几个中奖的，用了mat...
随机点名（HTML,CSS,JS）
lsk377351003的博客
08-11 5695
随机点名原理： 1.新建一个数组，把需要点名的名单放到一个数组里面 2.遍历数组 3.创建一个随机数，作为数组的下标，随机数最大值为数组长度，最小值为零 4.利用计时器，每隔一段时间生成一个随机数 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE
jQuery随机名字点名抽奖代码.zip
10-10
jQuery随机名字点名抽奖代码.zip是一个包含jQuery特效的压缩包，用于实现网页上的点名或抽奖功能。这个代码包能够帮助开发者快速构建一个互动性强、用户体验良好的抽奖程序，适用于各种活动、会议或在线课程中随机...
纯js实现随机点名案例
qq_1243443888的博客
06-24 1117
纯js实现随机点名案例 页面参考 未加载Excel名单表 加载Excel表 开始启动 停止 流程图 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-puBWlKdO-1592987562514)(assets/1592987021151.png)] 代码编写 导入js库 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1cL9OqQO-1592987562516)(assets/1592987086335.png)]
jQuery实现的点名器抽奖特效
06-01
在当今的网页开发中，JavaScript库如jQuery极大地简化了DOM操作、事件处理以及动画效果的实现。本篇文章将详细讲解如何利用jQuery来创建一个功能丰富的点名器抽奖特效，帮助开发者更好地理解和运用jQuery在实际项目...
jquery随机展示头像代码
10-28
总结来说，这个jQuery随机展示头像的实现涉及到HTML布局、CSS样式以及JavaScript的动态效果处理。通过合理地组合这些技术，可以创建出一种富有视觉吸引力的头像展示效果，使得页面看起来更加生动和有趣。在实际应用...
random-name:javascript生成随机姓名或随机昵称（随机拼接）
05-14
ramdon-name 生成随机昵称，随机姓名，男生姓名，女生姓名 使用方法 download## 在需要用到的文件引用即可 // import randomName from 'youpath/random-name' 生成一个名字（男女不限） randomName.getName(); 生成一个名字（男） randomName.getMaleName(); 生成一个名字（女） randomName.getName(); 生成一个昵称 randomName.getNickName(); 生成一个姓 randomName.getFamilyName(); 默认生成姓名含有复姓 若不需要复姓则可以在 在调用方法时传入参数false 如： randomName.getName(false);
JavaScript实现随机点名程序
11-21
本文实例为大家分享了js实现随机点名程序的具体代码，供大家参考，具体内容如下 效果： 录制的gif效果图没那么理想，其实速度是比这个快的 思路： 1.定义一个数组，存放名单 2.启动定时器，设定间隔时间不断调用函数 3.Math.random()获取随机下标，根据下标的随机变换取出数组中对应的元素 4.逻辑代码完成后，通过DOM对象把变化的结果呈现在页面上 JS代码： [removed] var arr = ["唐僧", "孙悟空", "猪八戒", "沙悟净", "白骨精", "玉皇大帝", "红孩儿", "白骨精", "太上老君"] var myTimer = null //定时器编号 /
javascript实现的一个随机点名功能
10-25
主要介绍了JS实现的一个随机点名功能,逻辑简单,用在班级或活动时是个不错的选择,需要的朋友可以参考下
随机点名小程序
weixin_46837969的博客
06-24 5838
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点名</title> <style> /* 页面背景色 */ body
js实现随机点名
black_tea114514的博客
01-11 1865
11
JavaScript实现随机点名器功能
weixin_46957313的博客
06-18 256
js实现随机点名器功能
JavaScript的数组知识案例之随机点名器
weixin_33800593的博客
04-20 680
　　本次分享JavaScript主要知识点涉及到for循环、if选择结构判断语句、数组的定义、定时器、清除定时器、日期对象的使用。 执行后效果图： 思路： 1.网页结构搭建： HTML 2.网页布局美化： CSS　　 3.随机功能实现:　JavaScript 分析后案例思路图： 编码工作： Html代码： <!DOCTYPE htm...
利用JS与Excel实现随机点名功能的简单教程
本文档介绍了一个使用JavaScript实现的随机点名程序，主要关注于如何利用jQuery库配合自定义的xls_funcs.js文件来实现在网页上动态选择学生名单。该程序适用于教育或团队管理场景，旨在简化点名过程，提高效率。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wantLG

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值