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 相关文章推荐
Javascript客户端将指定区域导出到Word、Excel的代码
Oct 22 Javascript
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
Immutable 在 JavaScript 中的应用
May 02 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
js实现计算器功能
Aug 10 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
AJAX架构之Dojo篇
2007/04/10 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
jQuery实现查看图片功能
2020/12/01 jQuery
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python Socket之客户端和服务端握手详解
2017/09/18 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
python 异或加密字符串的实例
2018/10/14 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
马智宇婚礼主持词
2014/03/22 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
年会主持人开场白台词
2015/05/29 职场文书
六年级语文教学反思
2016/03/03 职场文书
Python中22个万用公式的小结
2021/07/21 Python
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android
httpclient调用远程接口的方法
2022/08/14 Java/Android