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

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

这是我的密码

js

html

拨弄

---

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

向按钮添加一个ID

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

---

下面是一个解决方案：

使用“显示”属性：

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

并表明：

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

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

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

---

我按照您朋友的建议，使用JQuery从头开始构建了它。我认为这里所有使用
setTimeout
的答案都是错误的。这更像是
setInterval
的一项工作，它将提供稍小的性能开销和更干净的代码

工作示例：

首先，使用一些简单的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);
  });
});

//将函数传递给$（）与$（document）相同；
//它在运行函数之前等待加载整个页面，这通常是您想要的。
$（函数（）{
//获取对HTML元素的引用并将它们存储为变量。
//我在它们前面加上美元符号，表示它们代表HTML元素。
变量$startTimer=$（“#startTimer”）；
var$timerDisplay=$（“#timerDisplay”）；
//计时器的初始时间。
var时间=120；
//暂时隐藏计时器显示，直到单击按钮。
$timerDisplay.hide（）；
//在$startTimer按钮上设置单击处理程序。
$startTimer。单击（函数（）{
//单击按钮时，请执行以下操作：
//将按钮的disabled属性设置为true。
//实际上与启动计时器相同
$startTimer.prop（'disabled'，true）；
//淡入计时器显示DIV元素。
$timerDisplay.fadeIn（）；
//将timeRemaining变量设置为初始时间的值。
var TIMESTAIN=剩余时间；
//声明每秒运行一次的间隔函数。
//还要获取对它返回的intervalId的引用，以便稍后可以终止它。
var intervalId=setInterval（函数（）{
//每次间隔运行时（每秒），请执行以下操作：
//使用剩余时间创建格式化的倒计时时间戳。
var timeStamp=Math.floor（剩余时间/60）+'：'+剩余时间%60；
//将timer display DIV元素的文本设置为格式化的时间戳。
$timerDisplay.text（时间戳）；
//如果剩余时间为零，请清理。
如果（剩余时间===0）{
//终止interval函数，使其不再运行。
clearInterval（intervalId）；
//淡出计时器显示DIV元素。
$timerDisplay.fadeOut（）；
//显示通知用户计时器已启动的警报。
提醒（'时间到了，请提交投票：）'；
//重新启用startTimer按钮。
$startTimer.prop（'disabled'，false）；
}
//否则，从剩余时间中减去1秒，并允许间隔继续。
否则{
剩余时间--；
}
}, 1000);
});
});
您在问题中标记了JQuery，但您没有在小提琴中使用JQuery。有什么原因吗？我的一个朋友告诉我，使用jqeury可以帮助解决我的问题，只要在单击时隐藏btn，在计时器启动时取消隐藏即可。检查这个@liztab，但我继续使用JQuery从头开始编写了一个答案。：）
<input id="button1" type="button" onclick="startTimer()"

<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);
  });
});