JavaScript實現隨機點名程式
阿新 • • 發佈：2020-03-26
本文例項為大家分享了js實現隨機點名程式的具體程式碼，供大家參考，具體內容如下
效果：
錄製的gif效果圖沒那麼理想，其實速度是比這個快的
思路：
1.定義一個數組，存放名單
2.啟動定時器，設定間隔時間不斷呼叫函式
3.Math.random()獲取隨機下標，根據下標的隨機變換取出陣列中對應的元素
4.邏輯程式碼完成後，通過DOM物件把變化的結果呈現在頁面上
JS程式碼：
<script>
var arr = ["唐僧","孫悟空","豬八戒","沙悟淨","白骨精","玉皇大帝","紅孩兒","太上老君"]
var myTimer = null //定時器編號
// 既是啟動定時器的函式，也是停止定時器的函式
function goAndStop(){
// 如果當前沒有定時器在執行，則啟動，否則，停止定時器；
if(myTimer == null){
// 啟動定時器，隨機下標，取出名字
myTimer = setInterval(function(){
// 1、隨機下標
var index = parseInt(Math.random()*arr.length)
// 2、根據下標取出學生的姓名，顯示在頁面上
document.getElementById("stuName").innerHTML = arr[index]
},10);
//啟動定時器的同時，改變按鈕狀態，為下次單擊做準備
document.getElementById("btn").value = "停 止"
}else{
// 當前若有有定時器在執行，則停止定時器,恢復初始狀態
window.clearInterval(myTimer)
myTimer = null
document.getElementById("btn").value = "開 始"
}
}
</script>HTML + CSS + JS 原始碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box{
width:200px;
height: 300px;
margin: 100px auto;
}
#stuName{
width: 100%;
height: 80px;
border: 2px solid gray;
line-height: 80px;
text-align: center;
font-size: 30px;
color:orange;
font-weight: bold;
}
input{
margin-top:30px;
width: 100%;
height: 50px;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="box">
<div id="stuName">
隨機名單
</div>
<input id="btn" type="button" value="開 始" onclick="goAndStop()">
</div>
</body>
</html>
<script>
var arr = ["唐僧","太上老君"]
var myTimer = null
function goAndStop(){
if(myTimer == null){
myTimer = setInterval(function(){
var index = parseInt(Math.random()*arr.length)
document.getElementById("stuName").innerHTML = arr[index]
},10);
document.getElementById("btn").value = "停 止"
}else{
window.clearInterval(myTimer)
myTimer = null
document.getElementById("btn").value = "開 始"
}
}
</script>這是我的一些思路，分享給大家！
如果你有更好的方法，歡迎下方留言相互交流！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。