标签： 案例

功能：

• 点击开始按钮开始随机点名
• 点击结束按钮抽取一个名字，并把抽到的名字删除
• 直到抽到最后一个人，弹出重新开始按钮和“抽完了”提示文字

HTML部分

<div class="box">
<h3>随机点名</h3>
<p>幸运儿：<span class="luckyman"></span></p>
<p class="alert">抽完啦</p>
<div class="btn">
<button class="start">开始</button>
<button class="end" disabled>结束</button>
<button class="reopen">重新开始</button>
</div>
</div>

CSS部分

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  color: #333;
}
.box {
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  margin: 3vw auto 0;
  height: 40vw;
  border-top: 0.6667vw solid #333;
  border-bottom: 0.6667vw solid #333;
}
.box h3 {
  font-size: 4vw;
}
.box p {
  font-size: 2.9333vw;
}
.box p span {
  display: inline-block;
  min-width: 6.6667vw;
  max-width: 20vw;
  border-bottom: 0.4vw solid #333;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.btn button {
  width: 13.3333vw ;
  height: 5.3333vw;
  font-size: 2.4vw;
  border: 0.2667vw solid #333;
  margin: 0 1.3333vw;
  background: none;
  cursor: pointer;
}
button:disabled {
  color: #999;
  border: 0.2667vw solid #999;
  cursor: default;
}
.reopen {
  display: none;
}
.alert {
  display: none;
}

JS部分

// 获取M-N之间的随机数
let random = function (m, n) {
  let rNum = 0
  rNum = Math.floor(Math.random() * (m - n + 1) + n) //m - n + 1 向下取整，所以
  return rNum
}
// 随机名字函数
let i = 0
let nameArr = ["rose", "cool", "tony", "Liao", "Q"]
let text = document.querySelector(".luckyman")
let rName = function () {
  i = random(nameArr.length - 1, 0)
  let name = nameArr[i]
  text.innerHTML = name
}
//按钮事件绑定
let start = document.querySelector(".start")
let end = document.querySelector(".end")
let reopen = document.querySelector(".reopen")
let alert1 = document.querySelector(".alert")
start.addEventListener("click", function () {
  //开启定时器
  t = setInterval(rName, 50)
  start.disabled = true
  end.disabled = false
  if (nameArr.length === 1) {
    start.disabled = true
    end.disabled = true
    alert1.style.display = "block"
    reopen.style.display = "inline-block"
    clearInterval(t)
  }
})
end.addEventListener("click", function () {
  //结束定时器
  clearInterval(t)
  start.disabled = false
  end.disabled = true
  //在数组删除被选中的名字
  nameArr.splice(i, 1)
})
//重新开始
reopen.addEventListener("click", function () {
  nameArr = ["rose", "cool", "tony", "Liao", "Q"]
  start.disabled = false
  alert1.style.display = "none"
  text.innerHTML = ""
  reopen.style.display = ""
  
})