原生js实现随机点名


Posted in Javascript onJuly 05, 2020

本文实例为大家分享了js实现随机点名的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>随机点名</title>
</head>

<body>
 <h1 class="name" id="names">点名</h1>
 <input type="button" value="开始" id=start_btn>
 <input type="button" value="结束" id=stop_btn disabled>
 <script>"../DOM/tools.js"</script>
 <script>
  let arrName = ["肖巍", "杨恩", "小菊花", "二狗", "小强", "小????", "弯弯姐", "陈锴", "徐阳", "陈阳吉", "张胜江", "我", "波哥", "阿汤哥", "杰哥", "薛老板"];
  let names = document.querySelector("h1");
  let start_btn = document.querySelector("#start_btn");
  let stop_btn = document.querySelector("#stop_btn");
  let i, timer; 

  function creatRandom(min, max) {
   if (!max) {
    [max, min] = [min, 0];
   }
   let number = parseInt(Math.random() * (max - min + 1) + min);
   return number;
  }
  start_btn.onclick = function () {
   stop_btn.disabled ? stop_btn.disabled = false : stop_btn.disabled = true;
   start_btn.disabled ? start_btn.disabled = false : start_btn.disabled = true;
   timer = setInterval(() => {
    i = creatRandom(0, arrName.length - 1);
    names.innerHTML = arrName[i];
   }, 100);
  };
  stop_btn.onclick = function () {
   stop_btn.disabled ? stop_btn.disabled = false : stop_btn.disabled = true;
   start_btn.disabled ? start_btn.disabled = false : start_btn.disabled = true;
   console.log(arrName [i]);
   clearInterval(timer);
   arrName.splice(i, 1);
   if(!arrName.length){
    start_btn.disabled=true;
    stop_btn.disabled=true;
    names.innerHTML = "抽奖完毕";
   }
  };
 </script>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
实例讲解JavaScript 计时事件
Jul 04 #Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 #Javascript
详解Vue.js 响应接口
Jul 04 #Javascript
JavaScript中数组去重的5种方法
Jul 04 #Javascript
JS制作简易计算器的实例代码
Jul 04 #Javascript
基于原生js实现九宫格算法代码实例
Jul 03 #Javascript
JavaScript DOM常用操作代码汇总
Jul 03 #Javascript
You might like
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
简述php环境搭建与配置
2016/12/05 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
Python Trie树实现字典排序
2014/03/28 Python
python使用PyFetion来发送短信的例子
2014/04/22 Python
Python中的localtime()方法使用详解
2015/05/22 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
酒店管理毕业生自荐信
2013/10/24 职场文书
绿色环保演讲稿
2014/05/10 职场文书
委托书的写法
2014/08/30 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
行政主管岗位职责
2015/02/03 职场文书
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python