JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名程序

更新時(shí)間：2020年03月25日 17:09:14 作者：Humy.

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名程序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)隨機(jī)點(diǎn)名程序的具體代碼，供大家參考，具體內(nèi)容如下

效果：

錄制的gif效果圖沒那么理想，其實(shí)速度是比這個(gè)快的

思路：

1.定義一個(gè)數(shù)組，存放名單
2.啟動(dòng)定時(shí)器，設(shè)定間隔時(shí)間不斷調(diào)用函數(shù)
3.Math.random()獲取隨機(jī)下標(biāo)，根據(jù)下標(biāo)的隨機(jī)變換取出數(shù)組中對(duì)應(yīng)的元素
4.邏輯代碼完成后，通過DOM對(duì)象把變化的結(jié)果呈現(xiàn)在頁面上

JS代碼：

<script>
var arr = ["唐僧", "孫悟空", "豬八戒", "沙悟凈", "白骨精", "玉皇大帝", "紅孩兒", "白骨精", "太上老君"]

var myTimer = null //定時(shí)器編號(hào)

// 既是啟動(dòng)定時(shí)器的函數(shù)，也是停止定時(shí)器的函數(shù)
function goAndStop(){
 // 如果當(dāng)前沒有定時(shí)器在執(zhí)行，則啟動(dòng)，否則，停止定時(shí)器；
 if(myTimer == null){
  // 啟動(dòng)定時(shí)器，隨機(jī)下標(biāo)，取出名字
  myTimer = setInterval(function(){
   // 1、隨機(jī)下標(biāo)
   var index = parseInt(Math.random()*arr.length)

   // 2、根據(jù)下標(biāo)取出學(xué)生的姓名，顯示在頁面上
   document.getElementById("stuName").innerHTML = arr[index]

  },10);

  //啟動(dòng)定時(shí)器的同時(shí)，改變按鈕狀態(tài)，為下次單擊做準(zhǔn)備
  document.getElementById("btn").value = "停 止"
 }else{
  // 當(dāng)前若有有定時(shí)器在執(zhí)行，則停止定時(shí)器, 恢復(fù)初始狀態(tài)
  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">
   隨機(jī)名單
  </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>

這是我的一些思路，分享給大家！

如果你有更好的方法，歡迎下方留言相互交流！

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: