原生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中通过URL传递汉字的方法
Apr 09 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 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中批量替换文件名的实现代码
2011/07/20 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
网页中的图片的处理方法与代码
2009/11/26 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
js实现筛选功能
2020/11/24 Javascript
用Python给文本创立向量空间模型的教程
2015/04/23 Python
python提取字典key列表的方法
2015/07/11 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
Python模块包中__init__.py文件功能分析
2016/06/14 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
任意存:BOXFUL
2018/05/21 全球购物
广告学专业推荐信范文
2013/11/23 职场文书
仓库管理员岗位职责
2014/03/19 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
鉴史问廉观后感
2015/06/10 职场文书
交通安全教育主题班会
2015/08/12 职场文书
行为习惯主题班会
2015/08/14 职场文书
2019新员工心得体会
2019/06/25 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
golang正则之命名分组方式
2021/04/25 Golang
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技