js实现随机点名


Posted in Javascript onJanuary 19, 2021

本文实例为大家分享了js实现随机点名的具体代码,供大家参考,具体内容如下

js实现随机点名

代码:

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  div:nth-child(1) {
   width: 200px;
   height: 100px;
   background-color: burlywood;
   text-align: center;
   line-height: 100px;
  }
  
  div:nth-child(2) {
   width: 100px;
   height: 100px;
   background-color: pink;
   border-radius: 50%;
   text-align: center;
   line-height: 100px;
  }
 </style>
</head>
 
<body>
 <div>刘志远</div>
 <div>开始</div>
 <script>
  var div = document.getElementsByTagName('div');
  var btn = document.getElementsByTagName('button')[0];
  username()
 
  function username() {
   var flag = false;
   var timerId = null;
   // console.log(div);
   var arr = ['刘志远', '万策', '李博文', '曹建莹', '张佳祺', '赵瑞瑞', '陈全虎', '胡金朋', '耿建丽', '王如雪', '王振涛', '刘放', '张亚迪', '朱翔煜', '王奥', '薛澳飞', '刘志玮', '胡高洋', '周畅', '赵英杰', '徐亚美', '郑勇超', '闻吉祥', '王阿雨', '陈德帅', '申林益', '赵艳哲', ' 肖梦飞', '鲍尔欣', '代星澳', '汪青', '谢森成', '雷吕能', '丁康宁', '杨泽文', '王永杰', '侯振强',    '马建成', '朱保森', '王皓圆', '孙秀婷', '靳丹丹', '李聪', '纪妍', '苏文璇'];
 
   div[1].onclick = function() {
 
    if (flag) {
     clearInterval(timerId);
     div[1].innerHTML = '停止'
     flag = false;
    } else {
     timerId = setInterval(function() {
      var re = Math.floor(Math.random() * arr.length);
      console.log(re);
      div[0].innerHTML = arr[re];
     }, 60);
     div[1].innerHTML = '开始'
     flag = true;
    }
 
 
   }
  }
 </script>
</body>
 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。 

Javascript 相关文章推荐
js实现的网页颜色代码表全集
Jul 17 Javascript
JavaScript 函数调用规则
Sep 14 Javascript
JS 文件大小判断的实现代码
Apr 07 Javascript
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 Javascript
js实现有趣的倒计时效果
Jan 19 #Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 #Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 #Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 #Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 #Vue.js
js数组的基本使用总结
Jan 18 #Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 #Javascript
You might like
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
vue服务端渲染的实例代码
2017/08/28 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
用实例说明python的*args和**kwargs用法
2013/11/01 Python
python实现ipsec开权限实例
2014/11/11 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
环境科学专业大学生自荐信格式
2013/09/21 职场文书
市场营销专业个人求职信范文
2013/12/14 职场文书
社区工作者思想汇报
2014/01/13 职场文书
授权委托书范本
2014/04/03 职场文书
小学国庆节活动总结
2015/03/23 职场文书
2015年资料员工作总结
2015/04/25 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python