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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
網(wǎng)站頁面自動跳轉實現(xiàn)方法PHP、JSP（上）
自動轉向，也叫自動重定向。自動跳轉，指當訪問用戶登陸到某網(wǎng)站時，自動將用戶轉向其它網(wǎng)頁地址的一種技術。轉向的網(wǎng)頁地址可以是網(wǎng)站內的其它網(wǎng)頁，也可以是其它網(wǎng)站。2010-08-08
今天小編就為大家分享一篇layer.js open 隱藏滾動條的例子，具有很好的參考價值，希望對大家有所幫助。 一起跟隨小編過來看看吧2019-09-09
本篇文章主要介紹了使用webpack-dev-server處理跨域請求的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要為大家介紹了一道關于JavaScript變量作用域的面試題，如何解決這道面試題，感興趣的小伙伴們可以參考一下2016-03-03
本文主要介紹了js實現(xiàn)樓層導航功能的示例，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
javascript iframe編程相關代碼，對于熟練操作iframe的朋友有很大的幫助。2009-12-12
javascript動畫對象支持加速、減速、緩入、緩出的實現(xiàn)代碼
javascript動畫對象支持加速、減速、緩入、緩出的實現(xiàn)代碼，需要的朋友可以參考下2012-09-09
這篇文章主要介紹了webpack的CSS加載器的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
在javascript中使用com組件的簡單實現(xiàn)方法
下面小編就為大家?guī)硪黄趈avascript中使用com組件的簡單實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-08-08
由 John Resig 的 How JavaScript Timers Work 可以知道，現(xiàn)有的 JavaScript 引擎是單線程處理任務的。它把任務放到隊列中，不會同步去執(zhí)行，必須在完成一個任務后才開始另外一個任務。2008-05-05