带输入字段的倒数计时器
Countdown Timer with Input Field
我敢肯定有人已经解决了这个问题,但我似乎无法找到它。
我有一个非常基本的倒计时,用户在输入字段中输入分钟数,单击按钮,它就会倒计时。
我想知道的是只是倒计时到忽略刷新页面(继续曾是)。目前,它只是停止倒计时。
这是我目前的情况。
HTML:
<form>
<input id="tminus" placeholder="0:00"></input>
<input id="request" placeholder="Enter Minutes here"></input>
<a href="#" class="button enterTime">Submit Time</a>
<input type="reset" value="Clear form" />
</form>
JS:
$('.enterTime').click(function () {
var reqVal = $('#request').val();
var parAmt = parseInt(reqVal);
var totalAmount = parAmt * 60;
$('#request').val(" ");
var timeloop, timeSet = function () {
totalAmount--;
var minutes = parseInt(totalAmount/60);
var seconds = parseInt(totalAmount%60);
if(seconds < 10)
seconds = "0"+seconds;
$('#tminus').val(minutes + ":" + seconds);
};
var timeloop = setInterval(timeSet, 1000);
})
感谢大家的帮助。
您可以将 totalAmount
保存到 localStorage
并在用户刷新页面时从那里获取值。这是您需要的:
Fiddle
// Get totalAmount from localStorage and if there is positive value call timeSet() immediately
var totalAmount = localStorage.getItem('countDown') || 0,
timeloop;
if (totalAmount) {
timeSet()
}
function timeSet () {
totalAmount--;
// Refresh value in localStorage
localStorage.setItem('countDown', totalAmount);
// If countdown is over, then remove value from storage and clear timeout
if (totalAmount < 0 ) {
localStorage.removeItem('countDown');
totalAmount = 0;
clearTimeout(timeloop);
return;
}
var minutes = parseInt(totalAmount/60);
var seconds = parseInt(totalAmount%60);
if(seconds < 10)
seconds = "0"+seconds;
$('#tminus').val(minutes + ":" + seconds);
timeloop = setTimeout(timeSet, 1000);
}
$('.enterTime').click(function () {
var reqVal = $('#request').val();
var parAmt = parseInt(reqVal);
if (timeloop) {
clearTimeout(timeloop)
}
totalAmount = parAmt * 60;
$('#request').val(" ");
timeSet();
})
// Clear timeout and remove localStorage value when resetting form
$('#countdown').on('reset', function () {
totalAmount = 0;
clearTimeout(timeloop);
localStorage.removeItem('countDown');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="countdown">
<input id="tminus" placeholder="0:00" />
<input id="request" placeholder="Enter Minutes here" />
<a href="#" class="button enterTime">Submit Time</a>
<input type="reset" value="Clear form" />
</form>
我敢肯定有人已经解决了这个问题,但我似乎无法找到它。
我有一个非常基本的倒计时,用户在输入字段中输入分钟数,单击按钮,它就会倒计时。
我想知道的是只是倒计时到忽略刷新页面(继续曾是)。目前,它只是停止倒计时。
这是我目前的情况。
HTML:
<form>
<input id="tminus" placeholder="0:00"></input>
<input id="request" placeholder="Enter Minutes here"></input>
<a href="#" class="button enterTime">Submit Time</a>
<input type="reset" value="Clear form" />
</form>
JS:
$('.enterTime').click(function () {
var reqVal = $('#request').val();
var parAmt = parseInt(reqVal);
var totalAmount = parAmt * 60;
$('#request').val(" ");
var timeloop, timeSet = function () {
totalAmount--;
var minutes = parseInt(totalAmount/60);
var seconds = parseInt(totalAmount%60);
if(seconds < 10)
seconds = "0"+seconds;
$('#tminus').val(minutes + ":" + seconds);
};
var timeloop = setInterval(timeSet, 1000);
})
感谢大家的帮助。
您可以将 totalAmount
保存到 localStorage
并在用户刷新页面时从那里获取值。这是您需要的:
Fiddle
// Get totalAmount from localStorage and if there is positive value call timeSet() immediately
var totalAmount = localStorage.getItem('countDown') || 0,
timeloop;
if (totalAmount) {
timeSet()
}
function timeSet () {
totalAmount--;
// Refresh value in localStorage
localStorage.setItem('countDown', totalAmount);
// If countdown is over, then remove value from storage and clear timeout
if (totalAmount < 0 ) {
localStorage.removeItem('countDown');
totalAmount = 0;
clearTimeout(timeloop);
return;
}
var minutes = parseInt(totalAmount/60);
var seconds = parseInt(totalAmount%60);
if(seconds < 10)
seconds = "0"+seconds;
$('#tminus').val(minutes + ":" + seconds);
timeloop = setTimeout(timeSet, 1000);
}
$('.enterTime').click(function () {
var reqVal = $('#request').val();
var parAmt = parseInt(reqVal);
if (timeloop) {
clearTimeout(timeloop)
}
totalAmount = parAmt * 60;
$('#request').val(" ");
timeSet();
})
// Clear timeout and remove localStorage value when resetting form
$('#countdown').on('reset', function () {
totalAmount = 0;
clearTimeout(timeloop);
localStorage.removeItem('countDown');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="countdown">
<input id="tminus" placeholder="0:00" />
<input id="request" placeholder="Enter Minutes here" />
<a href="#" class="button enterTime">Submit Time</a>
<input type="reset" value="Clear form" />
</form>