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

这篇具有很好参考价值的文章主要介绍了1024程序节|你知道老师上课随机点名是怎么实现的吗。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

老师随机点名程序,html5,一些有趣的博客,html,前端,javascript,学习  

老师随机点名程序,html5,一些有趣的博客,html,前端,javascript,学习个人主页:天寒雨落的博客_CSDN博客-C,CSDN竞赛,python领域博主

目录

前言

随机点名

搭建主体框架

简述

执行代码

添加功能

块级元素随机输出姓名

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>

执行结果

老师随机点名程序,html5,一些有趣的博客,html,前端,javascript,学习

添加功能

块级元素随机输出姓名

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>

运行结果

老师随机点名程序,html5,一些有趣的博客,html,前端,javascript,学习

 按钮控制开始/结束

 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>

执行结果

抽取前:

老师随机点名程序,html5,一些有趣的博客,html,前端,javascript,学习

抽取中:

老师随机点名程序,html5,一些有趣的博客,html,前端,javascript,学习

抽取结果:

老师随机点名程序,html5,一些有趣的博客,html,前端,javascript,学习

 片尾彩蛋

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

👍+✏️+⭐️是对博主最大的鼓励与支持!!!文章来源地址https://www.toymoban.com/news/detail-833185.html

到了这里,关于1024程序节|你知道老师上课随机点名是怎么实现的吗的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用JS来实现随机点名的效果

    今天我们来做一个比较简单的JS点名效果,先把HTML和css给准备好,然后我们开始写JS结构 HTML h2随机点名/h2     div class=\\\"box\\\"         span名字是:/span         div class=\\\"qs\\\"这里显示姓名/div     /div     div class=\\\"btns\\\"         button class=\\\"start\\\"开始/button         button class=\\\"end\\\"结束

    2024年02月08日
    浏览(44)
  • 1-JavaScript 点击事件 随机点名器

    web前端JavaScript交互 ------ 点击事件 意义: JavaScript中的点击事件是指当用户在页面上点击某个元素时触发的事件。这个事件可以用于执行各种操作,如改变元素的样式、修改页面内容等。这是Web应用程序中最常用 的交互方式之一,允许用户与网页进行交互,提高用户体验。

    2024年02月08日
    浏览(42)
  • 基于unity+c#的随机点名系统(简单UI界面+列表+数组)

    目录 一、功能界面显示 二、UI 1、视频的使用 (1)渲染纹理 (2) 视频铺全屏 (3)视频的调用 2、 下拉文本框的使用(旧版) 3、输入文本框的使用(旧版) 4、更新Test文本和下拉文本框的内容 三、保存之前的记录 1、PlayerPrefs (1)保存数据: (2)读取数据: (3)删除

    2024年04月27日
    浏览(32)
  • 记录--js小练习(弹幕、 电梯导航、 倒计时、 随机点名、 购物放大镜)

    弹幕 电梯导航 倒计时 随机点名 购物放大镜 效果预览 功能:输入弹幕内容,按下回车显示一条弹幕(弹幕颜色、字体随机生成) 思路:设置按钮抬起事件,在事件中判断如果按下的是回车键则将输入框中替换掉敏感词的数据追加到标签中,字体的颜色、大小、位置按照生成

    2024年02月04日
    浏览(58)
  • 基于微信小程序的课程点名签到系统设计与实现 报告+项目源码及数据库文件

    题目:微信点名系统小程序 目录 第一节 系统分析与设计 1.1 需求分析 1.2 数据库设计 1.2.1 数据库模型图(初步设计) 1.3 系统功能设计 第二节 系统开发及实现 2.1 系统开发平台及工具 2.2 系统页面及使用说明 2.1.2 学生签到页面(首页) 2.1.3 学生查询页面(课程、我的) 2.

    2024年02月12日
    浏览(45)
  • 希望所有计算机专业同学都知道这些老师

    翁恺老师是土生土长的浙大码农,从本科到博士都毕业于浙大计算机系,后来留校教书,一教就是20多年。 翁恺老师的c语言课程非常好,讲解特别有趣,很适合初学者学习。 郝斌老师的思路是以初学者的思路来思考的,非常适合小白,你不理解的问题,基本上他都会详细说

    2024年02月05日
    浏览(42)
  • 你知道怎么实现定时任务吗?

    诸位读者都知道笔者写东西都是用到才写,笔者的学习足迹自从参加工作之后就是 非系统 学习了,公司里源代码只要有笔者不知道的技术细节,笔者就会仔细的研究清楚,笔者是不喜欢给自己留下问题的那种学习习惯。 笔者最近负责了消息发送的一些业务需求,由于笔者工

    2023年04月23日
    浏览(52)
  • 1024程序员节特辑 | ELK+ 用户画像构建个性化推荐引擎,智能实现“千人千面”

    专栏集锦,大佬们可以收藏以备不时之需 Spring Cloud实战专栏:https://blog.csdn.net/superdangbo/category_9270827.html Python 实战专栏:https://blog.csdn.net/superdangbo/category_9271194.html Logback 详解专栏:https://blog.csdn.net/superdangbo/category_9271502.html tensorflow专栏:https://blog.csdn.net/superdangbo/category_869

    2024年02月07日
    浏览(80)
  • PHP框架开发实践 | 1024 程序员节:通过index.php找到对应的controller是如何实现的

    🏆作者简介,黑夜开发者,CSDN领军人物,全栈领域优质创作者✌,CSDN博客专家,阿里云社区专家博主,2023年6月CSDN上海赛道top4。 🏆数年电商行业从业经验,历任核心研发工程师,项目技术负责人。 🏆本文已收录于PHP专栏:PHP进阶实战教程。 🎉欢迎 👍点赞✍评论⭐收藏

    2024年02月08日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包