使用循环定时器setInerval完成案例：随机点名系统

煎饼狗子

已于 2024-08-20 21:44:21 修改

阅读量212

点赞数 6

文章标签：前端 javascript

于 2024-08-20 21:43:19 首次发布

本文链接：https://blog.csdn.net/weixin_53832924/article/details/141369040

版权

js 定时器

setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
setTimeout() ：在指定的毫秒数后调用函数或计算表达式。

示例

    //开启定时器
    var timer = setInterval(function(){
      alert("这是循环定时器")
    },1000)
    //清除定时器
    clearInterval(timer)

实现随机点名案例

html+css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>随机点名系统</title>
    <style>
      body {
        background-color: #cfc;
      }

      .box {
        width: 1000px;
        height: 240px;
        margin: 0 auto;
        margin-top: 100px;
        clear: both;
      }

      #btn {
        width: 100px;
        height: 30px;
        margin-left: 600px;
        margin-top: 50px;
        background-color: pink;
      }

      .name {
        width: 100px;
        height: 30px;
        float: left;
        background-color: antiquewhite;
        margin-left: 10px;
        margin-top: 10px;
        text-align: center;
        line-height: 30px;
      }

      h1 {
        text-align: center;
      }
    </style>
  </head>

  <body>
    <h1>随机点名系统</h1>
    <div class="box" id="box"></div>
    <button id="btn">点名</button>
  </body>

</html>

JavaScript代码

<script>
    //先创建一个数组，模拟后台数据
    var names = [
      "赵修永",
      "胡宏伯",
      "聂哲茂",
      "辛烨烁",
      "蒋德寿",
      "郭飞鹏",
      "冉经赋",
      "余宏茂",
      "仰健柏",
      "焦宏峻",
      "融元忠",
      "桓翰飞",
      "能承颜",
      "班志国",
      "甘泰初",
      "连天巧",
      "邓暄文",
      "范淑颖",
      "詹梓珊",
      "韩春枫",
      "谭贝莉",
      "乜宛儿",
      "胡婷丽",
      "于筠竹",
      "余小溪",
      "景水晶",
      "熊寒香",
      "符飞瑶",
      "贾秀竹",
      "蓟婷旭",
    ];
    //1.创建姓名列表names渲染页面
    names.forEach(function (item, index) {
      //.创建一个元素用于div用于存放姓名列表
      var nameNode = document.createElement("div");
      //写入本文
      nameNode.innerText = item;
      //类名添加
      nameNode.className = "name";
      //在box下插入子元素节点nameNode
      var _box = document.getElementById("box");
      _box.appendChild(nameNode);
    });
    //2.实现点名功能
    var _box = document.getElementById("box");
    var _btn = document.getElementById("btn");
    /*
    开关思想：
    (1)声明一个开关变量(一般默认为true)
    (2)遍历数组,判断每一个元素是否满足条件,遇到不满足修改开关变量为false
       * 遇到满足的不用修改,因为默认就是true
    (3)返回开关变量值

    */
    var flag = true; //按钮的状态， true显示点名，false显示停止
    var timer = null; //将timer提升到全局
    _btn.onclick = function () {
      if (flag) {
        //开启定时器
        timer = setInterval(function () {
          //光标在name列表上随机移动

          //初始化操作
          names.forEach(function (item, index) {
            _box.children[index].style.background = "";
          });
          //索引的随机数获取
          var indexRan = Math.floor(Math.random() * names.length);
          _box.children[indexRan].style.background = "yellow";
        }, 100);
        //修改按钮文字
        this.innerText = "停止";
        flag = false;
      } else {
        //停止点名，清除计时器
        clearInterval(timer);
        //修改按钮文字
        this.innerText = "点名";
        flag = true;
      }
    };
  </script>