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 相关文章推荐
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
js中的this关键字详解
Sep 25 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
Vue使用NProgress的操作过程解析
Oct 10 Javascript
使用vant的地域控件追加全部选项
Nov 03 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即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
php构造函数与析构函数
2016/04/23 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
Vue异步加载about组件
2017/10/31 Javascript
原生js调用json方法总结
2018/02/22 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
js中的this的指向问题详解
2019/08/29 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
python查看列的唯一值方法
2018/07/17 Python
Python高级property属性用法实例分析
2019/11/19 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
运动会广播稿500字
2014/01/28 职场文书
快餐店的创业计划书范文
2014/01/29 职场文书
岗位职责的构建方法
2014/02/01 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server