JS原生-随机点名

最新推荐文章于 2023-06-14 12:07:57 发布

贝茵斯都

最新推荐文章于 2023-06-14 12:07:57 发布

阅读量117

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_40532650/article/details/115320899

版权

javascript 专栏收录该内容

47 篇文章 1 订阅

订阅专栏

<!--
 * @name: 
 * @author: wuxd
 * @Date: 2021-03-17 11:10:59
 * @LastEditTime: 2021-03-30 11:14:53
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2 onclick="rands()">随机</h2>
    <!-- <input id="search" value="" readonly="readonly" /> -->
    <span id="search">暂无</span>
    <div id="seconds">3</div>
  </body>
  <script>
    var stuList = [
      { name: "赵照昭", code: "000" },
      { name: "钱迁倩", code: "001" },
      { name: "孙笋狲", code: "002" },
      { name: "李黎立", code: "003" },
      { name: "周洲舟", code: "004" },
      { name: "吴武伍", code: "005" },
      { name: "郑正证", code: "006" },
      { name: "王网望", code: "007" },
      { name: "冯风峰", code: "008" },
      { name: "陈琛臣", code: "009" },
      { name: "褚楚初", code: "010" },
      { name: "卫魏威", code: "011" },
      { name: "蒋江匠", code: "012" },
      { name: "沈慎神", code: "013" },
      { name: "韩含汉", code: "014" },
      { name: "杨阳洋", code: "015" },
      { name: "朱珠柱", code: "016" },
      { name: "秦琴秦", code: "017" },
      { name: "尤优游", code: "018" },
      { name: "许须旭", code: "019" },
    ];
    var inps = document.getElementById("search");
    var seconds = document.getElementById("seconds");
    var stuNum = stuList.length;
    //random-包含0;不包含1;
    //parseInt-取整
    var timer = null;
    var timers = null;
    function rands() {
      //名称变化
      timer = setInterval(() => {
        var randNum = parseInt(Math.random() * stuNum); //对应下标0~length-1
        var value = stuList[randNum].name;
        // inps.value = value;
        inps.innerHTML = value;
      }, 50);
      //倒计时
      timers = setInterval(() => {
        seconds.innerHTML = Number(seconds.innerText) - 1;
      }, 1000);
      //时间截止-倒计时复位
      setTimeout(() => {
        if (timer) {
          clearInterval(timer);
        }
        if (timers) {
          clearInterval(timers);
        }
        seconds.innerHTML = 3;
      }, 3 * 1000);
    }
  </script>
</html>

贝茵斯都

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS原生-随机点名

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content.
复制链接

扫一扫