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

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"> 

小提琴 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";
        }
    });
  }
 }

Answer 2

这里有一个解决方案：

使用显示属性：

document.getElementById("button1").style.display="none";

并显示：

document.getElementById("button1").style.display="block";

fiddle

确保将 button1 作为 id 添加到您的按钮：

<input id="button1" type="button" onclick="startTimer()"

小提琴显示了你应该把这段代码放在哪里......

Answer 3

我按照您朋友的建议使用 JQuery 从头开始​​构建它。我认为这里使用您的setTimeout 的所有答案都采用了错误的方法。这对setInterval 来说更像是一项工作，它将提供稍微更少的性能开销和更简洁的代码。

工作示例：http://codepen.io/Chevex/pen/RNomGG

首先，使用一些简单的 HTML。

<div id="timerDisplay"></div>
<button id="startTimer">Start Timer</button>

接下来，一个简单的计时器脚本。

// Passing a function to $() is the same as $(document).on('ready', function () { ... });
// It waits for the entire page to be loaded before running the function, which is usually what you want.
$(function () {
  // Get reference to our HTML elements and store them as variables.
  // I prepend them with dollar signs to signify they represent HTML elements.
  var $startTimer = $('#startTimer');
  var $timerDisplay = $('#timerDisplay');

  // The initial time of the timer.
  var time = 120;

  // Hide the timer display for now, until the button is clicked.
  $timerDisplay.hide();

  // Set up a click handler on our $startTimer button.
  $startTimer.click(function () {
    // When the button is clicked, do the following:

    // Set the disabled property to true for our button.
    // Effectively the same as <button id="startTimer" disabled>Start Timer</button>
    $startTimer.prop('disabled', true);

    // Fade in our timer display DIV element.
    $timerDisplay.fadeIn();

    // Set a timeRemaining variable to the value of the initial time.
    var timeRemaining = time;

    // Declare an interval function that runs every second.
    // Also get reference to the intervalId that it returns so we can kill it later.
    var intervalId = setInterval(function () {
      // Every time the interval runs (every second), do the following: 

      // Create a formatted countdown timestamp using the timeRemaining.
      var timeStamp = Math.floor(timeRemaining/60) + ':' + timeRemaining%60;

      // Set the text of our timer display DIV element to our formatted timestamp.
      $timerDisplay.text(timeStamp);

      // If the timeRemaining is zero, clean up.
      if (timeRemaining === 0) {
        // Kill the interval function so it doesn't run again.
        clearInterval(intervalId);
        // Fade out our timer display DIV element.
        $timerDisplay.fadeOut();
        // Show the alert informing the user the timer is up.
        alert('Time is up, please submit a vote :)');
        // Re-enable the startTimer button.
        $startTimer.prop('disabled', false);
      }
      // Otherwise subtract one second from the timeRemaining and allow the interval to continue.
      else {
        timeRemaining--;
      }
    }, 1000);
  });
});