原生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 相关文章推荐
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
Ajax同步与异步传输的示例代码
Nov 21 Javascript
JavaScript检测鼠标移动方向的方法
May 22 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
微信小程序之前台循环数据绑定
Aug 18 Javascript
React Native自定义控件底部抽屉菜单的示例
Feb 08 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 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扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
js 事件小结 表格区别
2007/08/13 Javascript
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
js tab效果的实现代码
2009/12/26 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
jQuery垂直多级导航菜单代码分享
2015/08/18 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
Django实现图片文字同时提交的方法
2015/05/26 Python
python处理二进制数据的方法
2015/06/03 Python
Python验证码识别的方法
2015/07/10 Python
Ubuntu下安装PyV8
2016/03/13 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python多线程同步之文件读写控制
2021/02/25 Python
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
入党自我评价优缺点
2014/01/25 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
市场总监岗位职责
2015/02/11 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js