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 AJAX 框架的使用方法
Nov 03 Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
JavaScript中伪协议 javascript:使用探讨
Jul 18 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 Javascript
js+html实现周岁年龄计算器
Jun 25 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 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 时间转换Unix时间戳代码
2010/01/22 PHP
php 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
php cli配置文件问题分析
2015/10/15 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
工商治理实习生的自我评价
2014/01/15 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
政风行风评议心得体会
2014/10/21 职场文书
庆六一开幕词
2015/01/29 职场文书
辞职信范文大全
2015/03/02 职场文书
PHP新手指南
2021/04/01 PHP
Minikube搭建Kubernetes集群
2022/03/31 Servers
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python