梅子的網際網路學習歷程
JavaScript 打散 + 排序「抽球機視窗 + 動畫」練習頁
← 回首頁

打散 + 由小到大/由大到小排序|抽球機動畫版

想像你在玩樂透抽球:先把一串號碼丟進抽球機,按下按鈕後球會在機器裡「咕嚕咕嚕」亂滾,最後停下來顯示結果。

練習重點:陣列複製、Fisher-Yates 洗牌、Array.sort() 比較函式,以及用 setInterval 做簡單動畫效果。

樂透抽球機

Step 1:輸入號碼,啟動抽球機

請輸入一串數字,例如:8, 3, 15, 2, 10,可以用逗號或空白分隔。

小提醒:系統會自動把文字轉成數字,若有錯字(例如「三」),會跳出提示。
2. 原始順序 輸入時的順序
3. 打散後順序(洗牌結果) 抽球機打亂後
4. 由小到大排序 升冪(最小 → 最大)
5. 由大到小排序 降冪(最大 → 最小)
提醒:如果沒有提供比較函式,Array.sort() 會把數字當「字串」排序, 例如 [2, 13, 6] 排完會變成 [13, 2, 6]。 正確寫法是:nums.sort((a, b) => a - b)b - a
延伸作業題目(可以給學生練習):
  • 把抽球機的顏色改成自己班級的代表色,或改成「彩虹球」、「單色球」主題。
  • 調整動畫時間與速度,讓抽球機滾比較久或比較快。
  • 加上「只重新洗牌」按鈕,每次點擊只重新打散,不重新讀取輸入欄位。