mirror of
				https://gitee.com/bitdance-team/chrome-extension
				synced 2025-11-04 11:53:10 +08:00 
			
		
		
		
	倒计时功能 初版完成
This commit is contained in:
		@@ -46,7 +46,11 @@ body {
 | 
			
		||||
    color: aliceblue;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
#start-btn {
 | 
			
		||||
#countdown span{
 | 
			
		||||
    opacity: 0;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
#start-btn ,#end-btn{
 | 
			
		||||
    width: 40px;
 | 
			
		||||
    margin: 10px auto 0;
 | 
			
		||||
    padding: 10px 30px;
 | 
			
		||||
@@ -64,8 +68,14 @@ body {
 | 
			
		||||
    cursor: pointer;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
#end-btn{
 | 
			
		||||
    background-color: rgb(0, 128, 187);
 | 
			
		||||
    display: none;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/*选中的按钮*/
 | 
			
		||||
.selected {
 | 
			
		||||
    background-color: rgb(33, 10, 70);;
 | 
			
		||||
    background-color: rgb(244, 242, 248);
 | 
			
		||||
} 
 | 
			
		||||
 | 
			
		||||
#current-task-display {
 | 
			
		||||
@@ -106,7 +116,7 @@ li {
 | 
			
		||||
#add-task-btn {
 | 
			
		||||
    width: 200px;
 | 
			
		||||
    margin: 0 auto 10px;
 | 
			
		||||
    background-color: rgb(33, 10, 70);
 | 
			
		||||
    /* background-color: rgb(33, 10, 70); */
 | 
			
		||||
    padding: 8px;
 | 
			
		||||
    cursor: pointer;
 | 
			
		||||
    text-align: center;
 | 
			
		||||
 
 | 
			
		||||
@@ -1,25 +1,194 @@
 | 
			
		||||
const btn = document.querySelector("#switch");
 | 
			
		||||
 
 | 
			
		||||
chrome.storage.sync.get("linkOpen", ({ linkOpen }) => {
 | 
			
		||||
  btn.checked = linkOpen;
 | 
			
		||||
});
 | 
			
		||||
 
 | 
			
		||||
btn.addEventListener("change", () => {
 | 
			
		||||
  if (btn.checked) {
 | 
			
		||||
    chrome.storage.sync.set({ linkOpen: true });
 | 
			
		||||
  } else {
 | 
			
		||||
    chrome.storage.sync.set({ linkOpen: false });
 | 
			
		||||
  }
 | 
			
		||||
  // 获取当前tab窗口
 | 
			
		||||
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
 | 
			
		||||
    chrome.scripting.executeScript({
 | 
			
		||||
      target: { tabId: tabs[0].id },
 | 
			
		||||
      func: refreshPage,
 | 
			
		||||
    });
 | 
			
		||||
// const btn = document.querySelector("#switch");
 | 
			
		||||
 | 
			
		||||
// chrome.storage.sync.get("linkOpen", ({ linkOpen }) => {
 | 
			
		||||
//   btn.checked = linkOpen;
 | 
			
		||||
// });
 | 
			
		||||
 | 
			
		||||
// btn.addEventListener("change", () => {
 | 
			
		||||
//   if (btn.checked) {
 | 
			
		||||
//     chrome.storage.sync.set({ linkOpen: true });
 | 
			
		||||
//   } else {
 | 
			
		||||
//     chrome.storage.sync.set({ linkOpen: false });
 | 
			
		||||
//   }
 | 
			
		||||
//   // 获取当前tab窗口
 | 
			
		||||
//   chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
 | 
			
		||||
//     chrome.scripting.executeScript({
 | 
			
		||||
//       target: { tabId: tabs[0].id },
 | 
			
		||||
//       func: refreshPage,
 | 
			
		||||
//     });
 | 
			
		||||
//   });
 | 
			
		||||
// });
 | 
			
		||||
 | 
			
		||||
// // 刷新页面
 | 
			
		||||
// function refreshPage() {
 | 
			
		||||
//   window.location.reload();
 | 
			
		||||
// }
 | 
			
		||||
 | 
			
		||||
const startBtn = document.getElementById("start-btn");
 | 
			
		||||
const resetBtn = document.getElementById("reset-btn");
 | 
			
		||||
const endBtn = document.getElementById("end-btn");
 | 
			
		||||
const countdownTimer = document.getElementById("countdown");
 | 
			
		||||
 | 
			
		||||
let timer = null;
 | 
			
		||||
 | 
			
		||||
let minutes, seconds;
 | 
			
		||||
let pause;
 | 
			
		||||
let pomodoro = "pomodoro";
 | 
			
		||||
 | 
			
		||||
//两端通信 防抖
 | 
			
		||||
// let clickFlag = false;
 | 
			
		||||
 | 
			
		||||
//番茄钟按钮-绑定事件
 | 
			
		||||
document.addEventListener("click", (e) => {
 | 
			
		||||
  if (!e.target.matches(".button")) return;
 | 
			
		||||
 | 
			
		||||
  // reset when pomodoro button selected
 | 
			
		||||
  pause = true;
 | 
			
		||||
  seconds = 60;
 | 
			
		||||
  startBtn.innerHTML = "开始";
 | 
			
		||||
 | 
			
		||||
  chrome.storage.sync.set({ pause: pause, seconds: seconds }, function () {
 | 
			
		||||
    if (!chrome.runtime.error) {
 | 
			
		||||
      alert("初始化pause、seconds");
 | 
			
		||||
    }
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  // 定时器初始化
 | 
			
		||||
  if (e.target.matches("#pomodoro-btn")) {
 | 
			
		||||
    countdownTimer.innerHTML = "25:00";
 | 
			
		||||
    pomodoro = "pomodoro";
 | 
			
		||||
    minutes = 25;
 | 
			
		||||
    chrome.storage.sync.set(
 | 
			
		||||
      { minutes: minutes, countdownTimer: "25:00" },
 | 
			
		||||
      function () {
 | 
			
		||||
        if (!chrome.runtime.error) {
 | 
			
		||||
          alert("added target pomodoro!");
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    );
 | 
			
		||||
  }
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
// 开始按钮-绑定事件
 | 
			
		||||
startBtn.addEventListener("click", () => {
 | 
			
		||||
  // countdown(); 在后台运行,需要取出状态
 | 
			
		||||
  debounce(start(), 100);
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
function start() {
 | 
			
		||||
  chrome.storage.sync.get("pomoData", ({ pomoData }) => {
 | 
			
		||||
    const { minutes, seconds, status } = pomoData;
 | 
			
		||||
 | 
			
		||||
    chrome.runtime.sendMessage(
 | 
			
		||||
      {
 | 
			
		||||
        status: "start",
 | 
			
		||||
        content: {
 | 
			
		||||
          minutes,
 | 
			
		||||
          seconds,
 | 
			
		||||
        },
 | 
			
		||||
      },
 | 
			
		||||
      (response) => {
 | 
			
		||||
        console.log(response);
 | 
			
		||||
 | 
			
		||||
  
 | 
			
		||||
          startBtn.style.display = "none";
 | 
			
		||||
          endBtn.style.display = "block";
 | 
			
		||||
          getTimer();
 | 
			
		||||
        
 | 
			
		||||
      }
 | 
			
		||||
    );
 | 
			
		||||
  });
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
endBtn.addEventListener("click", () => {
 | 
			
		||||
  setTimeout(end, 200);
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
function end() {
 | 
			
		||||
  chrome.runtime.sendMessage(
 | 
			
		||||
    {
 | 
			
		||||
      status: "paused",
 | 
			
		||||
    },
 | 
			
		||||
    (response) => {
 | 
			
		||||
      console.log(response);
 | 
			
		||||
 | 
			
		||||
      startBtn.style.display = "block";
 | 
			
		||||
      endBtn.style.display = "none";
 | 
			
		||||
      clearTimer();
 | 
			
		||||
    }
 | 
			
		||||
  );
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function getTimer() {
 | 
			
		||||
  clearTimer()
 | 
			
		||||
  timer = setInterval(() => {
 | 
			
		||||
    chrome.storage.sync.get("pomoData", ({ pomoData }) => {
 | 
			
		||||
      countdownTimer.innerHTML = pomoData.countdownTimer;
 | 
			
		||||
    });
 | 
			
		||||
  }, 200);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function clearTimer() {
 | 
			
		||||
  clearInterval(timer);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/*
 | 
			
		||||
 * fn [function] 需要防抖的函数
 | 
			
		||||
 * delay [number] 毫秒,防抖期限值
 | 
			
		||||
 */
 | 
			
		||||
function debounce(fn, delay) {
 | 
			
		||||
  let timer = null; //借助闭包
 | 
			
		||||
  return function () {
 | 
			
		||||
    if (timer) {
 | 
			
		||||
      clearTimeout(timer); //进入该分支语句,说明当前正在一个计时过程中,并且又触发了相同事件。所以要取消当前的计时,重新开始计时
 | 
			
		||||
      timer = setTimeout(fn, delay);
 | 
			
		||||
    } else {
 | 
			
		||||
      timer = setTimeout(fn, delay); // 进入该分支说明当前并没有在计时,那么就开始一个计时
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 重置按钮-绑定事件
 | 
			
		||||
resetBtn.addEventListener("click", () => {
 | 
			
		||||
  setTimeout(() => {
 | 
			
		||||
    chrome.runtime.sendMessage(
 | 
			
		||||
      {
 | 
			
		||||
        status: "reset",
 | 
			
		||||
      },
 | 
			
		||||
      (response) => {
 | 
			
		||||
        // console.log(response);
 | 
			
		||||
        countdownTimer.innerHTML = "25:00";
 | 
			
		||||
 | 
			
		||||
        startBtn.style.display = "block";
 | 
			
		||||
        endBtn.style.display = "none";
 | 
			
		||||
        clearTimer();
 | 
			
		||||
      }
 | 
			
		||||
    );
 | 
			
		||||
  }, 100);
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
//页面反复打开时初始化
 | 
			
		||||
// start();
 | 
			
		||||
 | 
			
		||||
chrome.storage.sync.get("pomoData", ({ pomoData }) => {
 | 
			
		||||
  console.log(pomoData);
 | 
			
		||||
  const { status } = pomoData;
 | 
			
		||||
 | 
			
		||||
  if (status === "start") {
 | 
			
		||||
    startBtn.style.display = "none";
 | 
			
		||||
    endBtn.style.display = "block";
 | 
			
		||||
    getTimer();
 | 
			
		||||
  } else if (status === "paused") {
 | 
			
		||||
   
 | 
			
		||||
    startBtn.style.display = "block";
 | 
			
		||||
    endBtn.style.display = "none";
 | 
			
		||||
    chrome.storage.sync.get("pomoData", ({ pomoData }) => {
 | 
			
		||||
      countdownTimer.innerHTML = pomoData.countdownTimer;
 | 
			
		||||
    });
 | 
			
		||||
  } else if(status === "init"){
 | 
			
		||||
    chrome.runtime.sendMessage({
 | 
			
		||||
      status: "init",
 | 
			
		||||
    });
 | 
			
		||||
    countdownTimer.innerHTML = "25:00";
 | 
			
		||||
  }
 | 
			
		||||
});
 | 
			
		||||
 
 | 
			
		||||
// 刷新页面
 | 
			
		||||
function refreshPage() {
 | 
			
		||||
  window.location.reload();
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										356
									
								
								gitee_pomodoro/assets/js/script.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										356
									
								
								gitee_pomodoro/assets/js/script.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,356 @@
 | 
			
		||||
const pomodoroBtns = document.querySelectorAll('.button')
 | 
			
		||||
const pomodoroBtn = document.getElementById('pomodoro-btn')
 | 
			
		||||
const shortBreakBtn = document.getElementById('short-break-btn')
 | 
			
		||||
const longBreakBtn = document.getElementById('long-break-btn')
 | 
			
		||||
 | 
			
		||||
const startBtn = document.getElementById('start-btn')
 | 
			
		||||
const resetBtn = document.getElementById('reset-btn')
 | 
			
		||||
const countdownTimer = document.getElementById('countdown')
 | 
			
		||||
 | 
			
		||||
const addTaskBtn = document.getElementById('add-task-btn')
 | 
			
		||||
const addTaskForm = document.getElementById('task-form')
 | 
			
		||||
const cancelBtn = document.getElementById('cancel')
 | 
			
		||||
const taskNameInput = document.getElementById('text')
 | 
			
		||||
const pomodoroInput = document.getElementById('est-pomodoro')
 | 
			
		||||
const saveBtn = document.getElementById('save')
 | 
			
		||||
const tasksList = document.getElementById('tasks')
 | 
			
		||||
const template = document.getElementById('list-item-template')
 | 
			
		||||
const selectedTask = document.getElementById('selected-task')
 | 
			
		||||
const audio = document.getElementById('audio')
 | 
			
		||||
 | 
			
		||||
let minutes,seconds 
 | 
			
		||||
let pause 
 | 
			
		||||
let pomodoro = "pomodoro"
 | 
			
		||||
let tasks = []
 | 
			
		||||
let pomodorosCompleted = 0
 | 
			
		||||
let selectedTaskElement
 | 
			
		||||
 | 
			
		||||
let array = ["minutes","seconds","pause","countdownTimer","pbutton"];
 | 
			
		||||
 | 
			
		||||
//变量初始化
 | 
			
		||||
chrome.storage.sync.get(array,function(value){
 | 
			
		||||
    if(!chrome.runtime.error){
 | 
			
		||||
        // console.log(value);
 | 
			
		||||
        // alert("value:"+value)
 | 
			
		||||
 | 
			
		||||
        if(value.minutes){
 | 
			
		||||
            minutes = value.minutes;
 | 
			
		||||
        }else{
 | 
			
		||||
            minutes = 25;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        if(value.seconds){
 | 
			
		||||
            seconds = value.seconds;
 | 
			
		||||
        }else{
 | 
			
		||||
            seconds = 60;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        if(value.countdownTimer){
 | 
			
		||||
            countdownTimer.innerHTML = value.countdownTimer;
 | 
			
		||||
        }else{
 | 
			
		||||
            countdownTimer.innerHTML = "25:00";
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        if((value.pause) && (value.countdownTimer != "25:00")){
 | 
			
		||||
            pause = value.pause;
 | 
			
		||||
            startBtn.innerHTML = "开始"
 | 
			
		||||
        }else if((!value.pause) && (value.countdownTimer != "25:00")){
 | 
			
		||||
            pause = value.pause;
 | 
			
		||||
            startBtn.innerHTML = "暂停"
 | 
			
		||||
            countdown();
 | 
			
		||||
        }else{
 | 
			
		||||
            pause = true;
 | 
			
		||||
        }
 | 
			
		||||
            
 | 
			
		||||
        if (value.pbutton){
 | 
			
		||||
            if (value.pbutton == "shortBreakBtn"){
 | 
			
		||||
                shortBreakBtn.classList.add('selected');
 | 
			
		||||
            }else if (value.pbutton == "longBreakBtn"){
 | 
			
		||||
                longBreakBtn.classList.add('selected');
 | 
			
		||||
            }else {
 | 
			
		||||
                pomodoroBtn.classList.add('selected');
 | 
			
		||||
            }
 | 
			
		||||
        }else{
 | 
			
		||||
            pomodoroBtn.classList.add('selected');
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
//番茄钟按钮-绑定事件
 | 
			
		||||
document.addEventListener('click', e => {
 | 
			
		||||
    if(!e.target.matches('.button')) return;
 | 
			
		||||
 | 
			
		||||
    // reset when pomodoro button selected
 | 
			
		||||
    pause = true
 | 
			
		||||
    seconds = 60
 | 
			
		||||
    startBtn.innerHTML = "开始"
 | 
			
		||||
 | 
			
		||||
    chrome.storage.sync.set({"pause": pause, "seconds": seconds},function(){
 | 
			
		||||
        if(!chrome.runtime.error){
 | 
			
		||||
            alert("初始化pause、seconds");
 | 
			
		||||
        }
 | 
			
		||||
    })
 | 
			
		||||
 | 
			
		||||
    //选中番茄钟按钮指定样式
 | 
			
		||||
    pomodoroBtns.forEach(button => {
 | 
			
		||||
        button.classList.remove('selected')
 | 
			
		||||
    })
 | 
			
		||||
    e.target.classList.add('selected')
 | 
			
		||||
 | 
			
		||||
    let pbutton;
 | 
			
		||||
 | 
			
		||||
    if (e.target.classList == shortBreakBtn.classList){
 | 
			
		||||
        pbutton = "shortBreakBtn"
 | 
			
		||||
    }else if (e.target.classList == longBreakBtn.classList){
 | 
			
		||||
        pbutton = "longBreakBtn"
 | 
			
		||||
    }else {
 | 
			
		||||
        pbutton = "pomodoroBtn"
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    chrome.storage.sync.set({"pbutton":pbutton},function(){
 | 
			
		||||
        if(!chrome.runtime.error){
 | 
			
		||||
            console.log("added target pomodoro");
 | 
			
		||||
        }
 | 
			
		||||
    })
 | 
			
		||||
 | 
			
		||||
    // 定时器初始化
 | 
			
		||||
    if(e.target.matches('#pomodoro-btn')) {
 | 
			
		||||
        countdownTimer.innerHTML = '25:00'
 | 
			
		||||
        pomodoro = "pomodoro"
 | 
			
		||||
        minutes = 25
 | 
			
		||||
        chrome.storage.sync.set({"minutes":minutes,"countdownTimer":"25:00"},function(){
 | 
			
		||||
            if(!chrome.runtime.error){
 | 
			
		||||
                alert("added target pomodoro!");
 | 
			
		||||
            }
 | 
			
		||||
        })
 | 
			
		||||
    }
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
// 开始按钮-绑定事件
 | 
			
		||||
startBtn.addEventListener('click', async() => {
 | 
			
		||||
    // if countdown is paused, start/resume countdown, otherwise, pause countdown
 | 
			
		||||
    if (pause) {
 | 
			
		||||
        startBtn.innerHTML = "暂停";
 | 
			
		||||
        pause = false
 | 
			
		||||
        countdown();
 | 
			
		||||
        chrome.storage.sync.set({"pause":false},function(){
 | 
			
		||||
            if(!chrome.runtime.error){
 | 
			
		||||
                alert("开始专注啦!");
 | 
			
		||||
            }
 | 
			
		||||
        })
 | 
			
		||||
    } else if (!pause) {
 | 
			
		||||
        startBtn.innerHTML = "开始"
 | 
			
		||||
        pause = true
 | 
			
		||||
        chrome.storage.sync.set({"pause":true},function(){
 | 
			
		||||
            if(!chrome.runtime.error){
 | 
			
		||||
                alert("你暂停了专注!")
 | 
			
		||||
            }
 | 
			
		||||
        })
 | 
			
		||||
    };
 | 
			
		||||
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
// 重置按钮-绑定事件
 | 
			
		||||
resetBtn.addEventListener('click', () => {
 | 
			
		||||
    minutes = 25
 | 
			
		||||
    pause = true
 | 
			
		||||
    pomodoro = "pomodoro"
 | 
			
		||||
    seconds = 60
 | 
			
		||||
    
 | 
			
		||||
    startBtn.innerHTML = "开始"
 | 
			
		||||
    countdownTimer.innerHTML = '25:00'
 | 
			
		||||
 | 
			
		||||
    let dict = {
 | 
			
		||||
        "minutes":25,
 | 
			
		||||
        "pause":true,
 | 
			
		||||
        "seconds":60,
 | 
			
		||||
        "countdownTimer":"25:00"
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    chrome.storage.sync.set(dict,function(){
 | 
			
		||||
        if(!chrome.runtime.error){
 | 
			
		||||
            alert("reset");
 | 
			
		||||
        }
 | 
			
		||||
    })
 | 
			
		||||
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
// 番茄钟倒计时功能
 | 
			
		||||
function countdown() {
 | 
			
		||||
    // return if countdown is paused
 | 
			
		||||
    if(pause) return;
 | 
			
		||||
 | 
			
		||||
    // set minutes and seconds
 | 
			
		||||
    let currentMins = minutes - 1;
 | 
			
		||||
    seconds--;
 | 
			
		||||
    let currentTimer = (currentMins < 10 ? "0" : "") + currentMins.toString() + ':' + (seconds < 10 ? "0" : "") + String(seconds);
 | 
			
		||||
    countdownTimer.innerHTML = currentTimer;
 | 
			
		||||
 | 
			
		||||
    chrome.storage.sync.set({"seconds":seconds,"countdownTimer":currentTimer},function(){
 | 
			
		||||
        if(!chrome.runtime.error){
 | 
			
		||||
            console.log("started");
 | 
			
		||||
        }
 | 
			
		||||
    })
 | 
			
		||||
    // count down every second, when a minute is up, countdown one minute
 | 
			
		||||
    // when time reaches 0:00, reset
 | 
			
		||||
    if(seconds > 0) {
 | 
			
		||||
        setTimeout(countdown, 1000);
 | 
			
		||||
    } else if(currentMins > 0){
 | 
			
		||||
        seconds = 60
 | 
			
		||||
        minutes--;
 | 
			
		||||
        chrome.storage.sync.set({"seconds":seconds,"minutes":minutes},function(){
 | 
			
		||||
            if(!chrome.runtime.error){
 | 
			
		||||
                console.log("started");
 | 
			
		||||
            }
 | 
			
		||||
        })
 | 
			
		||||
        countdown();        
 | 
			
		||||
    } else if(currentMins === 0) {
 | 
			
		||||
        audio.play()
 | 
			
		||||
        reset()        
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// reset function when countdown ends
 | 
			
		||||
function reset() {
 | 
			
		||||
    // set to start the next round    
 | 
			
		||||
    startBtn.innerHTML = "Start"
 | 
			
		||||
    pause = true
 | 
			
		||||
 | 
			
		||||
    pomodoroBtns.forEach(button => {
 | 
			
		||||
        button.classList.remove('selected')
 | 
			
		||||
    })
 | 
			
		||||
 | 
			
		||||
    // if current round is a break, set for pomodoro
 | 
			
		||||
    if (pomodoro === "short break" || pomodoro === "long break") {
 | 
			
		||||
        pomodoro = "pomodoro"
 | 
			
		||||
        countdownTimer.innerHTML = '25:00'
 | 
			
		||||
        minutes = 25
 | 
			
		||||
        pomodoroBtn.classList.add('selected')
 | 
			
		||||
        return
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    // if current round is a pomodoro, set for break
 | 
			
		||||
    // if less than four pomodoros have been completed, go to short break
 | 
			
		||||
    // if four pomodoros have been completed, go to long break
 | 
			
		||||
    if (pomodoro === "pomodoro" && pomodorosCompleted < 4) {
 | 
			
		||||
        pomodorosCompleted++
 | 
			
		||||
        pomodoro = "short break"
 | 
			
		||||
        countdownTimer.innerHTML = '05:00'
 | 
			
		||||
        minutes = 5
 | 
			
		||||
        shortBreakBtn.classList.add('selected')
 | 
			
		||||
    } else if (pomodoro === "pomodoro" && pomodorosCompleted === 4) {
 | 
			
		||||
        pomodorosCompleted = 0
 | 
			
		||||
        pomodoro = "long break"
 | 
			
		||||
        countdownTimer.innerHTML = '15:00'
 | 
			
		||||
        minutes = 15
 | 
			
		||||
        longBreakBtn.classList.add('selected')
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    // if a task has been selected
 | 
			
		||||
    if (selectedTaskElement != null) {
 | 
			
		||||
        const selectedTaskId = selectedTaskElement.dataset.taskId
 | 
			
		||||
        const current = tasks.find(task => task.id === selectedTaskId)
 | 
			
		||||
        current.completedPomodoros++
 | 
			
		||||
        const pomodoroCount = selectedTaskElement.querySelector('.pomodoro-count')
 | 
			
		||||
        pomodoroCount.innerHTML = current.completedPomodoros.toString() + '/' + current.totalPomodoros 
 | 
			
		||||
    }
 | 
			
		||||
  // TODO add option to start next round automatically
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/*****************************************************************************************************
 | 
			
		||||
 **任务栏部分功能
 | 
			
		||||
 ****************************************************************************************************/
 | 
			
		||||
// show/hide task form
 | 
			
		||||
addTaskBtn.addEventListener('click', () => {
 | 
			
		||||
    addTaskForm.classList.toggle('hide')
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
// cancel task and close task form
 | 
			
		||||
cancelBtn.addEventListener('click', () => {
 | 
			
		||||
    taskNameInput.value = ""
 | 
			
		||||
    pomodoroInput.value = ""
 | 
			
		||||
    addTaskForm.classList.add('hide')
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
//保存要做的任务并放在页面上
 | 
			
		||||
saveBtn.addEventListener('click', e => {
 | 
			
		||||
    e.preventDefault();
 | 
			
		||||
 | 
			
		||||
    // get the inputs
 | 
			
		||||
    const taskName = taskNameInput.value
 | 
			
		||||
    const pomodoros = pomodoroInput.value
 | 
			
		||||
 | 
			
		||||
    // don't add task if a form element is blank or estimated pomodoros is <=0
 | 
			
		||||
    if (taskName === "" || pomodoros === "" || pomodoros <= 0) return
 | 
			
		||||
 | 
			
		||||
    // create new object
 | 
			
		||||
    const newTask = {
 | 
			
		||||
        name: taskName,
 | 
			
		||||
        completedPomodoros: 0,
 | 
			
		||||
        totalPomodoros: pomodoros,
 | 
			
		||||
        complete: false,
 | 
			
		||||
        id: new Date().valueOf().toString()
 | 
			
		||||
    }
 | 
			
		||||
    // add task to array
 | 
			
		||||
    tasks.push(newTask)
 | 
			
		||||
    // render task
 | 
			
		||||
    addTask(newTask)
 | 
			
		||||
 | 
			
		||||
    // clear inputs
 | 
			
		||||
    taskNameInput.value = ""
 | 
			
		||||
    pomodoroInput.value = ""
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
// event listener for the list item, checkbox and delete button
 | 
			
		||||
document.addEventListener('click', e => {
 | 
			
		||||
    // if a delete button is selected
 | 
			
		||||
    if(e.target.matches('.delete-btn')) {
 | 
			
		||||
        // find the list item associaited with the delete button and remove it
 | 
			
		||||
        const listItem = e.target.closest('.list-item')
 | 
			
		||||
        listItem.remove()
 | 
			
		||||
 | 
			
		||||
        // find the id of the task to remove the task object from the array  
 | 
			
		||||
        const taskId = listItem.dataset.taskId
 | 
			
		||||
        tasks = tasks.filter(task => task.id !== taskId )
 | 
			
		||||
 | 
			
		||||
        // remove title when selected task is deleted
 | 
			
		||||
        if (listItem === selectedTaskElement) {
 | 
			
		||||
            selectedTask.innerHTML = ""
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
    // if a list item is selected
 | 
			
		||||
    if(e.target.matches('.list-item')) {
 | 
			
		||||
        // set the task as the selected element and put title in selected-task div
 | 
			
		||||
        selectedTaskElement = e.target
 | 
			
		||||
        const taskName = e.target.querySelector('.task-name')
 | 
			
		||||
        const text = taskName.innerHTML
 | 
			
		||||
        selectedTask.innerHTML = text
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    // if a checkbox is selected
 | 
			
		||||
    if(e.target.matches('input[type=checkbox]')) {
 | 
			
		||||
        // ge the list item and the id of the item
 | 
			
		||||
        const listItem = e.target.closest('.list-item')
 | 
			
		||||
        const taskId = listItem.dataset.taskId
 | 
			
		||||
        // find the task object in the array
 | 
			
		||||
        const checkedTask = tasks.find(task => task.id === taskId)
 | 
			
		||||
        // if set to true, change to false, and if set to false, set to true
 | 
			
		||||
        if(checkedTask.complete) checkedTask.complete = false
 | 
			
		||||
        else if(!checkedTask.complete)checkedTask.complete = true
 | 
			
		||||
    }
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
// add task as list item
 | 
			
		||||
function addTask(task) {
 | 
			
		||||
    const templateClone = template.content.cloneNode(true)
 | 
			
		||||
    const listItem = templateClone.querySelector('.list-item')
 | 
			
		||||
    listItem.dataset.taskId = task.id
 | 
			
		||||
    const checkbox = templateClone.querySelector('input[type=checkbox]')
 | 
			
		||||
    checkbox.checked = task.complete
 | 
			
		||||
    const taskName = templateClone.querySelector('.task-name')
 | 
			
		||||
    taskName.innerHTML = task.name
 | 
			
		||||
    const pomodoroCount = templateClone.querySelector('.pomodoro-count')
 | 
			
		||||
    pomodoroCount.innerHTML = task.completedPomodoros.toString() + '/' + task.totalPomodoros
 | 
			
		||||
    tasksList.appendChild(templateClone)
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										135
									
								
								gitee_pomodoro/background.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										135
									
								
								gitee_pomodoro/background.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,135 @@
 | 
			
		||||
// 用户首次安装插件时执行一次,后面不会再重新执行(除非用户重新安装插件)
 | 
			
		||||
chrome.runtime.onInstalled.addListener(() => {
 | 
			
		||||
  // 插件功能安装默认启用
 | 
			
		||||
  chrome.storage.sync.set({
 | 
			
		||||
    pomoData: {
 | 
			
		||||
      minutes: 24,
 | 
			
		||||
      seconds: 60,
 | 
			
		||||
      countdownTimer: "25:00",
 | 
			
		||||
      status: "init",
 | 
			
		||||
    },
 | 
			
		||||
  });
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
let minutes, seconds;
 | 
			
		||||
let pause;
 | 
			
		||||
let pomodoro = "pomodoro";
 | 
			
		||||
 | 
			
		||||
let array = ["minutes", "seconds", "pause", "countdownTimer", "pbutton"];
 | 
			
		||||
 | 
			
		||||
let timer = null;
 | 
			
		||||
// chorme.runtime.onMessage.addListener(()=>{
 | 
			
		||||
//     chorme.storage.sync.get("pause",({pause})=>{
 | 
			
		||||
 | 
			
		||||
//     })
 | 
			
		||||
// })
 | 
			
		||||
 | 
			
		||||
// 记住 是否暂停、
 | 
			
		||||
 | 
			
		||||
// 判断计时剩余时间
 | 
			
		||||
 | 
			
		||||
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
 | 
			
		||||
  const { status, content } = message;
 | 
			
		||||
 | 
			
		||||
  console.log(message);
 | 
			
		||||
 | 
			
		||||
  if (status === "start") {
 | 
			
		||||
    // sendResponse({
 | 
			
		||||
    //   status:message.status
 | 
			
		||||
    // })
 | 
			
		||||
 | 
			
		||||
    countdown({ ...content, status });
 | 
			
		||||
  } else if (status === "paused") {
 | 
			
		||||
    clearTimeout(timer);
 | 
			
		||||
    chrome.storage.sync.get("pomoData", ({ pomoData }) => {
 | 
			
		||||
      console.log(pomoData);
 | 
			
		||||
      chrome.storage.sync.set({ pomoData: { ...pomoData, status: "paused" } });
 | 
			
		||||
    });
 | 
			
		||||
  } else if (status === "reset") {
 | 
			
		||||
    clearTimeout(timer);
 | 
			
		||||
    chrome.storage.sync.set({
 | 
			
		||||
      pomoData: {
 | 
			
		||||
        minutes: 24,
 | 
			
		||||
        seconds: 60,
 | 
			
		||||
        countdownTimer: "25:00",
 | 
			
		||||
        status: "init",
 | 
			
		||||
      },
 | 
			
		||||
    });
 | 
			
		||||
  } else {
 | 
			
		||||
    //init初始化
 | 
			
		||||
    chrome.storage.sync.set({
 | 
			
		||||
      pomoData: {
 | 
			
		||||
        minutes: 24,
 | 
			
		||||
        seconds: 60,
 | 
			
		||||
        countdownTimer: "25:00",
 | 
			
		||||
        status: "start",
 | 
			
		||||
      },
 | 
			
		||||
    });
 | 
			
		||||
  }
 | 
			
		||||
  chrome.storage.sync.set({
 | 
			
		||||
    status,
 | 
			
		||||
  });
 | 
			
		||||
  sendResponse();
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
// 番茄钟倒计时功能
 | 
			
		||||
function countdown({ minutes, seconds, status }) {
 | 
			
		||||
  console.log("分秒=============", minutes, seconds);
 | 
			
		||||
  // 设置分钟和秒数
 | 
			
		||||
  // let currentMins = minutes - 1;
 | 
			
		||||
  seconds--;
 | 
			
		||||
  let currentTimer =
 | 
			
		||||
    (minutes < 10 ? "0" : "") +
 | 
			
		||||
    minutes +
 | 
			
		||||
    ":" +
 | 
			
		||||
    (seconds < 10 ? "0" : "") +
 | 
			
		||||
    seconds;
 | 
			
		||||
  // countdownTimer.innerHTML = currentTimer; 拿到
 | 
			
		||||
 | 
			
		||||
  chrome.storage.sync.set(
 | 
			
		||||
    {
 | 
			
		||||
      pomoData: {
 | 
			
		||||
        seconds: seconds,
 | 
			
		||||
        minutes: minutes,
 | 
			
		||||
        countdownTimer: currentTimer,
 | 
			
		||||
        status,
 | 
			
		||||
      },
 | 
			
		||||
    },
 | 
			
		||||
    function () {
 | 
			
		||||
      if (!chrome.runtime.error) {
 | 
			
		||||
        console.log("started");
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
  console.log(currentTimer);
 | 
			
		||||
  // count down every second, when a minute is up, countdown one minute
 | 
			
		||||
  // when time reaches 0:00, reset
 | 
			
		||||
  if (seconds > 0) {
 | 
			
		||||
    timer = setTimeout(() => {
 | 
			
		||||
      countdown({ minutes, seconds, status });
 | 
			
		||||
    }, 1000);
 | 
			
		||||
  } else if (minutes > 0) {
 | 
			
		||||
    seconds = 60;
 | 
			
		||||
    minutes--;
 | 
			
		||||
    chrome.storage.sync.set(
 | 
			
		||||
      {
 | 
			
		||||
        pomoData: {
 | 
			
		||||
          seconds: seconds,
 | 
			
		||||
          minutes: minutes,
 | 
			
		||||
          countdownTimer: currentTimer,
 | 
			
		||||
          status,
 | 
			
		||||
        },
 | 
			
		||||
      },
 | 
			
		||||
      function () {
 | 
			
		||||
        if (!chrome.runtime.error) {
 | 
			
		||||
          console.log("started");
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    );
 | 
			
		||||
    countdown({ minutes, seconds });
 | 
			
		||||
  } else if (currentMins === 0) {
 | 
			
		||||
    audio.play();
 | 
			
		||||
    reset();
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
@@ -1,12 +1,11 @@
 | 
			
		||||
{
 | 
			
		||||
    "name":"助手-pomodoro",
 | 
			
		||||
    "description":"manage your time",
 | 
			
		||||
    "version":"0.1",
 | 
			
		||||
    "version":"0.3",
 | 
			
		||||
    "manifest_version":3,
 | 
			
		||||
    "background":{
 | 
			
		||||
        "service_worker":"./assets/js/background.js"
 | 
			
		||||
        "service_worker":"background.js"
 | 
			
		||||
    },
 | 
			
		||||
    "options_page": "./assets/html/options.html", 
 | 
			
		||||
    "permissions":["storage","activeTab", "scripting","notifications","alarms", "contextMenus"],
 | 
			
		||||
    "action":{
 | 
			
		||||
        "default_popup":"popup.html",
 | 
			
		||||
 
 | 
			
		||||
@@ -15,29 +15,31 @@
 | 
			
		||||
        <source src="./src/alarm.mp3" type="audio/mp3">
 | 
			
		||||
    </audio>
 | 
			
		||||
    
 | 
			
		||||
    <!-- 计时部分 -->
 | 
			
		||||
    <div id="timer">
 | 
			
		||||
 | 
			
		||||
    <header id="timer">
 | 
			
		||||
      <div class="buttons">
 | 
			
		||||
        <div class="slider">
 | 
			
		||||
          <span class="left"><</span>
 | 
			
		||||
          <span class="right">></span>
 | 
			
		||||
        </div>
 | 
			
		||||
        
 | 
			
		||||
        <div class="button" id="pomodoro-btn">开始专注</div>
 | 
			
		||||
        <!-- <div class="button" id="short-break-btn">Short Break</div>
 | 
			
		||||
        <div class="button" id="long-break-btn">Long Break</div> -->
 | 
			
		||||
      <!-- 切换背景图片 -->
 | 
			
		||||
      <div class="slider">
 | 
			
		||||
        <span class="left"><</span>
 | 
			
		||||
        <span class="right">></span>
 | 
			
		||||
      </div>
 | 
			
		||||
 | 
			
		||||
      
 | 
			
		||||
        <div class="button" id="pomodoro-btn">专注模式</div>
 | 
			
		||||
      
 | 
			
		||||
      <div id="countdown">
 | 
			
		||||
          <span>25:00</span>
 | 
			
		||||
          <span>00:00</span>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div id="start-btn">Start</div>
 | 
			
		||||
      <div id="reset-btn">Reset</div>
 | 
			
		||||
    </header>
 | 
			
		||||
      <!-- 计时开始、重置 -->
 | 
			
		||||
      <div id="start-btn">开始</div>
 | 
			
		||||
      <div id="end-btn">暂停</div>
 | 
			
		||||
      <div id="reset-btn">重置</div>
 | 
			
		||||
    </div>
 | 
			
		||||
    
 | 
			
		||||
 | 
			
		||||
    <!-- 添加任务清单 -->
 | 
			
		||||
    <div id="worklist">
 | 
			
		||||
      <div id="current-task-display">
 | 
			
		||||
        <div id="message">You are working on:</div>
 | 
			
		||||
        <div id="message">你正在专注于:</div>
 | 
			
		||||
        <div id="selected-task"></div>
 | 
			
		||||
      </div>
 | 
			
		||||
      
 | 
			
		||||
@@ -46,9 +48,7 @@
 | 
			
		||||
        <div id="add-task-btn">Add Task</div>
 | 
			
		||||
      
 | 
			
		||||
        <form id="task-form" class="hide">
 | 
			
		||||
          <input id="text" type="text" placeholder="What are you working on?">
 | 
			
		||||
          <label for="est-pomodoro">Est Rounds</label>
 | 
			
		||||
          <input id="est-pomodoro" type="number">
 | 
			
		||||
          <input id="text" type="text" placeholder="输入你要专注的事情">
 | 
			
		||||
          <div id="btn-container">
 | 
			
		||||
            <button id="save" type="submit">Save</button> 
 | 
			
		||||
            <button id="cancel" type="button">Cancel</button>
 | 
			
		||||
@@ -57,11 +57,13 @@
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    
 | 
			
		||||
    <!-- 页脚--设置 -->
 | 
			
		||||
    <footer>
 | 
			
		||||
      <div class="settings">
 | 
			
		||||
        <a href="./assets/html/options.html">settings</a>
 | 
			
		||||
      </div>
 | 
			
		||||
    </footer>
 | 
			
		||||
    <script src="./assets/js/"></script>
 | 
			
		||||
 | 
			
		||||
    <script src="./assets/js/popup.js"></script>
 | 
			
		||||
</body>
 | 
			
		||||
</html>
 | 
			
		||||
							
								
								
									
										18
									
								
								gitee_pomodoro/timer.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										18
									
								
								gitee_pomodoro/timer.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,18 @@
 | 
			
		||||
// window.onload = function(){
 | 
			
		||||
//     chrome.storage.sync.set({
 | 
			
		||||
//         pause: true,
 | 
			
		||||
//         minutes:25,
 | 
			
		||||
//         seconds:60,
 | 
			
		||||
//         pomodoro:"pomodoro",
 | 
			
		||||
//         countdownTimer:"25:00",
 | 
			
		||||
//         pbutton:"pomodoroBtn",
 | 
			
		||||
//         countFlag:false
 | 
			
		||||
//     });
 | 
			
		||||
 | 
			
		||||
//     chrome.storage.sync.get("countFlag",({countFlag})=>{
 | 
			
		||||
//         if(countFlag){
 | 
			
		||||
//             count();
 | 
			
		||||
//         }
 | 
			
		||||
//     })
 | 
			
		||||
 | 
			
		||||
// }
 | 
			
		||||
		Reference in New Issue
	
	Block a user