原生JavaScript实现随机点名表


Posted in Javascript onJanuary 14, 2021

本文实例为大家分享了JavaScript随机点名表的具体代码,供大家参考,具体内容如下

效果:

原生JavaScript实现随机点名表

代码:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  .box{
  width:300px;
  height:200px;
  border:1px solid #ccc;
  /*position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin: auto;*/
  margin: 100px auto;
  text-align: center;
  }
  h1{
  width:150px;
  height:60px;
  line-height: 60px;
  text-align: center;
  font-size: 30px;
  background-color: red;
  margin: 10px auto;
  }
  button{
  width:100px;
  height:40px;
  background-color: dodgerblue;
  border:0;
  font-size: 24px;
  color:#fff;
  }
  
  
 </style>
 </head>
 <body>
 <div class="box">
  <h1></h1>
  <button>开始</button>
  <button>停止</button>
 </div>
 <script>
  var h1=document.getElementsByTagName('h1')[0];
  var btn=document.getElementsByTagName("button");
  var arr=["苏晨旭","张志阳","小明","社会坤哥","药","敬珍","锦涛","网管","社会辰哥","渣男","雪","宝贝曼","大个","睡神","龙爷","英儿","东北娃","珂珂","黄花大闺女","狗蛋","狗子","天娇","志强","晋玮","海涛","迈姐","新凤","环姐","二狗"];
  
  var ind=ranFun(0,arr.length-1)
  
  h1.innerHTML=arr[ind];
  var timer;
  btn[0].onclick=function(){
  clearInterval(timer)
  timer=setInterval(function(){
   h1.innerHTML=arr[ranFun(0,arr.length-1)]
  },100)
  }
  
  btn[1].onclick=function(){
  clearInterval(timer)
  }
  
  function ranFun(a,b){
  return Math.floor(Math.random()*(b-a+1)+a)
  }
 </script>
 </body>
</html>

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

Javascript 相关文章推荐
javascript延时加载之defer测试
Dec 28 Javascript
jquery实现submit提交表单
Feb 03 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 Javascript
vue获取data数据改变前后的值方法
Nov 07 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
vue动态设置路由权限的主要思路
Jan 13 #Vue.js
Java 生成随机字符的示例代码
Jan 13 #Javascript
vue组件是如何解析及渲染的?
Jan 13 #Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 #Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 #Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 #Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 #Vue.js
You might like
php中的三元运算符使用说明
2011/07/03 PHP
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
PHP If Else(elsefi) 语句
2013/04/07 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
Vue自定义指令详解
2017/07/28 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
Python切片用法实例教程
2014/09/08 Python
python运行时间的几种方法
2016/06/17 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
python中lambda()的用法
2017/11/16 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
学前班评语大全
2014/05/04 职场文书
购房意向书
2014/08/30 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2015年小学开学寄语
2015/02/27 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL
tree shaking对打包体积优化及作用
2022/07/07 Java/Android