原生JavaScript實現(xiàn)隨機點名表
更新時間：2021年01月14日 08:37:26 作者：棟棟很優(yōu)秀啊
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實現(xiàn)隨機點名表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript隨機點名表的具體代碼，供大家參考，具體內(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)管","社會辰哥","渣男","雪","寶貝曼","大個","睡神","龍爺","英兒","東北娃","珂珂","黃花大閨女","狗蛋","狗子","天嬌","志強","晉瑋","海濤","邁姐","新鳳","環(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詳解，它是一套專注于微信小程序的企業(yè)級開發(fā)范式，它的愿景是：讓企業(yè)級的微信小程序項目中的代碼，更加簡單、漂亮,需要的朋友可以參考下2019-07-07
在本篇文章里小編給大家整理的是關(guān)于JS如何阻止事件冒泡的相關(guān)知識點內(nèi)容，有需要的朋友們可以學(xué)習(xí)下。2019-08-08
javascript框架設(shè)計讀書筆記之字符串的擴展和修復(fù)
本文是司徒正美的《javascript框架設(shè)計》的第三章第一節(jié)的讀書筆記，簡單介紹了javascript字符串的擴展和修復(fù)，小伙伴們參考下吧2014-12-12
dateformat.js 是一個非常簡潔、輕量級、不到 5kb 的很簡潔的 Javascript 庫,本文主要介紹了dateformat.js超輕量級的JS日期處理庫的使用,感興趣的可以了解一下2023-12-12
最近有很多朋友問我，為什么點擊彈出的i總是最后一個，于是抽時間寫了這篇文章，特此分享到腳本之家平臺，供大家參考2016-01-01
這篇文章主要介紹了js判斷當(dāng)前瀏覽器類型,判斷IE瀏覽器方法,需要的朋友可以參考下2014-06-06
在微信小程序中使用 Flexbox 布局時,如果遇到 flex-grow 屬性無效的情況,可能是由幾個不同的原因?qū)е碌?以下是一些可能的原因和解決方案,感興趣的朋友一起看看吧2024-08-08
相信大家在web項目中，經(jīng)常會用到j(luò)avascript的事件監(jiān)聽、事件冒泡這些東西。當(dāng)然也包括window.opener,window.showModalDialog這些父子窗口的互操作。2010-06-06
這篇文章主要為大家詳細(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