定时器的工作原理，这里将用引用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. JDK1.8 的 HashMap 源码之文件注释

    文章目录 null 插入,key的位置变化 迭代操作时间 性能因素 负载因子 Comparable 加锁 迭代器修改 null 插入,key的位置变化,迭代操作时间,性能因素,负载因子,Compara ...

  2. ListView控件的理解——自洽理论

    写在前面的话: *标题中已经说明,是自洽理论.因此,有几率会有理解错误.但是,你不可以因此骂我. -我这个人经不起别人的批评,如果你批评我,我就,我就.... ## <第一行代码>读书笔记 ...

  3. 元组的简单介绍——参考Python编程从入门到实践

    元组 用于存储一系列不可修改的元素 1. 元组的定义 dimensions = (200, 50) # 定义一个元组,即将元素用圆括号括起来 print(dimensions[0]) # 打印元组中的 ...

  4. Android--圆角背景style

    <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...

  5. 采用二进制方式安装K8S集群，版本etcd-v3.3.10，flannel-v0.11.0，kubernetes-server-linux-amd64

    官方提供的几种Kubernetes部署方式 minikube Minikube是一个工具,可以在本地快速运行一个单点的Kubernetes,尝试Kubernetes或日常开发的用户使用.不能用于生产环 ...

  6. 在论坛中出现的比较难的sql问题：29(row_number函数 组内某列的值连续出现3次标记出来)

    原文:在论坛中出现的比较难的sql问题:29(row_number函数 组内某列的值连续出现3次标记出来) 在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘 ...

  7. ef报错（因为相同类型的其他实体已具有相同的主键值）

    修改数据的时候查询了下数据 于是报错了,我吧查询不加入缓存中,吧getbyid的方法改成.AsNoTracking().FirstOrDefault(p => p.x== x)

  8. Java Swing中文乱码解决方法

    Run As Run Configuration,在Arguments中增加下面这句: -Dfile.encoding=gbk

  9. java常见排序算法

    今天去面试的时候又考了排序算法,排序这个东西,你以为你懂了,但是真正去写的时候才会发现好多细节自己都模棱两可,我写着写着就全都乱了,回来之后赶紧重新写一遍. (1)冒泡排序 public void b ...

  10. js-Array数组

    一.创建数组的两种方式 1.使用Array构造函数 var colors = new Array(); var colors = new Array(20); var colors = new Arr ...