javascript - 单击时隐藏按钮，计时器用完时显示按钮

Question

我目前有一个计时器，从 2 分钟开始倒计时。 我希望发生的是，当单击按钮时，它会被隐藏，直到计时器用完为止，当计时器用完时，它会再次可见/可单击。我还希望计时器隐藏直到单击按钮，单击按钮时可见，然后在计时器用完后隐藏。

这是我的代码

js

function startTimer() {
userInput = 120;
if(userInput.length == 0){
    alert("Please enter a value");
} else {
var numericExpression = /^[0-9]+$/;

function display( notifier, str ) {
document.getElementById(notifier).innerHTML = str;
}

function toMinuteAndSecond( x ) {
return Math.floor(x/60) + ":" + x%60;
}

function setTimer( remain, actions ) {
(function countdown() {
   display("countdown", toMinuteAndSecond(remain));         
   actions[remain] && actions[remain]();
   (remain -= 1) >= 0 && setTimeout(countdown, 1000);
})();
}

setTimer(userInput, {
 0: function () { alert( "Time Is Up. Please Sumbit Vote.");       }
}); 

}
}

html

<div id="countdown"></div>
<input type="button" onclick="startTimer()" value="Start Timer"> 

fiddle http://jsfiddle.net/grahamwalsh/qur9r3d8/

Answer 1

可以使用JS隐藏和取消隐藏按钮

JSFiddle

向按钮添加 ID

<input id="btn" type="button" onclick="startTimer()" value="Start Timer"/>

JS代码

function startTimer() {
//hide button
document.getElementById("btn").style.display = "none";
//un-hide timer
document.getElementById("countdown").style.display = "inline";

userInput = 10;
if (userInput.length == 0) {
    alert("Please enter a value");
} else {
    var numericExpression = /^[0-9]+$/;

    function display(notifier, str) {
        document.getElementById(notifier).innerHTML = str;
    }

    function toMinuteAndSecond(x) {
        return Math.floor(x / 60) + ":" + x % 60;
    }

    function setTimer(remain, actions) {
        (function countdown() {
            display("countdown", toMinuteAndSecond(remain));
            actions[remain] && actions[remain]();
            (remain -= 1) >= 0 && setTimeout(countdown, 1000);
        })();
    }

    setTimer(userInput, {
        0: function () {
            alert("Time Is Up. Please Sumbit Vote.");
            //un-hide button
             document.getElementById("btn").style.display = "inline";
           //hide timer
            document.getElementById("countdown").style.display = "none";
        }
    });
  }
 }