JS實現(xiàn)隨機點名系統(tǒng)
更新時間：2021年04月02日 11:05:12 作者：乘風破浪的程序媛
這篇文章主要為大家詳細介紹了JS實現(xiàn)隨機點名系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
用JS實現(xiàn)一個隨機點名系統(tǒng)，供大家參考，具體內容如下
每次上課前10分鐘，老師都會叫我們回答問題，奈何每次都是點學號，好像每次我都能中獎，我直接跟老師提議，老師，我用來JS來幫你寫個隨機點名的系統(tǒng)吧！這樣就不會每次都抽到我了，哈哈
先看效果：
代碼如下：
<!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">開始</button>
<button id="box2">結束</button>
<span id="box">Tom</span>
<script>
//獲取頁面中的元素
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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
?js中toString()函數(shù)與valueOf()函數(shù)使用與區(qū)別
在等于運算符中，如果比較的內容包含對象類型數(shù)據(jù)，則會涉及隱式轉換，那么就會調用toString()函數(shù)和valueOf()函數(shù)，本文主要介紹了?js中toString()函數(shù)與valueOf()函數(shù)使用與區(qū)別，感興趣的可以了解一下2022-04-04
這篇文章主要介紹了微信小程序使用radio顯示單選項功能,涉及針對radio組件事件響應相關操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
JavaScript平鋪數(shù)組轉樹形結構的實現(xiàn)示例
本文主要介紹了JavaScript平鋪數(shù)組轉樹形結構的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要為大家詳細介紹了微信小程序tabBar底部導航中文注解api，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
js通過var定義全局變量與在window對象上直接定義屬性的區(qū)別說明
這篇文章主要介紹了js通過var定義全局變量與在window對象上直接定義屬性的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
對于沒有中劃線的css屬性一般直接使用style.屬性名即可，對于含有中劃線的css屬性，將每個中劃線去掉并將每個中劃線后的第一個字符換成大寫即可，感興趣的朋友可以參考下2013-09-09
這篇文章主要介紹了Object.keys?詭異特性示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
下面小編就為大家?guī)硪黄狽odeJS的Promise的用法解析。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-05-05
這篇文章主要介紹了js實現(xiàn)按鈕控制圖片360度翻轉特效的方法,涉及HTML5中canvas方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了基于JS實現(xiàn)頁面懸浮框的實例代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12