0
0

1024程序节|你知道老师上课随机点名是怎么实现的吗

个人主页：天寒雨落的博客_CSDN博客-C,CSDN竞赛,python领域博主

前言

身为程序员的你 ，在老师使用工具随机摇人的时候，你是心里紧张的默念“抽不到我，抽不到我”，还是在琢磨老师的随机点名是如何实现的呢？今天这篇文章将为你揭露点名的“真相”......

随机点名

搭建主体框架

简述

首先建一个块级元素用来展示随机抽取的过程和最后的结果，下面写个按钮控制开始和结束。块级元素和按钮的属性可以按照自己的喜好修改。

执行代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.            #content{
  10.             width: 600px;
  11.             height: 400px;
  12.             background: rgb(205, 255, 223);
  13.             margin: 100px auto;
  14.             text-align: center;
  15.             position: relative;
  16.             line-height: 400px;
  17.             color: rgb(43, 150, 226);
  18.             font-size: 80px;
  19.         }   
  20.         #start{
  21.             background: #ccc;
  22.             width: 200px;
  23.             height: 100px;
  24.             font-size: 40px;
  25.             color:red;
  26.             border-radius: 12px;
  27.             position: absolute;
  28.             margin-left: -90px;
  29.             left: 50%;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <div id="content">
  35.         <span>
  36.             点击开始
  37.         </span>
  38.     </div>
  39.     <button id="start">
  40.         开始
  41.     </button>
  42. </body>
  43. </html>

执行结果

添加功能

块级元素随机输出姓名

Math.random()

返回一个浮点数，伪随机数在范围从0 到小于1，也就是说，从 0（包括 0）往上，但是不包括 1（排除 1）

Math.round()

取整

setInterval()

可按照指定的周期（以毫秒计，1000 毫秒= 1 秒）来调用函数或计算表达式。

简述

首先将参与点名的同学的名字放进一个数组里，然后我们可以通过Math.random（）函数随机生成数组的索引，通过随机生成0~数组长度（不包括），所以将Math.random（）乘以数组长度，在对其求整就可以实现随机生成数组的索引，再通过索引用setInterval() 函数（100毫秒为周期）输出对应的学生的姓名，

实现代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.            #content{
  10.             width: 600px;
  11.             height: 400px;
  12.             background: rgb(205, 255, 223);
  13.             margin: 100px auto;
  14.             text-align: center;
  15.             position: relative;
  16.             line-height: 400px;
  17.             color: rgb(43, 150, 226);
  18.             font-size: 80px;
  19.         }   
  20.         #start{
  21.             background: #ccc;
  22.             width: 200px;
  23.             height: 100px;
  24.             font-size: 40px;
  25.             color:red;
  26.             border-radius: 12px;
  27.             position: absolute;
  28.             margin-left: -90px;
  29.             left: 50%;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <div id="content">
  35.         <span id="ts">
  36.             点击开始
  37.         </span>
  38.     </div>
  39.     <button id="start">
  40.         开始
  41.     </button>
  42.     <script>
  43.             var arr = ["张老三","李四","王老五","老六"];
  44.             var $ts = document.getElementById('ts');
  45.             var timer;
  46.             function print(){
  47.                 timer = setInterval(function(){
  48.                     var num = random(arr.length - 1);
  49.                     $ts.innerHTML = arr[num];
  50.                 },100)
  51.         }
  52.         function random(b){
  53.             var randomNum = Math.round(Math.random() *b);
  54.             return randomNum;
  55.         } 
  56.         print();
  57.     </script>
  58. </body>
  59. </html>

运行结果

按钮控制开始/结束

onclick()

当按钮被点击时执行Javascript代码

clearInterval()

显示当前时间 ( setInterval() 函数会每秒执行一次函数，类似手表)。使用 clearInterval() 来停止执行

简述

定义一个初始值为true的布尔值，点击按钮后如果布尔值为真那么执行随机输出函数，将按钮内的值改为"结束",布尔值赋值为false，如果为假就结束输出，将按钮内的值改为"开始",布尔值赋值为true。

完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>随机点名</title>
  8.     <style>
  9.         #content{
  10.             width: 600px;
  11.             height: 400px;
  12.             background: rgb(205, 255, 223);
  13.             margin: 100px auto;
  14.             text-align: center;
  15.             position: relative;
  16.             line-height: 400px;
  17.             color: rgb(43, 150, 226);
  18.             font-size: 80px;
  19.         }   
  20.         #start{
  21.             background: #ccc;
  22.             width: 200px;
  23.             height: 100px;
  24.             font-size: 40px;
  25.             color:red;
  26.             border-radius: 12px;
  27.             position: absolute;
  28.             margin-left: -90px;
  29.             left: 50%;
  30.         }
  31.     
  32.     </style>
  33. </head>
  34. <body>
  35.     <div id="content">
  36.         <span id="ts">
  37.             点击开始
  38.         </span>
  39.     </div>
  40.     <button id="start">
  41.         开始
  42.     </button>
  43.     <script>
  44.         var arr = ["张老三","李四","王老五","老六"];
  45.         var $start = document.getElementById('start');
  46.         var $content = document.getElementById('content');
  47.         var $ts = document.getElementById('ts');
  48.         var timer;
  49.         var testNum = true;
  50.         $start.onclick = function(){
  51.             if(testNum){
  52.                 print();
  53.                 $start.innerHTML = '结束';
  54.                 testNum = false;
  55.             }
  56.             else{
  57.                 stop();
  58.                 start.innerHTML = '开始';
  59.                 testNum = true;
  60.             }
  61.         }
  62.         function print(){
  63.                 timer = setInterval(function(){
  64.                     var num = random(arr.length - 1);
  65.                     $ts.innerHTML = arr[num];
  66.                 },100)
  67.         }
  68.         function stop(){
  69.                 clearInterval(timer);      
  70.         }
  71.         function random(b){
  72.             var randomNum = Math.round(Math.random() *b);
  73.             return randomNum;
  74.         }        
  75.     </script>
  76. </body>
  77. </html>

执行结果

抽取前：

抽取中：

抽取结果：

片尾彩蛋

如果你有“选择困难症”，你可以在做选择前把选择的内容放进一个数组里替换上面的数组，让电脑来帮你做选择，避免自己纠结，岂不美哉！！！

👍+✏️+⭐️是对博主最大的鼓励与支持！！！

标签： html 前端 javascript
本文转载自: https://blog.csdn.net/m0_67388084/article/details/127458195
版权归原作者 天寒雨落 所有， 如有侵权，请联系我们删除。
登录后发布评论

“1024程序节|你知道老师上课随机点名是怎么实现的吗”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？