js实现简单的随机点名器


Posted in Javascript onSeptember 17, 2020

本文实例为大家分享了js实现简单随机点名器的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  .box {
    width: 200px;
    height: 200px;
    line-height: 200px;
    background-color: #ccc;
    font-size: 30px;
    text-align: center;
  }
  </style>
</head>
<body>
  <div class="box">此乃点名器</div>
  <input type="button" value="点名" id="btn">
  <!-- <button id="btn">点名</button> -->
  <script>
    var btn = document.getElementById("btn");
    var box = document.getElementsByClassName("box")[0];
// 3、写一个随机抽名的案例?(点击按钮开启定时器,
// 定时器中去随机抽取人名,把全班的人放在一个数组中,只要想办法获取随机的索引号就可以)
    btn.onclick = function() {
      if(this.value==="点名") {
      function fn() {
      var arr = ["张三","李四","王五","赵六","黑七","白八","紫九","红薯"];
      var index = parseInt(Math.random()*arr.length);
     var n1 = parseInt(Math.random()*255+1);
     var n2 = parseInt(Math.random()*255+1);
     var n3 = parseInt(Math.random()*255+1);
      box.style.background ="rgb("+n1+","+n2+","+n3+")" ;
      box.innerHTML = arr[index]; 
      } 
      this.value = "停止";
      //定时器不加var声明,涉及到作用域问题  
      timer=setInterval(fn,2);
      }else {
        clearInterval(timer);
        this.value = "点名";
      }
      
    }
 
 
 
 
    </script>
</body>
</html>

效果图如下:

js实现简单的随机点名器

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不同Jquery版本引发的问题解决
Oct 14 Javascript
当json键为数字时的取值方法解析
Nov 15 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
JavaScript实现滑动导航栏效果
Aug 30 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
谈谈JavaScript中的垃圾回收机制
Sep 17 #Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 #Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 #Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 #Javascript
原生js+css实现tab切换功能
Sep 17 #Javascript
vue使用screenfull插件实现全屏功能
Sep 17 #Javascript
Vue使用screenfull实现全屏效果
Sep 17 #Javascript
You might like
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
关于JS解构的5种有趣用法
2019/09/05 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
python基础教程之Hello World!
2014/08/29 Python
Python字符串中查找子串小技巧
2015/04/10 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
django中related_name的用法说明
2020/05/20 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
精神病医院见习报告
2014/11/03 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
离婚案件被告代理词
2015/05/23 职场文书
JavaScript实现两个数组的交集
2022/03/25 Javascript
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers