定时器的工作原理，这里将用引用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. STM32之串口硬件连接图

    笔记本USB转串口实物连接图: 电路连接图:

  2. Python29之字符str与字节bytes

    详解见这位大神:https://www.cnblogs.com/xiaobingqianrui/p/9870480.html 实际上字符串和字节之间的转换过程,就是编码解码的过程,我们必须显示的指定编 ...

  3. 剑指offer48：不用加减乘除做加法

    1 题目描述 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 2 思路和方法 位运算符:两个数异或(^)[1^0=1, 1^1=0, 0^0=0, 0^1=1, 5^5 ...

  4. 转：数据库实例自动crash并报ORA-27157、ORA-27300等错误

    rhel7.2上安装12C RAC数据库后,其中一个数据库实例经常会自动crash.查看alert日志发现以下错误信息: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Errors ...

  5. PAT(A) 1148 Werewolf - Simple Version（Java）逻辑推理

    题目链接:1148 Werewolf - Simple Version (20 point(s)) Description Werewolf(狼人杀) is a game in which the p ...

  6. ASP.net Web API综合示例

    目录 概述 功能介绍 程序结构 服务器端介绍 客户端介绍 “契约” Web API设计规则 并行写入冲突与时间戳 身份验证详解 Web API验证规则 客户端MVVM简介 Web.Config 本DE ...

  7. Go net/http，web server

    net/http 包实现 HTTP Server Go 中,实现一个最简单的 http server 非常容易,代码如下: package main import ( "fmt" ...

  8. R_数据操作_初级_03

    数据的输入:详见(http://cran.r-project.org/doc/manuals/R-data.pdf下载的R Data Import/Export手册②) 1.键盘输入:使用edit() ...

  9. pc端vue 滚动到底部翻页

    html: <div class="list" ref="scrollTopList"> <div class="listsmall ...

  10. vue的mescroll搜索运用以及各种填坑处理

    父组件处理: <template> <div class="wrap"> <!-- 搜索框 --> <div class="se ...