Generate random food choice as countdown

HTML

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>版本8 - 速度漸慢抽籤</title>
<style>
  body { font-family: sans-serif; text-align: center; padding-top: 40px; }
  h2 { margin-bottom: 20px; }
  #result {
    font-size: 2.5em;
    color: #2c3e50;
    margin: 30px;
    border: 2px dashed #2c3e50;
    padding: 20px;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  button {
    padding: 10px 25px;
    font-size: 1.2em;
    cursor: pointer;
  }
</style>
</head>
<body>

<h2>今天中午吃什麼？</h2>
<div id="result">???</div>
<button onclick="startDraw()">開始抽籤</button>

<script>
const foods = ["壽司","牛排","滷肉飯","火鍋","拉麵","炸雞"];
let delay = 50; // 起始速度(毫秒)
let spinning = false;

function spin() {
  const pick = foods[Math.floor(Math.random() * foods.length)];
  document.getElementById("result").innerText = pick;

  // 當 delay < 400 時持續增加延遲 => 速度慢下來
  if (delay < 400) {
    delay += 20;  // 每次加大間隔
    setTimeout(spin, delay);
  } else {
    spinning = false;
    delay = 50; // 下次重新開始時歸零
  }
}

function startDraw() {
  if (!spinning) {
    spinning = true;
    delay = 50;
    spin();
  }
}
</script>

</body>
</html>