📚 Snake's AI互動式 DOM 學習平台
1. 🔤 修改文字內容
這是原始內容
2. 🎨 改變元素樣式
3. ➕ 新增列表元素
- 初始項目 1
- 初始項目 2
4. 🗑️ 刪除列表元素
5. 👁️ 元素顯示切換
這段文字可透過點擊隱藏或顯示。
6. 🚨 彈出訊息框
7. 改變文字顏色
這段文字的顏色尚未改變
8. 改變字型大小
字型大小範例文字
9. 切換背景顏色
點擊按鈕可以切換整個網頁背景顏色
10. 新增圖片
11. 切換圖片大小
12. 新增CSS類別
13. 移除CSS類別
14. 新增表單欄位值至清單
15. 清空表單欄位
16. 動態產生下拉選單
17. 取得下拉選單選取值
目前尚未顯示選擇結果
18. 顯示滑鼠座標
在下面區域移動滑鼠以顯示座標：
座標：尚未移動滑鼠
19. 即時計數器
目前數字：0
20. 倒數計時器
設定秒數： 秒
等待開始...
21. 自動排序清單
- 橘子
- 蘋果
- 葡萄
- 香蕉
22. 動態生成表格
23. 新增表格列
| 名稱 | 數量 |
|---|---|
| 蘋果 | 3 |
| 香蕉 | 2 |
24. 移動小方塊的位置
25. 隨機更換文字
準備顯示隨機句子...
26. 顯示目前時間
尚未顯示
27. 拖放 (Drag and Drop)
拖我
放置區域
尚未放置
28. 動態調整元素大小
29. CSS 動畫 (Animations)
30. 變換 Canvas 繪圖內容
31. 當地時間顯示
目前當地時間：尚未啟動
32. 鍵盤事件偵測
尚未偵測到按鍵
33. 動態計算數值輸入
結果： --
34. 監聽滾動事件 (Scroll)
此範例將在頂部顯示頁面滾動進度條，點擊按鈕啟用後即可測試。
35. 音效播放 (HTML Audio)
點擊按鈕播放測試音效。
36. 文字轉語音 (TTS)
37. 地理定位
點擊按鈕以取得您的經緯度。
尚未取得位置
38. 本地儲存 (LocalStorage)
尚未儲存
39. 全螢幕模式切換
點擊下方按鈕進入全螢幕 (或再點一次退出)
40. 可編輯內容 (ContentEditable)
這是一段預設文字