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