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 相关文章推荐
DOM 中的事件处理介绍
Jan 18 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
three.js实现圆柱体
Dec 30 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
点评山进PR-D3L三波段收音机
2021/03/02 无线电
php实现mysql数据库操作类分享
2014/02/14 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
文本加密解密
2006/06/23 Javascript
phpwind放自动注册方法
2006/12/02 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
详解如何使用webpack打包JS
2018/06/21 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
python函数的5种参数详解
2017/02/24 Python
Python自动生产表情包
2017/03/17 Python
python http接口自动化脚本详解
2018/01/02 Python
Python之reload流程实例代码解析
2018/01/29 Python
python如何读写csv数据
2018/03/21 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
PyTorch基本数据类型(一)
2019/05/22 Python
Python自动抢红包教程详解
2019/06/11 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
行政总监岗位职责
2013/12/05 职场文书
函授自我鉴定范文
2014/02/06 职场文书
就业协议书怎么填
2014/09/15 职场文书
2014年保密工作总结
2014/11/22 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
实例详解Python的进程,线程和协程
2022/03/13 Python
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js