普歌-码上鸿鹄：JSJQuery实现随机点名功能(包含点名、记录、清除记录)

科技2022-07-10 120

普歌-码上鸿鹄:实现班级中随机点名功能

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

先看看效果图:

一、功能思路

实现此功能首先想要随机random，JS中能随机的就是Math.random()，所以我们就从随机数下手名字数组中能随机的就是下标，所以拿到数组下标总长度，让他自己随机最重要的是怎么实现一直随机，那就是定时器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  <!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>  <div class="pg-bg"></div>   <div class="container">    <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>   <div class="selectNames"></div>  </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%; } } // .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; } } //  // .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; } } //  } 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本文源自：wantLG的《普歌-码上鸿鹄：JS/JQuery实现随机点名功能(包含点名、记录、清除记录))》本文版权归作者和共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。

Processed: 0.013, SQL: 8