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 学习笔记(六)
Dec 31 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
JS中字符串trim()使用示例
May 26 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
详解从react转职到vue开发的项目准备
Jan 14 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 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概率计算函数汇总
2015/09/13 PHP
PHP实现搜索相似图片
2015/09/22 PHP
各种快递查询--Api接口
2016/04/26 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
使用Python对SQLite数据库操作
2017/04/06 Python
python绘制热力图heatmap
2020/03/23 Python
python获取Linux发行版名称
2019/08/30 Python
python求绝对值的三种方法小结
2019/12/04 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
python实现数字炸弹游戏
2020/07/17 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
试述DBMS的主要功能
2016/11/13 面试题
电气自动化个人求职信范文
2014/02/03 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
公证书标准格式
2014/04/10 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
2016年少先队活动总结
2016/04/06 职场文书
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python