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

<!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>

执行结果

抽取前：

抽取中：

抽取结果：

片尾彩蛋

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

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

点名上课 xff 34 margin-left html 前端 javascript 学习

有关1024程序节|你知道老师上课随机点名是怎么实现的吗的更多相关文章

ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2
我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0
ruby - 如何指定 Rack 处理程序 - 2
Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack
ruby - 在 Ruby 中编写命令行实用程序 - 2
我想用ruby编写一个小的命令行实用程序并将其作为gem分发。我知道安装后，Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用，我需要在我的gemspec中指定什么。最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序
ruby-on-rails - Rails 应用程序之间的通信 - 2
我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此
ruby - 无法运行 Rails 2.x 应用程序 - 2
我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r
ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗？ - 2
刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr
ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby 变量的内容？ - 2
我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。最佳答案您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R
ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2
我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden
ruby - Ruby 中的隐式返回值是怎么回事？ - 2
所以我开始关注ruby，很多东西看起来不错，但我对隐式return语句很反感。我理解默认情况下让所有内容返回self或nil但不是语句的最后一个值。对我来说，它看起来非常脆弱(尤其是)如果你正在使用一个不打算返回某些东西的方法(尤其是一个改变状态/破坏性方法的函数!)，其他人可能最终依赖于一个返回对方法的目的并不重要，并且有很大的改变机会。隐式返回有什么意义？有没有办法让事情变得更简单？总是有返回以防止隐含返回被认为是好的做法吗？我是不是太担心这个了？附言当人们想要从方法中返回特定的东西时，他们是否经常使用隐式返回，这不是让你组中的其他人更容易破坏彼此的代码吗？当然，记录一切并给出
ruby - 怎么来的(a_method || :other) returns :other only when assigning to a var called a_method? - 2
给定以下方法:defsome_method:valueend以下语句按我的预期工作:some_method||:other#=>:valuex=some_method||:other#=>:value但是下面语句的行为让我感到困惑:some_method=some_method||:other#=>:other它按预期创建了一个名为some_method的局部变量，随后对some_method的调用返回该局部变量的值。但为什么它分配:other而不是:value呢？我知道这可能不是一件明智的事情，并且可以看出它可能有多么模棱两可，但我认为应该在考虑作业之前评估作业的右侧...我已经在R

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

前言

随机点名

搭建主体框架

简述

执行代码

添加功能

块级元素随机输出姓名

Math.random()

Math.round()

按钮控制开始/结束

onclick()

clearInterval()

简述

完整代码

执行结果

片尾彩蛋

有关1024程序节|你知道老师上课随机点名是怎么实现的吗的更多相关文章

随机推荐