原生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读取xml
Nov 04 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
vue-cli3+ts+webpack实现多入口多出口功能
May 30 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
three.js显示中文字体与tween应用详析
Jan 04 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
我的论坛源代码(五)
2006/10/09 PHP
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
jQuery select的操作实现代码
2009/05/06 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
jquery图片切换插件
2015/03/16 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
python super的使用方法及实例详解
2019/09/25 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
为什么UNION ALL比UNION快
2016/03/17 面试题
拓展培训心得体会
2014/01/04 职场文书
男女朋友协议书
2014/04/23 职场文书
南京青奥会口号
2014/06/12 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书