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 相关文章推荐
JavaScript定时器详解及实例
Aug 01 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
javascript常用方法总结
May 14 Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 Javascript
svg动画之动态描边效果
Feb 22 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
谈谈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
Discuz! Passport 通行证整合
2008/03/27 PHP
php cookies中删除的一般赋值方法
2011/05/07 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
vue集成chart.js的实现方法
2019/08/20 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
Python验证企业工商注册码
2015/10/25 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
全神贯注教学反思
2014/02/03 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
经典公益广告词
2014/03/13 职场文书
文明社区申报材料
2014/08/21 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
深入理解python协程
2021/06/15 Python