我有一个名为session的变量,当我点击一个按钮时,我会向上或向下递增。然后我有一个计时器,它接受会话变量的参数,该参数在我单击开始按钮时启动,但我的会话变量仍然是初始化它的原始值。如何更新值以便能够实时使用它?
jsfiddle - https://jsfiddle.net/0u24qr47/2/
感谢。
HTML
<h1>Adjust Work Time</h1>
<div id="workTime"></div>
<button class="btn btn-success" id="workMinus">-</button>
<button class="btn btn-success" id="workPlus">+</button>
<h1>Break Time</h1>
<div id="breakLength"></div>
<button class="btn btn-success" id="breakMinus">-</button>
<button class="btn btn-success" id="breakPlus">+</button>
<h1>Clock</h1>
<div><span class="time"></span>
</div>
<button class="btn btn-success start" id="start">start</button>
的Javascript
$(document).ready(function() {
var session = 25;
var breaks = 5;
var workTime = document.getElementById('workTime');
var breakLength = document.getElementById('breakLength');
//update display//
workTime.innerHTML = session;
breakLength.innerHTML = breaks;
//functions for updating variables//
function wMinus() {
session--;
workTime.innerHTML = session;
}
function wPlus() {
session++;
workTime.innerHTML = session;
}
function bMinus() {
breaks--;
breakLength.innerHTML = breaks;
}
function bPlus() {
breaks++;
breakLength.innerHTML = breaks;
}
//update variables when clicked//
$("#breakMinus").click(function() {
bMinus();
});
$("#breakPlus").click(function() {
bPlus();
});
$("#workMinus").click(function() {
wMinus();
});
$("#workPlus").click(function() {
wPlus();
});
window.onload = function () {
console.log("in onload" + session);
var display = document.querySelector('.time'),
timer = new CountDownTimer(session),
timeObj = CountDownTimer.parse(session);
format(timeObj.minutes, timeObj.seconds);
timer.onTick(format);
//click//
document.querySelector('#start').addEventListener('click', function() {
timer.start();
});
function format(minutes, seconds) {
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ':' + seconds;
}
};
});