• 售前

  • 售后

热门帖子
入门百科

js实现随机点名

[复制链接]
大圆镜2015 显示全部楼层 发表于 2021-10-25 19:44:06 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了js实现随机点名的详细代码,供各人参考,详细内容如下

代码:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8.   div:nth-child(1) {
  9.    width: 200px;
  10.    height: 100px;
  11.    background-color: burlywood;
  12.    text-align: center;
  13.    line-height: 100px;
  14.   }
  15.   
  16.   div:nth-child(2) {
  17.    width: 100px;
  18.    height: 100px;
  19.    background-color: pink;
  20.    border-radius: 50%;
  21.    text-align: center;
  22.    line-height: 100px;
  23.   }
  24. </style>
  25. </head>
  26. <body>
  27. <div>刘志远</div>
  28. <div>开始</div>
  29. <script>
  30.   var div = document.getElementsByTagName('div');
  31.   var btn = document.getElementsByTagName('button')[0];
  32.   username()
  33.   function username() {
  34.    var flag = false;
  35.    var timerId = null;
  36.    // console.log(div);
  37.    var arr = ['刘志远', '万策', '李博文', '曹建莹', '张佳祺', '赵瑞瑞', '陈全虎', '胡金朋', '耿建丽', '王如雪', '王振涛', '刘放', '张亚迪', '朱翔煜', '王奥', '薛澳飞', '刘志玮', '胡高洋', '周畅', '赵英杰', '徐亚美', '郑勇超', '闻吉祥', '王阿雨', '陈德帅', '申林益', '赵艳哲', ' 肖梦飞', '鲍尔欣', '代星澳', '汪青', '谢森成', '雷吕能', '丁康宁', '杨泽文', '王永杰', '侯振强',    '马建成', '朱保森', '王皓圆', '孙秀婷', '靳丹丹', '李聪', '纪妍', '苏文璇'];
  38.    div[1].onclick = function() {
  39.     if (flag) {
  40.      clearInterval(timerId);
  41.      div[1].innerHTML = '停止'
  42.      flag = false;
  43.     } else {
  44.      timerId = setInterval(function() {
  45.       var re = Math.floor(Math.random() * arr.length);
  46.       console.log(re);
  47.       div[0].innerHTML = arr[re];
  48.      }, 60);
  49.      div[1].innerHTML = '开始'
  50.      flag = true;
  51.     }
  52.    }
  53.   }
  54. </script>
  55. </body>
  56. </html>
复制代码
以上就是本文的全部内容,盼望对各人的学习有所资助,也盼望各人多多支持草根技能分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作