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