定时器的工作原理，这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理，该图为一个简单版的原理图。·

上图中，左侧数字代表时间，单位毫秒；左侧文字代表某一个操作完成后，浏览器去询问当前队列中存在哪些正在等待执行的操作；蓝色方块表示正在执行的代码块；右侧文字代表在代码运行过程中，出现哪些异步事件。该图大致流程如下：

  • 程序开始时，有一个JS代码块开始执行，执行时长约为18ms，在执行过程中有3个异步事件触发，其中包括一个setTimeout、鼠标点击事件、setInterval
  • 第一个setTimeout先运行，延迟时间为10ms，稍后鼠标事件出现，浏览器在事件队列中插入点击的回调函数，稍后setInterval运行，10ms到达之后，setTimeout向事件队列中插入setTimeout的回调
  • 当第一个代码块执行完成后，浏览器查看队列中有哪些事件在等待，他取出排在队列最前面的代码来执行
  • 在浏览器处理鼠标点击回调时，setInterval再次检查到到达延迟时间，他将再次向事件队列中插入一个interval的回调，以后每隔指定的延迟时间之后都会向队列中插入一个回调
  • 后面浏览器将在执行完当前队头的代码之后，将再次取出目前队头的事件来执行

这里只是对定时器的原理做一个简单版的描述，实际的处理过程比这个复杂。

下面我们利用定时器实现一个简单的随机点名功能，代码如下：

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

    <style>

        div{width: 300px;height: 100px;margin: 20px auto;font-size: 50px;text-align: center;line-height: 100px;}

        #btn{width: 200px;height: 40px;margin: 10px auto;background: red;color: #FFFFFF;font-size: 20px;text-align: center;cursor: pointer;display: block;}

    </style>

</head>

<body>

    <div id="content">请点击按钮</div>

    <input type="button" id="btn" value="开始">

    <script>

        var ocontent = document.getElementById("content");

        var obtn = document.getElementById("btn");

        var onoff = 1;        //打开

        var timer = null;        //设置全局变量

        var str = ["亚瑟","鬼谷子","铠","橘右京","项羽","梦奇","白起","赵云","李白","韩信","刘备","鲁班七号","墨子","孙膑","周瑜","庄周","廉颇","程咬金","典韦","后羿","扁鹊","李元芳","张飞","刘禅","兰陵王","达摩","曹操","钟馗","高渐离","宫本武藏","吕布","嬴政","姜子牙","老夫子","狄仁杰","夏侯惇","关羽","哪吒","太乙真人","干将莫邪","成吉思汗","牛魔","百里守约","百里玄策","苏烈","黄忠","诸葛亮","东皇太一","杨戬","后羿","孙悟空","张良","韩信","刘邦","达摩","马可波罗","娜可露露","露娜","妲己","甄姬","虞姬","大乔","小乔","王昭君","貂蝉","芈月","阿珂","花木兰","武则天","不知火舞","孙尚香","蔡文姬","安琪拉","钟无艳","女蜗","雅典娜","艾琳"]

        obtn.onclick = function(){

            if(onoff == 1){        //开始随机点名

                clearInterval(timer);//避免重复点击按钮出现bug

                timer = setInterval(function(){

                    var randomNum = Math.round(Math.random()*(str.length-1))

                    ocontent.innerHTML = str[randomNum];

                },10)

                onoff = 0;    //"定位"到暂停功能

                obtn.value = "就是你了"

            }else if(onoff == 0){

                clearInterval(timer);

                onoff = 1;    //暂停后需恢复到重新开始的功能

                obtn.value = "继续"

            }

        }

    </script>

</body>

</html>

效果截图如下：

这个随机点名功能实现起来相对容易，利用了定时器，设置了一个开关来控制开始和暂停。

另外我在另一篇随笔中用定时器写了一个倒计时功能，实现原理和这个类似，关键的两个点是定时器和开关，（相比较而言，开关更难理解）附上地址：https://www.cnblogs.com/qiaowanze/p/11399260.html

原生JS实现简易随机点名功能的更多相关文章

  1. 原生JS实现简易评论更新功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  3. 原生JS实现简单留言板功能

    原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...

  4. 原生JS实现简易转盘抽奖

    我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...

  5. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  6. 原生js、jQuery实现选项卡功能

    在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图:              好了,下边 ...

  7. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  8. 原生JS实现简易计算器

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. js javascript 简易随机值穿插加解密【原】

    适用场景 本方法适用于需要对敏感信息进行加密传输,但加解密要求又不高的场景,因为是前台的javascript加解密,所以其实还是能通过js代码分析出原始值来的. 如果您对信息极其敏感, 比例登录密码这 ...

随机推荐

  1. todo---java中的json探讨

    1.json的命名格式 2.json赋值原则 3.json常用的工具 4.json的处理的第三方软件比较 5.json的起源 6.关于json串的对于null ,"" 的不同的第三 ...

  2. Java调用SqlLoader将大文本导入数据库

    Java调用SqlLoader将大文本导入数据库 业务场景:将一千万条数据,大约500M的文本文档的数据导入到数据库 分析:通过Java的IO流解析txt文本文档,拼接动态sql实现insert入库, ...

  3. Scratch编程：初识Scratch及编程工具安装（一）

    “ Scratch是一款由美国麻省理工学院(MIT)设计开发的少儿编程工具.” Scratch采用可视化.模块化的编程方式,非常适合青少年作为初次接触编程的工具和语言来学习,进而用其编写充满趣味的小程 ...

  4. ReflectionTest:由输入的类名得到类的信息

    package reflection; import java.lang.reflect.*; import java.util.*; public class ReflectionTest { pu ...

  5. IEEE754浮点数

    前言 Go语言之父Rob Pike大神曾吐槽:不能掌握正则表达式或浮点数就不配当码农! You should not be permitted to write production code if ...

  6. Yii2 redis 使用

    首先要安装一下redis的扩展 composer require yiisoft/yii2-redis 在配置文件中添加redis配置 'components' => [ .... 'redis ...

  7. intellij idea 中右键项目没有git

    1.没有GIT选项说明还没有关联你的仓库 2.ctrl + alt +s 打开VersionControl添加git仓库 3.添加后再次查看,GIT就出现了 4.可以查看历史版本了. 原文地址:htt ...

  8. 在论坛中出现的比较难的sql问题：23(随机填充问题)

    原文:在论坛中出现的比较难的sql问题:23(随机填充问题) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所以,觉得有必要记录下 ...

  9. SVN_04建库

    示范加入一个代码库[Repository] [1]点击Repository右键,创建一个新库 (常规FSFS存储库) [2]在下面所看到的文本框中输入库名称 只创建空的库 创建完库后,没有任何内容在里 ...

  10. vscode IIsExpress用法

    最近前端调试项目,都要安装IIS,使用IIS Express插件不需要另外在IIS架设站点,方便使用 1.安装IIS Express插件 2.ctrl+shfit+p 启动IIS Express 命令 ...