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 上下滚动广告
Jun 17 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
jQuery图片的展开和收缩实现代码
Apr 16 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
快速入门Vue
Dec 19 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 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
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
php常用字符函数实例小结
2016/12/29 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
Python中单、双下划线的区别总结
2017/12/01 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
params有什么用
2016/03/01 面试题
敬老院标语
2014/06/27 职场文书
医院合作意向书范本
2015/05/08 职场文书