1024程序节|你知道老师上课随机点名是怎么实现的吗
目录
前言
随机点名
搭建主体框架
简述
执行代码
添加功能
块级元素随机输出姓名
Math.random()
Math.round()
按钮控制开始/结束
onclick()
clearInterval()
简述
完整代码
执行结果
片尾彩蛋
前言
身为程序员的你 ，在老师使用工具随机摇人的时候，你是心里紧张的默念“抽不到我，抽不到我”，还是在琢磨老师的随机点名是如何实现的呢？今天这篇文章将为你揭露点名的“真相”......
随机点名
搭建主体框架
简述
首先建一个块级元素用来展示随机抽取的过程和最后的结果，下面写个按钮控制开始和结束。块级元素和按钮的属性可以按照自己的喜好修改。
执行代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#content{width: 600px;height: 400px;background: rgb(205, 255, 223);margin: 100px auto;text-align: center;position: relative;line-height: 400px;color: rgb(43, 150, 226);font-size: 80px;} #start{background: #ccc;width: 200px;height: 100px;font-size: 40px;color:red;border-radius: 12px;position: absolute;margin-left: -90px;left: 50%;}</style>
</head>
<body><div id="content"><span>点击开始</span></div><button id="start">开始</button>
</body>
</html>执行结果
添加功能
块级元素随机输出姓名
Math.random()
返回一个浮点数，伪随机数在范围从0 到小于1，也就是说，从 0（包括 0）往上，但是不包括 1（排除 1）
Math.round()
取整
setInterval()
可按照指定的周期（以毫秒计，1000 毫秒= 1 秒）来调用函数或计算表达式。
简述
首先将参与点名的同学的名字放进一个数组里，然后我们可以通过Math.random（）函数随机生成数组的索引，通过随机生成0~数组长度（不包括），所以将Math.random（）乘以数组长度，在对其求整就可以实现随机生成数组的索引，再通过索引用setInterval() 函数（100毫秒为周期）输出对应的学生的姓名，
实现代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#content{width: 600px;height: 400px;background: rgb(205, 255, 223);margin: 100px auto;text-align: center;position: relative;line-height: 400px;color: rgb(43, 150, 226);font-size: 80px;} #start{background: #ccc;width: 200px;height: 100px;font-size: 40px;color:red;border-radius: 12px;position: absolute;margin-left: -90px;left: 50%;}</style>
</head>
<body><div id="content"><span id="ts">点击开始</span></div><button id="start">开始</button><script>var arr = ["张老三","李四","王老五","老六"];var $ts = document.getElementById('ts');var timer;function print(){timer = setInterval(function(){var num = random(arr.length - 1);$ts.innerHTML = arr[num];},100)}function random(b){var randomNum = Math.round(Math.random() *b);return randomNum;} print();</script>
</body>
</html>运行结果
按钮控制开始/结束
onclick()
当按钮被点击时执行Javascript代码
clearInterval()
显示当前时间 ( setInterval() 函数会每秒执行一次函数，类似手表)。使用 clearInterval() 来停止执行
简述
定义一个初始值为true的布尔值，点击按钮后如果布尔值为真那么执行随机输出函数，将按钮内的值改为"结束",布尔值赋值为false，如果为假就结束输出，将按钮内的值改为"开始",布尔值赋值为true。
完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>随机点名</title><style>#content{width: 600px;height: 400px;background: rgb(205, 255, 223);margin: 100px auto;text-align: center;position: relative;line-height: 400px;color: rgb(43, 150, 226);font-size: 80px;} #start{background: #ccc;width: 200px;height: 100px;font-size: 40px;color:red;border-radius: 12px;position: absolute;margin-left: -90px;left: 50%;}</style>
</head>
<body><div id="content"><span id="ts">点击开始</span></div><button id="start">开始</button><script>var arr = ["张老三","李四","王老五","老六"];var $start = document.getElementById('start');var $content = document.getElementById('content');var $ts = document.getElementById('ts');var timer;var testNum = true;$start.onclick = function(){if(testNum){print();$start.innerHTML = '结束';testNum = false;}else{stop();start.innerHTML = '开始';testNum = true;}}function print(){timer = setInterval(function(){var num = random(arr.length - 1);$ts.innerHTML = arr[num];},100)}function stop(){clearInterval(timer); }function random(b){var randomNum = Math.round(Math.random() *b);return randomNum;} </script>
</body>
</html>
执行结果
抽取前：
抽取中：
抽取结果：
片尾彩蛋
如果你有“选择困难症”，你可以在做选择前把选择的内容放进一个数组里替换上面的数组，让电脑来帮你做选择，避免自己纠结，岂不美哉！！！
1024程序节|你知道老师上课随机点名是怎么实现的吗相关推荐
- 利用HTML实现上课随机点名
记录学习的第二天! 高中数学老师一枚,为增强上课的趣味性,激发学生的学习欲望,专门用HTML5写了一个上课随机点名系统.通过实践检验,效果良好! 虽然学校一体机配备有点名软件,但老师自己写的小玩意可以 ...
- python随机点名程序 图形化_python写一个随机点名软件，python随机点名,最近有个随机点名软件...
python写一个随机点名软件,python随机点名,最近有个随机点名软件 最近有个随机点名软件的需求,故写了一个,上代码:github地址# -*- coding: utf-8 -*-# @Time ...
- python随机点名程序 图形化,python写一个随机点名软件的实例
最近有个随机点名软件的需求,故写了一个,上代码:github地址 # -*- coding: utf-8 -*- # @Time : 18-12-31 下午4:21 # @Author : Felix ...
- 笔记本电脑连接宽带的时候报错（调制解调器报告了一个错误）（1024程序节纪念一下自己的最坑）
经历:,电脑关机后莫名其妙无法连接到宽带了,起初以为是电脑有线网卡驱动的问题,然后还是用驱动人生安装新版的网卡驱动,然而结果确实残酷的(更新失败!!),然后我重启继续,发现仍然不行, 解决过程: 最后 ...
- 贝叶斯公式与随机点名中的学生可信度
今天的Java上机练习有一道非常有意思的题: 使用贝叶斯公式求解,随机点名多少次,学生的可信度降到了0.01以下,该同学需要经过多少次,可信度才能上升到0.85. 假定初始同学可信的概率是0.8, ...
- python小案例随机点名_python用tkinter实现一个简易能进行随机点名的界面
今天学到Python 有一个名为 random 的内置模块,可用于生成随机数, 这个好玩~可以用来做为上课随机点名的程序了哈哈.. def main_cor(): import random i = ...
- python大学随机点名名_python用tkinter实现一个简易能进行随机点名的界面
今天学到Python 有一个名为 random 的内置模块,可用于生成随机数, 这个好玩~可以用来做为上课随机点名的程序了哈哈.. def main_cor(): import random i = ...
- 怎么用python制作随机点名软件_python用tkinter实现一个简易能进行随机点名的界面...
今天学到Python 有一个名为 random 的内置模块,可用于生成随机数, 这个好玩~可以用来做为上课随机点名的程序了哈哈.. def main_cor(): import random i = ...
- 课堂随机点名神器,超简单快捷设置教程
[点名精灵]点名软件是一款课堂随机点名神器,老师可以通过此软件轻松实现随机点名,有效的保证公平公正的点名服务. 软件使用教程: ①:先导入班级花名册,通过excel表格一键导入(可查看导入示例) ②: ...
最新文章
- 别让扁平化设计平淡无奇
- 干货：TensorFlow1.2~2.1各个GPU版本CUDA和cuDNN对应版本整理
- JFlow CCFlow工作流引擎北京培训邀请函
- 快速理解和使用 ES7 await/async
- C语言程序设计 文件操作函数
- 4.Model Validation
- vim 强制保存只读文件
- ACMMM 2021《LSG》性能SOTA！用GNN和GAN的方式来强化Video Captioning的学习！
- Kaggle 数据清洗挑战 Day 1 - 手把手教你五步处理缺失值
- 《Arduino实战》——1.7 为代码编写注释
- Oracle树结构查询按层级排序
- vb.net中如何结束一个线程
- Java实现简单工厂模式
- 数学建模 最优化方法：动态规划 学习笔记
- 从假装在腾讯，到真的360 —— 一个应届准PM的独白（面经干货）
- Zemax OpticsBuilder
- git 码云上传本地项目
- 【论文笔记_自知识蒸馏_2021】Revisiting Knowledge Distillation via Label Smoothing Regularization
- WIN10的桌面和虚拟桌面的切换快捷键太方便了
- SystemUi通知栏
热门文章