原生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 相关文章推荐
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
Vue开发环境跨域访问问题
Jan 22 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
实例讲解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
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
php use和include区别总结
2019/10/13 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
python实现的读取网页并分词功能示例
2019/10/29 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
自学考试自我鉴定范文
2013/09/26 职场文书
药学专业大学生个人的自我评价
2013/11/04 职场文书
上课打牌的检讨书
2014/02/15 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
舞蹈专业求职信
2014/06/13 职场文书
文明城市创建标语
2014/06/16 职场文书
中秋晚会活动方案
2014/08/31 职场文书
欢送会主持词
2015/07/01 职场文书
七年级语文教学反思
2016/03/03 职场文书
win7配置本地ftp服务器的图文教程
2022/08/05 Servers