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 相关文章推荐
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
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
星际争霸任务指南——虫族
2020/03/04 星际争霸
百度实时推送api接口应用示例
2014/10/21 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
angular.element方法汇总
2015/01/07 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
决策树的python实现方法
2014/11/18 Python
Java及python正则表达式详解
2017/12/27 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
Python装饰器用法实例分析
2019/01/14 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
django列表筛选功能的实现代码
2020/03/27 Python
python之语音识别speech模块
2020/09/09 Python
英语自我介绍演讲稿
2014/09/01 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
销售代理协议书
2014/09/30 职场文书
离婚协议书范文2015
2015/01/26 职场文书
工作报告范文
2019/06/20 职场文书
Oracle使用别名的好处
2022/04/19 Oracle