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

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

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

本文實例為大家分享了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>開始</button>
  <button>停止</button>
 </div>
 <script>
  var h1=document.getElementsByTagName('h1')[0];
  var btn=document.getElementsByTagName("button");
  var arr=["蘇晨旭","張志陽","小明","社會坤哥","藥","敬珍","錦濤","網(wǎng)管","社會辰哥","渣男","雪","寶貝曼","大個","睡神","龍爺","英兒","東北娃","珂珂","黃花大閨女","狗蛋","狗子","天嬌","志強(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>

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

您可能感興趣的文章:

相關(guān)文章

微信小程序的開發(fā)范式BeautyWe.js入門詳解
這篇文章主要介紹了微信小程序的開發(fā)范式BeautyWe.js詳解，它是一套專注于微信小程序的企業(yè)級開發(fā)范式，它的愿景是：讓企業(yè)級的微信小程序項目中的代碼，更加簡單、漂亮,需要的朋友可以參考下
2019-07-07
JS阻止事件冒泡的方法詳解
在本篇文章里小編給大家整理的是關(guān)于JS如何阻止事件冒泡的相關(guān)知識點(diǎn)內(nèi)容，有需要的朋友們可以學(xué)習(xí)下。
2019-08-08
javascript框架設(shè)計讀書筆記之字符串的擴(kuò)展和修復(fù)
本文是司徒正美的《javascript框架設(shè)計》的第三章第一節(jié)的讀書筆記，簡單介紹了javascript字符串的擴(kuò)展和修復(fù)，小伙伴們參考下吧
2014-12-12
dateformat.js超輕量級的JS日期處理庫的使用
dateformat.js 是一個非常簡潔、輕量級、不到 5kb 的很簡潔的 Javascript 庫,本文主要介紹了dateformat.js超輕量級的JS日期處理庫的使用,感興趣的可以了解一下
2023-12-12
JS常見問題之為什么點(diǎn)擊彈出的i總是最后一個
最近有很多朋友問我，為什么點(diǎn)擊彈出的i總是最后一個，于是抽時間寫了這篇文章，特此分享到腳本之家平臺，供大家參考
2016-01-01
js判斷當(dāng)前瀏覽器類型,判斷IE瀏覽器方法
這篇文章主要介紹了js判斷當(dāng)前瀏覽器類型,判斷IE瀏覽器方法,需要的朋友可以參考下
2014-06-06
微信小程序flex-grow無效的解決方案
在微信小程序中使用 Flexbox 布局時,如果遇到 flex-grow 屬性無效的情況,可能是由幾個不同的原因?qū)е碌?以下是一些可能的原因和解決方案,感興趣的朋友一起看看吧
2024-08-08
有道JavaScript監(jiān)聽瀏覽器的問題
相信大家在web項目中，經(jīng)常會用到j(luò)avascript的事件監(jiān)聽、事件冒泡這些東西。當(dāng)然也包括window.opener,window.showModalDialog這些父子窗口的互操作。
2010-06-06
詳解JS如何實現(xiàn)文字溢出時用省略號...顯示
這篇文章主要為大家詳細(xì)介紹了JavaScript如何實現(xiàn)當(dāng)文本內(nèi)容過長時,中間顯示省略號...,兩端正常展示,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-02-02
uniapp開發(fā)小程序的開發(fā)規(guī)范總結(jié)
uni-app 是一個使用 vue.js 開發(fā)跨平臺應(yīng)用的前端框架,下面這篇文章主要給大家介紹了關(guān)于uniapp開發(fā)小程序的開發(fā)規(guī)范,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07