快捷導(dǎo)航

原生JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名表

更新時(shí)間：2021年01月14日 08:37:26 作者：棟棟很優(yōu)秀啊

這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript隨機(jī)點(diǎn)名表的具體代碼，供大家參考，具體內(nèi)容如下

效果：

代碼：

<!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>開(kāi)始</button>
  <button>停止</button>
 </div>
 <script>
  var h1=document.getElementsByTagName('h1')[0];
  var btn=document.getElementsByTagName("button");
  var arr=["蘇晨旭","張志陽(yáng)","小明","社會(huì)坤哥","藥","敬珍","錦濤","網(wǎng)管","社會(huì)辰哥","渣男","雪","寶貝曼","大個(gè)","睡神","龍爺","英兒","東北娃","珂珂","黃花大閨女","狗蛋","狗子","天嬌","志強(qiáng)","晉瑋","海濤","邁姐","新鳳","環(huán)姐","二狗"];
  
  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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript的三種BOM對(duì)象
這篇文章主要為大家介紹了JavaScript?BOM對(duì)象，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助<BR>
2021-12-12
js模擬jquery的slide和fadeIn和fadeOut功能
以前用過(guò)jquery的slideUp，slideDown，等許多很不錯(cuò)的方法，感覺(jué)很容易就能實(shí)現(xiàn)頁(yè)面元素的動(dòng)畫(huà)效果！
2010-07-07
微信小程序訪問(wèn)mysql數(shù)據(jù)庫(kù)流程詳解
日常我們?cè)陂_(kāi)發(fā)小程序的時(shí)候，總是希望把數(shù)據(jù)提交回?cái)?shù)據(jù)庫(kù)進(jìn)行存儲(chǔ)，那在小程序中該如何訪問(wèn)數(shù)據(jù)庫(kù)呢？本篇我們就介紹一下具體的思路
2022-08-08
javascript 日期時(shí)間轉(zhuǎn)換的方法
javascript 日期時(shí)間轉(zhuǎn)換的方法，需要的朋友可以參考一下
2013-02-02
vue(javaScript)操作字符串的一些常用方法總結(jié)
在平時(shí)前端開(kāi)發(fā)中,我們不難發(fā)現(xiàn)經(jīng)常會(huì)用到字符串操作,這篇文章主要給大家介紹了關(guān)于vue(javaScript)操作字符串的一些常用方法的相關(guān)資料,需要的朋友可以參考下
2024-01-01
js 對(duì)小數(shù)加法精度處理示例說(shuō)明
javascript的加法結(jié)果會(huì)有誤差，在兩個(gè)浮點(diǎn)數(shù)相加的時(shí)候會(huì)比較明顯。這個(gè)函數(shù)返回較為精確的加法結(jié)果，下面為大家介紹下js如何對(duì)小數(shù)加法精度處理
2013-12-12
總結(jié)28個(gè)令人驚艷的JavaScript單行代碼
JavaScript作為一種強(qiáng)大而靈活的腳本語(yǔ)言,充滿(mǎn)了許多令人驚艷的特性,本文將帶你探索28個(gè)令人驚艷的JavaScript單行代碼,展示它們的神奇魅力,感興趣的同學(xué)跟著小編一起來(lái)看看吧
2023-12-12
javascript日期格式化方法小結(jié)
這篇文章主要介紹了javascript日期格式化方法,實(shí)例總結(jié)了JavaScript針對(duì)日期與時(shí)間的格式化操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-12-12
JS控件ASP.NET的treeview控件全選或者取消(示例代碼)
本篇文章主要是對(duì)JS控件ASP.NET的treeview控件全選或者取消的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
layui select獲取自定義屬性方法
今天小編就為大家分享一篇layui select獲取自定義屬性方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08