JSFiddle - React, Tailwind, and code Playground

by rolence0515

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隨機選號動畫效果</title>
<style>
  body { text-align: center; margin-top: 20px; }
  .ball-container { display: flex; flex-wrap: wrap; justify-content: center; }
  .ball { width: 30px; height: 30px; border-radius: 50%; background-color: lightblue; color: black; display: flex; justify-content: center; align-items: center; margin: 5px; cursor: pointer; transition: transform 0.5s ease; }
  .highlight { background-color: yellow; }
  .disabled { background-color: grey; cursor: default; }
  #result { margin-top: 20px; display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; background-color: white; padding: 20px; border: 2px solid black; }
  #winningMessage { font-size: 24px; /* Larger text */ }
  #confirmButton { display: block; margin-top: 20px; }
  .big { transform: scale(3); position: fixed; top: 50%; left: 50%; z-index: 999; transition: transform 0.5s ease; }
</style>
</head>
<body>

<div id="practice-selector-container">
    <input type="text" id="new-practice-name" placeholder="新增練習名稱">
    <button id="add-practice">新增練習</button>
    <select id="practice-selector">
        <option selected disabled>選擇一個練習</option>
    </select>
</div>


<div class="ball-container" id="ball-container"></div>
<button id="start-button">開始</button>
<button id="reset-button">重置</button>

<div id="result">
    <p id="winningMessage"></p>
    <button id="confirmButton">確定</button>
</div>

<audio id="select-sound" src="path/to/your/select.mp3" preload="auto"></audio>
<audio id="winning-sound" src="path/to/your/winning.mp3" preload="auto"></audio>

<script>
// 初始化小球
function initBalls() {
  const container = document.getElementById('ball-container');
  container.innerHTML = ''; // 清空先前的小球
  for (let i = 1; i <= 304; i++) {
    const ball = document.createElement('div');
    ball.className = 'ball';
    ball.textContent = i;
    ball.id = `ball-${i}`;
    container.appendChild(ball);
...