Question

我正在建造一个番茄钟时钟＆＃39;我已经成功地完成了时间和休息，我想在TIME和BREAK之间切换。

我想知道如何在时间进入＆＃39; 0＆＃39;之后拨打breakTime。并在休息时间到达＆＃39; 0时回拨time功能。

这是我的代码:(编辑）

＆＃13;

$(document).ready(function() {
  // TIMERS AND BREAKERS

  $('.resetWrapper').hide();
  var timeBtn = false;
  var breakBtn = false;
  var timeMin = parseInt($('#timeMin').text());
  var breakMin = parseInt($('#timeMin').text());


  // Reset Buttons
  $('#timeReset').click(function() {
    timeBtn = false;
    timeMin = 5;
    $('#timeMin').html('5');
    $('#timeResetWrapper').slideUp();

  });

  $('#breakReset').click(function() {
    breakBtn = false;
    breakMin = 5;
    $('#breakMin').html('5');
    $('#breakResetWrapper').slideUp();

  });


  // Plus and minus TIME buttons
  $('#plusTimeMin').click(function() {
    if (timeMin >= 1) {
      timeMin += 1;
      $('#timeMin').html(timeMin);
    }
    if (!timeBtn) {
      timeBtn = true;
      $('#timeResetWrapper').slideDown();
    }
  });

  $('#minusTimeMin').click(function() {
    if (timeMin > 1) {
      timeMin -= 1;
      $('#timeMin').html(timeMin);
    }
    if (!timeBtn) {
      timeBtn = true;
      $('#timeResetWrapper').slideDown();
    }
  });


  // Plus and minus BREAK buttons
  $('#plusBreakMin').click(function() {
    if (breakMin >= 1) {
      breakMin += 1;
      $('#breakMin').html(breakMin);
    }
    if (!breakBtn) {
      breakBtn = true;
      $('#breakResetWrapper').slideDown();
    }
  });

  $('#minusBreakMin').click(function() {
    if (breakMin > 1) {
      breakMin -= 1;
      $('#breakMin').html(breakMin);
    }
    if (!breakBtn) {
      breakBtn = true;
      $('#breakResetWrapper').slideDown();
    }
  });
  // FINISH TIMERS AND BREAKERS /// ------------->

  // POMODORO TIMES  /// ------------->
  var secs = 60;
  var startInterval;
  var breakInterval;

  $("#playPomodoro").click(function() {
    a = true;
    secs = 60;
    timeMin = parseInt($('#timeMin').text()) - 1;
    breakMin = parseInt($('#breakMin').text()) - 1;

    clearInterval(startInterval);
    startInterval = setInterval(time, 100);

  });

  function time() {
    if (timeMin >= 0 && timeMin < 10) {
      if (secs > 0) {
        if (secs <= 10) {
          $("#pomodoroTime").html("0" + timeMin + " : 0" + (secs - 1));
          secs -= 1;
        } else {
          $("#pomodoroTime").html("0" + timeMin + " : " + (secs - 1));
          secs -= 1;
        }
      } else if (secs === 0) {
        timeMin -= 1;
        secs = 60;
      }
    } else {
      if (secs > 0) {
        if (secs <= 10) {
          $("#pomodoroTime").html(timeMin + " : 0" + (secs - 1));
          secs -= 1;
        } else {
          $("#pomodoroTime").html(timeMin + " : " + (secs - 1));
          secs -= 1;
        }
      } else if (secs === 0) {
        timeMin -= 1;
        secs = 60;
      }
    }
  }

  function breakTime() {
    if (breakMin >= 0 && breakMin < 10) {
      if (secs > 0) {
        if (secs <= 10) {
          $("#pomodoroTime").html("0" + breakMin + " : 0" + (secs - 1));
          secs -= 1;
        } else {
          $("#pomodoroTime").html("0" + breakMin + " : " + (secs - 1));
          secs -= 1;
        }
      } else if (secs === 0) {
        breakMin -= 1;
        secs = 60;
      }
    } else {
      if (secs > 0) {
        if (secs <= 10) {
          $("#pomodoroTime").html(breakMin + " : 0" + (secs - 1));
          secs -= 1;
        } else {
          $("#pomodoroTime").html(breakMin + " : " + (secs - 1));
          secs -= 1;
        }
      } else if (secs === 0) {
        breakMin -= 1;
        secs = 60;
      }
    }
  }
  // FINISH POMODORO TIMES //// ------------->
});

＆＃13;

body {
  background: rgba(50, 101, 115, 1.0);
  font-family: 'Open Sans', sans-serif!important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.row {
  margin-top: 50px;
}

.times {
  color: white;
  text-align: center;
}

.timesContainer {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 12px 0px 15px 0px;
}

.title {
  margin-top: 40px;
  text-decoration: underline;
  color: rgba(255, 255, 255, 1.0);
  font-size: 2.5em;
  text-align: center;
}

.number {
  margin-right: 10px;
  margin-left: 10px;
}

.plusbtn:hover,
.plusbtn:active,
.plusbtn:target,
.minusbtn:hover,
.minusbtn:active,
.minusbtn:target {
  background: none;
  color: gray;
  transform: rotate(360deg);
  font-size: 20px;
  outline: none;
  border: none;
}

.plusbtn,
.minusbtn {
  font-size: 20px;
  color: white;
  background: none;
  border: none;
  transition: all 1s;
  outline: none;
}

.pomodoroContainer {
  margin-top: 50px;
  text-align: center;
  vertical-align: middle;
}

.pomodoro {
  display: inline-block;
  height: 350px;
  width: 350px;
  background: none;
  border: 3px solid black;
  border-radius: 50%;
  vertical-align: middle;
}

#pomodoroTime {
  font-size: 50px;
  vertical-align: middle;
  margin-top: 38%;
  color: white;
}

.playStop {
  font-size: 50px;
  margin-top: 10px;
  text-align: center;
}

#playPomodoro {
  color: #77A9B7;
}

#stopPomodoro {
  color: #E8574B;
}

.resetBtn {
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.3);
  padding: 10px;
  border-radius: 5px;
  border: none;
  outline: none;
  width: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />


<body>
  <div class="container-fluid">
    <div class="title">
      Pomodoro Clock
    </div>
    <div class="row">
      <div class="times col-xs-6">
        <div class="timesContainer">
          <h4> Time in minutes </h4>
          <button id="plusTimeMin" class="plusbtn">+</button>
          <span id="timeMin" class="number">5</span>
          <button id="minusTimeMin" class="minusbtn">-</button>
          <br>
          <div id="timeResetWrapper" class="resetWrapper">
            <button id="timeReset" class="resetBtn">Reset</button>
          </div>
        </div>
      </div>
      <div class="times col-xs-6">
        <div class="timesContainer">
          <h4> Break in minutes </h4>
          <button id="plusBreakMin" class="plusbtn">+</button>
          <span id="breakMin" class="number">5</span>
          <button id="minusBreakMin" class="minusbtn">-</button>
          <br>
          <div id="breakResetWrapper" class="resetWrapper">
            <button id="breakReset" class="resetBtn">Reset</button>
          </div>
        </div>
      </div>
    </div>
    <div class="pomodoroContainer">
      <div class="pomodoro">
        <div id="pomodoroTime">
          00 : 00
        </div>
      </div>
    </div>
    <div class='playStop'>
      <i class="fa fa-play btn" id="playPomodoro" aria-hidden="true"></i>
      <i class="fa fa-stop btn" id="stopPomodoro" aria-hidden="true"></i>
    </div>
  </div>
</body>

＆＃13;

在setInterval函数完成jQuery后如何执行函数

0 个答案: