原生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 的addEventListener()及attachEvent()区别分析
May 21 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
详解微信小程序中组件通讯
Oct 30 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 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
PHP5函数小全(分享)
2013/06/06 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
Thinkphp模板没有解析直接原样输出的解决方法
2014/10/31 Javascript
Javascript实现字数统计
2015/07/03 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
vue  elementUI 表单嵌套验证的实例代码
2019/11/06 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
Python生成随机密码
2015/03/10 Python
Python计算一个文件里字数的方法
2015/06/15 Python
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
Html5定位终极解决方案
2020/02/05 HTML / CSS
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
事业单位竞聘上岗实施方案
2014/03/28 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
大学同学会活动方案
2014/08/20 职场文书
卖房授权委托书样本
2014/10/05 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle