Ellie's Blog
0%

5/28 寫出一個番茄鐘(五)-顯示累積工作時間 local storage + 顯示倒數計時 + 檢查輸入

發表於 更新於

成果

5/27 番茄鐘5 倒數計時

心得

  • 寫不出來就用說的 最直白的想要什麼功能
    • EX: 三秒後要幫下一個鬧鐘倒數計時
    • 用來簡化思考方式
  • 在notion頁面上提出問題 之後再一一解決
    • 可以幫助我不會在多重任務中迷失
    • 順便記下學到的東西 從而寫成文章
  • 直接用Notion頁面切分工作
    • 可以一一測試功能
    • 可以直接寫筆記 最後貼上Hexo
    • 比較容易找得到程式碼
  • console.log 加上文字
    • EX : console.log(‵累積工作時間:${累積工作時間}`);
    • 方便直接查看測試結果
  • console.log不要馬上刪掉
    • 可以等文章上傳前 整理程式碼的時候
    • 方便觀察
    • 一起整理比較快

邏輯說明

偵測輸入數字 判斷正確輸入

  • 利用ture/false
  • 使用for 迴圈 判斷input的值
    • 然後改變boolen值
    • 無法直接alert 在回圈內會出現多個ALERT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
$("input").change(function (e) {
    e.preventDefault();
    {
      //偵測輸入數字 判斷正確輸入
      let alert1 = false;
      let a = 1;
      for (let i = 1; i < 5; i++) {
        a = $(`.clock-list div:nth-child(${i}) input`).val();
        if (a == 0) {
          alert1 = true;
        }
      }
      if (alert1 == true) {
        alert("時間設定不可為0");
        alert1 = false;
        $(".btn-start").attr("disabled", "disabled");
      } else {
        $(".btn-start").removeAttr("disabled");
      }
    }
    {
      //偵測輸入文字
      let alert2 = false;
      let b = "";
      for (let i = 1; i < 5; i++) {
        b = $(`.textSetting div:nth-child(${i}) input`).val();
        if (!b) {
          alert2 = true;
        }
      }
      if (alert2 == true) {
        alert("提醒文字必填");
        alert2 = false;
        $(".btn-start").attr("disabled", "disabled");
      } else {
        $(".btn-start").removeAttr("disabled");
      }
    }

將頁面輸入的時間形成可用的資料

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let accumulationTime = 0; //所有時間總和
let accumulateArr = []; //累加時間的陣列  秒數=切換頁面狀態的時間
let originalArr = []; //個階段鬧鐘時長  原始輸入時間的陣列

//番茄鐘循環的次數
for (let n = 0; n < cycleTimes; n++) {
  //抓取頁面輸入的值
  for (let i = 1; i < 5; i++) {
    //計算所有時間總和
    accumulationTime += Number(
      $(`fieldset div:nth-child(${i}) input`).val() * 60
    );
    //形成累加時間的陣列  秒數=切換頁面狀態的時間
    accumulateArr.push(accumulationTime);
    //形成原始輸入時間的陣列
    originalArr.push($(`fieldset div:nth-child(${i}) input`).val() * 60);
  }
}

判斷當前秒數 改變頁面的狀態

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//利用迴圈 +判斷式 讓鬧鐘在accumulateArr的秒數切換
for (let i = 0; i < accumulateArr.length + 1; i++) {
  if (nowTime == accumulateArr[i]) {
    workTimeToLocal(workTime);
    countSecondToMinuteAndHour(workTime, ".showAccumulateTime");
    //設定鬧鐘的倒數計時時間
    countDown = originalArr[i + 1];

    //判斷鬧鐘類型 來改變頁面狀態
    if (i % 2 == 0) {
      //當下秒數 還是工作時間 所以要+1
      workTime += 1;
      $(".alarmText").text("休息時間");
      $("body").css("background-color", "green");
      textAlarm(workTimeAlarm);
    } else if (i % 2 == 1) {
      $(".alarmText").text("工作");
      $("body").css("background-color", "#FFC0BE");
      textAlarm(breakTimeAlarm);
    }
  }

計算累積工作時間

  • 可以改 :
    • if (accumulateArr[i] < nowTime && nowTime < accumulateArr[i + 1]) {
      • 這行用originalArr 作為判段
    • 上面 也要將originalArr 形成cycleTime的倍數陣列
1
2
3
4
5
6
7
8
9
if (accumulationTime > 0) {
//先載入第一個鬧鐘 因為下面的判斷式 不會算到第一個鬧鐘的時間
if (nowTime < accumulateArr[0]) {
  $(".alarmText").text("工作時間");
  $("body").css("background-color", "#FFC0BE");
  workTime += 1;
  workTimeToLocal(workTime);
  countSecondToMinuteAndHour(workTime, ".showAccumulateTime");
}
1
2
3
4
5
6
7
8
9
//基數鬧鐘時間 累積到工作時數
if (accumulateArr[i] < nowTime && nowTime < accumulateArr[i + 1]) {
  if (i % 2 == 1) {
    workTime += 1;
    //console.log("workTime" + workTime);
    workTimeToLocal(workTime);
    countSecondToMinuteAndHour(workTime, ".showAccumulateTime");
  }
}

每一秒改變的參數(計時

1
2
3
4
5
6
7
countDown -= 1; //倒數計時
//將倒數時間顯示在頁面
countSecondToMinuteAndHour(countDown, ".countDownTime");
//所有鬧鐘的時間-1 
accumulationTime -= 1;
//目前累積的時間 +1 
nowTime += 1;

將秒數轉為時分秒 + 將文字插入頁面

  • 用於:
    • 顯示倒數計時時間
    • 顯示累積的工作時間
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//計算秒數變成時分秒
function countSecondToMinuteAndHour(second, place) {
  //計算時間
  let showHour = Math.floor(second / 3600);
  let showMinutes = Math.floor(second / 60) % 60;
  let showSecond = second % 60;
//顯示於頁面 
  if (showHour < 10) {
//加上0 防止版型跑掉
    $(`${place} p:nth-child(2)`).text(`0${showHour}時`);
  } else {
    $(`${place} p:nth-child(2)`).text(`${showHour}小時`);
  }
  if (showMinutes < 10) {
    $(`${place} p:nth-child(3)`).text(`0${showMinutes}分`);
  } else {
    $(`${place} p:nth-child(3)`).text(`${showMinutes}分`);
  }
  if (showSecond < 10) {
    $(`${place} p:nth-child(4)`).text(`0${showSecond}秒`);
  } else {
    $(`${place} p:nth-child(4)`).text(`${showSecond}秒`);
  }
}

將累積工作時間插入到 local strage

1
2
3
function workTimeToLocal(workTime) {
    localStorage.setItem("accumulateWorkTime", workTime);
  }

累積工作時間 從 local strage 抓取紀錄的值

1
2
3
4
5
6
7
8
9
let workTimeAlarm = $('input[id="work-time-alarm"]').val();

window.onload = function () {
if (workTime) {
  countSecondToMinuteAndHour(workTime, ".showAccumulateTime");
} else {
  workTime = 0;
  localStorage.setItem("accumulateWorkTime", 0);
}

使用程式(本次新學會的)

設定VScode comment的顏色

因為都灰灰的 看起來眼睛好累

vscode 修改註釋顏色

以下文字引用自原文

  • 安裝一個第三方主題 ,比如我喜歡的bimbo
  • theme目錄：C:/Users/admin/.vscode/extensions 這個目錄，選安裝了的主題，
  • 比如我用的bimbo，然後進入下面目錄，並修改pawelgrzybek.bimbo-theme-0.2.0\themes\bimbo-theme-color-theme.json