diff --git a/gitee_pomodoro/assets/css/popup.css b/gitee_pomodoro/assets/css/popup.css index 42ee555..3c342a2 100644 --- a/gitee_pomodoro/assets/css/popup.css +++ b/gitee_pomodoro/assets/css/popup.css @@ -2,7 +2,7 @@ body { /* background-color: rgb(51, 11, 116); */ - background: url(../../images/pomo1.png) no-repeat; + background: url(../../images/pomo_ocean.jpg) no-repeat; background-image: "../../"; /* color: white; */ font-family: 'Fira Sans', sans-serif; diff --git a/gitee_pomodoro/assets/js/popup.js b/gitee_pomodoro/assets/js/popup.js index 9e94e50..15a88a9 100644 --- a/gitee_pomodoro/assets/js/popup.js +++ b/gitee_pomodoro/assets/js/popup.js @@ -29,6 +29,8 @@ const resetBtn = document.getElementById("reset-btn"); const endBtn = document.getElementById("end-btn"); const countdownTimer = document.getElementById("countdown"); +const audio = document.getElementById("audio"); +//全局唯一的定时器 let timer = null; let minutes, seconds; @@ -90,11 +92,9 @@ function start() { (response) => { console.log(response); - - startBtn.style.display = "none"; - endBtn.style.display = "block"; - getTimer(); - + startBtn.style.display = "none"; + endBtn.style.display = "block"; + getTimer(); } ); }); @@ -120,12 +120,35 @@ function end() { } function getTimer() { - clearTimer() + clearTimer(); timer = setInterval(() => { chrome.storage.sync.get("pomoData", ({ pomoData }) => { + // console.log("pomodata****",pomoData) + // const{minutes,seconds,countdownTimer} = pomoData; countdownTimer.innerHTML = pomoData.countdownTimer; + + //更新后倒计时判断,如果结束则重新初始化界面 + if(pomoData.countdownTimer == "00:00"){ + + audio.play(); + chrome.runtime.sendMessage( + { + status: "init", + }, + (response) => { + console.log(response); + countdownTimer.innerHTML = "25:00"; + + startBtn.style.display = "block"; + endBtn.style.display = "none"; + clearTimer(); + } + ); + + } }); }, 200); + } function clearTimer() { @@ -167,9 +190,7 @@ resetBtn.addEventListener("click", () => { }, 100); }); -//页面反复打开时初始化 -// start(); - +//页面反复打开时页面初始化 chrome.storage.sync.get("pomoData", ({ pomoData }) => { console.log(pomoData); const { status } = pomoData; @@ -179,13 +200,12 @@ chrome.storage.sync.get("pomoData", ({ pomoData }) => { 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"){ + } else if (status === "init") { chrome.runtime.sendMessage({ status: "init", }); diff --git a/gitee_pomodoro/background.js b/gitee_pomodoro/background.js index 4b079da..c0bb953 100644 --- a/gitee_pomodoro/background.js +++ b/gitee_pomodoro/background.js @@ -2,6 +2,7 @@ chrome.runtime.onInstalled.addListener(() => { // 插件功能安装默认启用 chrome.storage.sync.set({ + //初始化数据 pomoData: { minutes: 24, seconds: 60, @@ -17,12 +18,9 @@ let pomodoro = "pomodoro"; let array = ["minutes", "seconds", "pause", "countdownTimer", "pbutton"]; +//全局唯一的定时器 let timer = null; -// chorme.runtime.onMessage.addListener(()=>{ -// chorme.storage.sync.get("pause",({pause})=>{ -// }) -// }) // 记住 是否暂停、 @@ -37,7 +35,6 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { // sendResponse({ // status:message.status // }) - countdown({ ...content, status }); } else if (status === "paused") { clearTimeout(timer); @@ -59,8 +56,8 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { //init初始化 chrome.storage.sync.set({ pomoData: { - minutes: 24, - seconds: 60, + minutes: 0, + seconds: 5, countdownTimer: "25:00", status: "start", }, @@ -74,7 +71,7 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { // 番茄钟倒计时功能 function countdown({ minutes, seconds, status }) { - console.log("分秒=============", minutes, seconds); + // 设置分钟和秒数 // let currentMins = minutes - 1; seconds--; @@ -85,7 +82,8 @@ function countdown({ minutes, seconds, status }) { (seconds < 10 ? "0" : "") + seconds; // countdownTimer.innerHTML = currentTimer; 拿到 - + console.log("分秒=============", minutes, seconds); + chrome.storage.sync.set( { pomoData: { @@ -127,9 +125,6 @@ function countdown({ minutes, seconds, status }) { } } ); - countdown({ minutes, seconds }); - } else if (currentMins === 0) { - audio.play(); - reset(); - } + countdown({ minutes, seconds,status }); + } } diff --git a/gitee_pomodoro/images/pomo_crystal.jpg b/gitee_pomodoro/images/pomo_crystal.jpg new file mode 100644 index 0000000..ca6ed77 Binary files /dev/null and b/gitee_pomodoro/images/pomo_crystal.jpg differ diff --git a/gitee_pomodoro/images/pomo_ocean.jpg b/gitee_pomodoro/images/pomo_ocean.jpg new file mode 100644 index 0000000..6409d59 Binary files /dev/null and b/gitee_pomodoro/images/pomo_ocean.jpg differ diff --git a/gitee_pomodoro/images/pomo_waterfall.jpg b/gitee_pomodoro/images/pomo_waterfall.jpg new file mode 100644 index 0000000..8937b95 Binary files /dev/null and b/gitee_pomodoro/images/pomo_waterfall.jpg differ