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 DOM学习第一章 W3C DOM简介
Feb 19 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
JavaScript制作简单的框选图表
May 15 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
Vue详细的入门笔记
May 10 Vue.js
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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
js中function()使用方法
2013/12/24 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
用Python输出一个杨辉三角的例子
2014/06/13 Python
python中pass语句用法实例分析
2015/04/30 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
python实现web方式logview的方法
2015/08/10 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
python按照多个条件排序的方法
2019/02/08 Python
简单分析python的类变量、实例变量
2019/08/23 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
社区安全温馨提示语
2015/07/14 职场文书
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL