JS實(shí)現(xiàn)隨機(jī)點(diǎn)名系統(tǒng)
更新時(shí)間：2021年04月02日 11:05:12 作者：乘風(fēng)破浪的程序媛
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)隨機(jī)點(diǎn)名系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
用JS實(shí)現(xiàn)一個(gè)隨機(jī)點(diǎn)名系統(tǒng)，供大家參考，具體內(nèi)容如下
每次上課前10分鐘，老師都會(huì)叫我們回答問(wèn)題，奈何每次都是點(diǎn)學(xué)號(hào)，好像每次我都能中獎(jiǎng)，我直接跟老師提議，老師，我用來(lái)JS來(lái)幫你寫(xiě)個(gè)隨機(jī)點(diǎn)名的系統(tǒng)吧！這樣就不會(huì)每次都抽到我了，哈哈
先看效果：
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="box1">開(kāi)始</button>
<button id="box2">結(jié)束</button>
<span id="box">Tom</span>
<script>
//獲取頁(yè)面中的元素
var btn1 = document.getElementById('box1');
var btn2 = document.getElementById('box2');
var span = document.getElementById('box');
var names = ['Tom', 'Jack', 'Lucy', 'Peter', 'Mark', 'Min', 'Liu', 'Rani'];
var timer;
btn1.onclick = function() {
window.clearInterval(timer);
timer = window.setInterval(countName, 100);
};
btn2.onclick = function() {
window.clearInterval(timer);
};
function countName() {
var index = parseInt(Math.random() * names.length);
span.innerHTML = names[index];
}
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
?js中toString()函數(shù)與valueOf()函數(shù)使用與區(qū)別
在等于運(yùn)算符中，如果比較的內(nèi)容包含對(duì)象類(lèi)型數(shù)據(jù)，則會(huì)涉及隱式轉(zhuǎn)換，那么就會(huì)調(diào)用toString()函數(shù)和valueOf()函數(shù)，本文主要介紹了?js中toString()函數(shù)與valueOf()函數(shù)使用與區(qū)別，感興趣的可以了解一下2022-04-04
微信小程序使用radio顯示單選項(xiàng)功能【附源碼下載】
這篇文章主要介紹了微信小程序使用radio顯示單選項(xiàng)功能,涉及針對(duì)radio組件事件響應(yīng)相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
JavaScript平鋪數(shù)組轉(zhuǎn)樹(shù)形結(jié)構(gòu)的實(shí)現(xiàn)示例
本文主要介紹了JavaScript平鋪數(shù)組轉(zhuǎn)樹(shù)形結(jié)構(gòu)的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序tabBar底部導(dǎo)航中文注解api，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
js通過(guò)var定義全局變量與在window對(duì)象上直接定義屬性的區(qū)別說(shuō)明
這篇文章主要介紹了js通過(guò)var定義全局變量與在window對(duì)象上直接定義屬性的區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
對(duì)于沒(méi)有中劃線的css屬性一般直接使用style.屬性名即可，對(duì)于含有中劃線的css屬性，將每個(gè)中劃線去掉并將每個(gè)中劃線后的第一個(gè)字符換成大寫(xiě)即可，感興趣的朋友可以參考下2013-09-09
這篇文章主要介紹了Object.keys?詭異特性示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
下面小編就為大家?guī)?lái)一篇NodeJS的Promise的用法解析。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-05-05
js實(shí)現(xiàn)按鈕控制圖片360度翻轉(zhuǎn)特效的方法
這篇文章主要介紹了js實(shí)現(xiàn)按鈕控制圖片360度翻轉(zhuǎn)特效的方法,涉及HTML5中canvas方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
基于JS實(shí)現(xiàn)頁(yè)面懸浮框的實(shí)例代碼
這篇文章主要介紹了基于JS實(shí)現(xiàn)頁(yè)面懸浮框的實(shí)例代碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-12-12