脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js随机点名表

原生JavaScript实现随机点名表

 更新时间：2021年01月14日 08:37:26   作者：栋栋很优秀啊  
这篇文章主要为大家详细介绍了原生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的三种BOM对象

    JavaScript的三种BOM对象

    这篇文章主要为大家介绍了JavaScript BOM对象，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助<BR>
    2021-12-12
  • js模拟jquery的slide和fadeIn和fadeOut功能

    js模拟jquery的slide和fadeIn和fadeOut功能

    以前用过jquery的slideUp，slideDown，等许多很不错的方法，感觉很容易就能实现页面元素的动画效果！
    2010-07-07
  • 微信小程序访问mysql数据库流程详解

    微信小程序访问mysql数据库流程详解

    日常我们在开发小程序的时候，总是希望把数据提交回数据库进行存储，那在小程序中该如何访问数据库呢？本篇我们就介绍一下具体的思路
    2022-08-08
  • javascript 日期时间 转换的方法

    javascript 日期时间 转换的方法

    javascript 日期时间 转换的方法，需要的朋友可以参考一下
    2013-02-02
  • vue(javaScript)操作字符串的一些常用方法总结

    vue(javaScript)操作字符串的一些常用方法总结

    在平时前端开发中,我们不难发现经常会用到字符串操作,这篇文章主要给大家介绍了关于vue(javaScript)操作字符串的一些常用方法的相关资料,需要的朋友可以参考下
    2024-01-01
  • js 对小数加法精度处理示例说明

    js 对小数加法精度处理示例说明

    javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果，下面为大家介绍下js如何对小数加法精度处理
    2013-12-12
  • 总结28个令人惊艳的JavaScript单行代码

    总结28个令人惊艳的JavaScript单行代码

    JavaScript作为一种强大而灵活的脚本语言,充满了许多令人惊艳的特性,本文将带你探索28个令人惊艳的JavaScript单行代码,展示它们的神奇魅力,感兴趣的同学跟着小编一起来看看吧
    2023-12-12
  • javascript日期格式化方法小结

    javascript日期格式化方法小结

    这篇文章主要介绍了javascript日期格式化方法,实例总结了JavaScript针对日期与时间的格式化操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • JS控件ASP.NET的treeview控件全选或者取消(示例代码)

    JS控件ASP.NET的treeview控件全选或者取消(示例代码)

    本篇文章主要是对JS控件ASP.NET的treeview控件全选或者取消的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • layui select获取自定义属性方法

    layui select获取自定义属性方法

    今天小编就为大家分享一篇layui select获取自定义属性方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08

最新评论