定时器的工作原理，这里将用引用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. Java中XML的四种解析方式（二）

    三.JDOM解析 特征: 1.仅使用具体类,而不使用接口. 2.API大量使用了Collections类. import org.jdom2.Attribute; import org.jdom2.D ...

  2. page分页问题，根据页码获取对应页面的数据，接口调用

    添加一个log.js文件,进行接口调用. import axios from '@/libs/api.request' const MODULE_URL = '/log'; export const ...

  3. Django使用指南

    一.安装Django 1.命令行安装 pip3 install django(默认安装最新稳定版本) pip3 install django==版本号(指定版本安装) 2.Pycharm安装 在Pyc ...

  4. vue 下拉刷新数据的插件的使用：

    1.安装: npm i vue-scroller -S npm install vue-scroller -D 2.在需要加载的页面中引入,或在公共js文件中引入: import VueScrolle ...

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

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

  6. Synergy 一套键鼠同时控制多台电脑

    百度云(1.5是最后一个免费的版本,linux,mac,windows全有): 链接: https://pan.baidu.com/s/1A_qR8FHd8a0ILQXsSqjfCQ 密码: 9h8c

  7. 在论坛中出现的比较难的sql问题：26(动态行专列+合并字符串、补足行数)

    原文:在论坛中出现的比较难的sql问题:26(动态行专列+合并字符串.补足行数) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所 ...

  8. .NetCore/ .NetFramework 机制

    1.每来一个请求,会启动一个线程. 可以通过下面代码打印出来. 这个线程是主线程,如果用异步,会等待异步线程执行完毕才会返回. 这有个现象,用stmp 发邮件的时候,即使用异步,也会比较卡(选用的邮件 ...

  9. vue-cli 运行打开浏览器

    在配置好项目之后的package.json文件中,找到运行的script,其中“serve”中增加配置“ --open” "scripts": { "serve" ...

  10. java 原子操作(1) CAS

    在 java 多线程编程中经常说的就是:“原子操作(atomic operation) 不需要 synchronized”. 原子操作指的是不会被线程调度机制打断的操作:这种操作一旦开始,就一直运行到 ...