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 24 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
用ES6写全屏滚动插件的示例代码
May 02 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 09 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 array_walk() 数组函数
2011/07/12 PHP
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
python根据出生日期获得年龄的方法
2015/03/31 Python
Python中is与==判断的区别
2017/03/28 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
Python接口测试结果集实现封装比较
2020/05/01 Python
python如何查看网页代码
2020/06/07 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
人事主管的岗位职责
2013/11/16 职场文书
个人委托书范本
2014/04/02 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
python 解决微分方程的操作(数值解法)
2021/05/26 Python
什么是Python装饰器?如何定义和使用?
2022/04/11 Python