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中使用&quot;with&quot;语句中跨frame的变量引用问题
Mar 08 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
React服务端渲染原理解析与实践
Mar 04 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 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
php中实现可以返回多个值的函数实例
2015/03/21 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
Vue响应式原理详解
2017/04/18 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
vuex存值与取值的实例
2019/11/06 Javascript
python3爬取淘宝信息代码分析
2018/02/10 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
JSF界面控制层技术
2013/06/17 面试题
生物制药毕业生自荐信
2013/10/16 职场文书
写好自荐信的技巧
2013/11/08 职场文书
职业生涯规划设计步骤
2014/01/12 职场文书
房地产活动策划方案
2014/05/14 职场文书
大学生村官个人总结
2015/02/15 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
python基础入门之字典和集合
2021/06/13 Python
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android