【JQuery】番茄工作法应用

虽然我是一名实打实的产品喵，但是为了能够和程序猿们愉快地沟通（让撕逼再和谐一点），我自学了一些代码知识，写了一些不入流不靠谱不成熟的“三不”应用，随便扔在这里分享一下。

简介

番茄工作法是简单易行的时间管理方法，是由弗朗西斯科·西里洛于1992年创立的一种相对于GTD更微观的时间管理方法。

使用番茄工作法，选择一个待完成的任务，将番茄时间设为25分钟，专注工作，中途不允许做任何与该任务无关的事，直到番茄时钟响起，然后在纸上画一个X短暂休息一下（5分钟就行），每4个番茄时段多休息一会儿。

番茄工作法极大地提高了工作的效率，还会有意想不到的成就感。

截图

倒计时中...

代码

window.onload = function () {
    $(document).ready(function() {
  //
  var breakNum = 5;
  var sessionNum = 25;
  var minute = sessionNum;
  var second = "00";
  //
  function minusBreak() {
    breakNum--;
    if (breakNum === 0) {
      breakNum = 1;
    }
    $("#breakNum").text(breakNum);
  }
  function plusBreak() {
    breakNum++;
    $("#breakNum").text(breakNum);
  }
  function minusSession() {
    sessionNum--;
    if (sessionNum === 0) {
      sessionNum = 1;
    }
    minute = sessionNum;
    $("#sessionNum").text(sessionNum);
    $("#minute").text(minute);
  }
  function plusSession() {
    sessionNum++;
    minute++;
    $("#sessionNum").text(sessionNum);
    $("#minute").text(minute);
  }
  function countdown() {
    if (second === "00") {
      second = 59;
      minute--;
    } else {
      second--;
      if (second < 10) {
        second = "0" + second;
      }
    }
    $("#second").text(second);
    $("#minute").text(minute);
  }
  function startSession() {
    $(".break-name").removeClass("animated bounce infinite");
    $(".session-name").addClass("animated bounce infinite");
    timer = setInterval(function() {
      countdown();
      if (minute === 0 && second === "00") {
        clearInterval(timer);
        minute = breakNum;
        startBreak();
      }
    },
    1000);
  }
  function startBreak() {
    $(".session-name").removeClass("animated bounce infinite");
    $(".break-name").addClass("animated bounce infinite");
    timer = setInterval(function() {
      countdown();
      if (minute === 0 && second === "00") {
        clearInterval(timer);
        minute = sessionNum;
        startSession();
      }
    },
    1000);
  }
  //
  $("#breakNum").text(breakNum);
  $("#sessionNum").text(sessionNum);
  $("#minute").text(minute);
  $("#second").text(second);
  //
  $("#minusBreak").click(minusBreak);
  $("#plusBreak").click(plusBreak);
  $("#minusSession").click(minusSession);
  $("#plusSession").click(plusSession);
  //
  $(".btn").click(function() {
    let clickedBtn = $(this).attr("id");
    if (clickedBtn === "start") {
      //start timer
      $("#start").text("START");
      startSession();
    } else if (clickedBtn === "pause") {
      //pause timer
      $("#start").text("RESTART");
      clearInterval(timer);
    } else if (clickedBtn === "reset") {
      //reset timer
      minute = sessionNum;
      second = "00";
      clearInterval(timer);
      $("#second").text(second);
      $("#minute").text(minute);
    }
  });
});
}

相关

想看源代码的童鞋可以来CODING.NET获取，也可以直接去DEMO体验一下。

---

THE END.