Ellie's Blog
0%

5/26 寫出一個番茄鐘(一)設定時間 /會響的鬧鐘 POMO 最簡單版

發表於 更新於

成果

心得

  • 寫完發現不難，在for迴圈那邊搞很久，中間還有重複做一些功能的情況發生
  • 基礎的東西可能不是很熟 所以會卡住 要回去上課來補
  • 要多寫幾個作品 熟悉工作流程
  • 寫的過程盡量做小範圍的測試 才不會一直找不到bug
    • 所以拆分功能一一去做非常重要

未來改善之處

  • 時間改成分鐘
  • 可以設定自動循環
  • 開始時間 音效
  • 可以靜音

邏輯說明

  • 抓取輸入時間
    • 計算總時常
    • 形成一個陣列
      • 陣列內容用於設定鬧鐘鈴響時間
  • 設定計時功能
    • 使用 setInterval
    • 使用for 迴圈 + if
      • 判斷響鈴時間
      • 以及觸發鈴聲
  • 設定響鈴功能
    • 新增一個 Audio
    • 設定播放音效
    • 設定播放音量
    • audio.play(); 執行

使用程式

setInterval

Window setInterval()
WindowOrWorkerGlobalScope.setInterval()((裡面有新寫法想要嘗試))

setInterval(function () { }, 1000);
* (執行程式 , 間隔時間)

1
2
3
4
5
6
7
8
9
function count(time) {
    let timer = setInterval(function () {
        if (time >= 0) {
           
        } else {
            clearInterval(timer);
        }
    }, 1000);
}

new Audio

JavaScript audio play 播放音效

function playAudio() {
    const audio = new Audio("coin01.mp3");
    audio.play();
  }

如何只播放 1 秒

如何只播放 1 秒

1
2
3
audio.play();
setTimeout(() => { audio.pause(); audio.currentTime = 0; }, 1000);