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 form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
什么是JavaScript
Aug 13 Javascript
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
不要使用jQuery触发原生事件的方法
Mar 03 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
数组Array的一些方法(总结)
Feb 17 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
js prototype深入理解及应用实例分析
Nov 25 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框架排名
2013/07/04 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
js 匿名调用实现代码
2009/06/19 Javascript
初识JQuery 实例一(first)
2011/03/16 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
javascript简易画板开发
2020/04/12 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
python fabric实现远程操作和部署示例
2014/03/25 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
C语言50道问题
2014/10/23 面试题
老总助理工作岗位职责
2014/02/06 职场文书
八一慰问活动方案
2014/02/07 职场文书
财务担保书范文
2014/04/02 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
化学专业自荐信
2014/05/28 职场文书
房屋授权委托书范本
2014/10/07 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
客户答谢会致辞
2015/07/30 职场文书
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
java基础——多线程
2021/07/03 Java/Android