SOURCE

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>随机点名</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{
background:#7c4b38;
color:#fff8ee;
height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
#show{font-size:50px;margin-bottom:40px}
button{
padding:12px 28px;
font-size:18px;
border-radius:10px;
border:none;
margin:0 6px;
}
.start{background:#fff8ee;color:#7c4b38}
.reset{background:#4b3025;color:#fff8ee}
</style>
</head>
<body>
<div id="show">准备抽取</div>
<div>
<button class="start" onclick="run()">开始抽取</button>
<button class="reset" onclick="resetAll()">重置</button>
</div>
<script>
const names=["Daniela","Javier","Vicente","Alberto","María","Alejandra","Inés","Alma","Rosa","Felipe","Laura","Infinita","Rafael","Irene"];
let timer;
let isRun=false;
const box=document.getElementById("show");
function run(){
  if(isRun) return;
  isRun=true;
  let i=0;
  timer=setInterval(()=>{
    let r=Math.floor(Math.random()*names.length);
    box.innerText=names[r];
    i++;
    if(i>30){
      clearInterval(timer);
      isRun=false;
    }
  },70)
}
function resetAll(){
  clearInterval(timer);
  isRun=false;
  box.innerText="准备抽取";
}
</script>
</body>
</html>