重置后JavaScript倒计时器不显示按钮
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了重置后JavaScript倒计时器不显示按钮相关的知识，希望对你有一定的参考价值。
我正在尝试创建具有计时器的html5应用程序。在10秒的时间结束后，它将显示一个按钮。假设，一旦用户点击按钮，将显示一个弹出窗口，它将计算变量中的按钮单击并重置计时器。该过程将再次循环。问题是，在用户点击按钮后，并且在计时器第二次倒计时之后，该按钮不显示。
这是Js代码：
<!-- Timer countdown -->
<script type=text/javascript>
var clicks = 0;
function showTimer(selector, seconds)
{
var startTime = Date.now();
var interval;
function showRemaining()
{
var delta = Date.now() - startTime; // milliseconds
var deltaSeconds = delta / (1000);
if (deltaSeconds < seconds) {
// display minutes remaining
$(selector).text(Math.round(seconds - deltaSeconds));
} else {
$(selector).text(0);
clearInterval(interval);
}
}
interval = setInterval(showRemaining, 1000);
showRemaining();
}
$(document).ready(function()
{
showTimer("#countdown", 10);
});
setTimeout(function()
{
$("#proceed").show();
}, 10000);
//when click button
function onClick() {
clicks += 1;
document.getElementById("proceed").style.visibility="hidden";
alert("Getting the message");
document.getElementById("clicks").innerHTML = clicks;
showTimer("#countdown", 10);
};
</script>
这是HTML：
<h1>Test</h1>
<br>
<p ><span id="countdown"></span><br>
Timer Here<br>
<button type="button" id="proceed" onclick="onClick()">Click</button><br>
<a id="clicks">0</a></p>
答案
你忘了再次显示你的按钮，就像你做的那样，它会隐藏起来。删除setTimeout，因为您知道计时器的结束，也可以重复它。
var clicks = 0;
var interval = -1;
function showTimer(selector, seconds)
{
var startTime = Date.now();
function showRemaining()
{
var delta = Date.now() - startTime; // milliseconds
var deltaSeconds = delta / (1000);
if (deltaSeconds < seconds) {
// display minutes remaining
$(selector).text(Math.round(seconds - deltaSeconds));
} else {
$(selector).text(0);
clearInterval(interval);
$("#proceed").show(); // Look at here
}
}
if( interval > -1 ) clearInterval(interval);
interval = setInterval(showRemaining, 1000);
showRemaining();
}
$(function() {
showTimer("#countdown", 10);
});
//when click button
function onClick() {
$("#proceed").hide();
alert("Getting the message");
$("#clicks").text(++clicks);
showTimer("#countdown", 10);
};<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Test</h1>
<br>
<p >
<span id="countdown"></span><br>
Timer Here<br>
<button type="button" id="proceed" onclick="onClick()">Click</button><br>
<a id="clicks">0</a>
</p>另一答案
包括jquery文件链接，
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js" type="text/javascript"></script>
以上是关于重置后JavaScript倒计时器不显示按钮的主要内容，如果未能解决你的问题，请参考以下文章
超实用的JavaScript代码段 Item4 --发送短信验证码