原生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 相关文章推荐
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
js实现拉伸拖动iframe的具体代码
Aug 03 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
Angular实现form自动布局
Jan 28 Javascript
JQuery validate插件验证用户注册信息
May 11 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
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
搜索引擎技术核心揭密
2006/10/09 PHP
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
PHP中数组的三种排序方法分享
2012/05/07 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
javascript下string.format函数补充
2010/08/24 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
javascript用rem来做响应式开发
2018/01/13 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
python关于倒排列的知识点总结
2020/10/13 Python
详解python算法常用技巧与内置库
2020/10/17 Python
python链表类中获取元素实例方法
2021/02/23 Python
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
组工干部对照检查材料
2014/08/25 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
安全生产标语大全
2014/10/06 职场文书
公司介绍信范文
2015/01/31 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
MySQL创建定时任务
2022/01/22 MySQL