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

  

个人主页：

目录

前言

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

随机点名

定制设计搭建主体框架

简述

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

执行代码

  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>

执行结果

抽取前：

抽取中：

抽取结果：

 片尾彩蛋

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

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

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发