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 插件 将this下的div轮番显示
Apr 09 Javascript
jquery构造器的实现代码小结
May 16 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 Javascript
javascript实现避免页面按钮重复提交
Jan 08 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
Nuxt页面级缓存的实现
Mar 09 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
php 数组二分法查找函数代码
2010/02/16 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
Javascript 类型转换方法
2010/10/24 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
解析Python中的二进制位运算符
2015/05/13 Python
在Python的列表中利用remove()方法删除元素的教程
2015/05/21 Python
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
Python WSGI的深入理解
2018/08/01 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
《夹竹桃》教学反思
2014/04/20 职场文书
乳制品整治工作方案
2014/05/29 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
党员年终个人总结
2015/02/14 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
学术研讨会主持词
2015/07/04 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
宝塔更新Python及Flask项目的部署
2022/04/11 Python