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 相关文章推荐
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
jquery仿微信聊天界面
May 06 jQuery
JS实现的随机排序功能算法示例
Jun 09 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
vue 中的 render 函数作用详解
Feb 28 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 adodb介绍
2009/03/19 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中文件遍历的两种方法
2014/06/16 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
django 常用orm操作详解
2017/09/13 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
Python切片操作深入详解
2018/07/27 Python
Django中的forms组件实例详解
2018/11/08 Python
python实现简单图书管理系统
2019/11/22 Python
用python实现学生管理系统
2020/07/24 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
内容编辑个人求职信
2013/12/10 职场文书
工作失误检讨书范文大全
2014/01/13 职场文书
2014年领班工作总结
2014/11/25 职场文书
干部理论学习心得体会
2016/01/21 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers