Question

我有一个Javascript函数，它正在执行以下功能，

点击按钮时隐藏div内容。
从html输入字段获取输入时间（h：m：s）并倒计时。
在html p标签中显示计数结果。

＆＃13;

function countdownTimeStart() {

  /* hide the timer panel div when start button click*/
    document.getElementById('timer_panel',). 
    innerHTML=document.getElementById('time_count').innerHTML; 

  /* Start count the time in timer panel */

  /* Start count the time in timer panel */
  var time = document.getElementById("picker-dates").value;
  time = time.split(':');
  var date = new Date();
  var countDownDate = date.setHours(time[0], time[1], time[2]);

  var x = setInterval(function() {

    // set hours, minutes and seconds, decrease seconds
    var hours = time[0];
    var minutes = time[1];
    var seconds = time[2]--;

    // if seconds are negative, set them to 59 and reduce minutes
    if (time[2] == -1) {
      time[1]--;
      time[2] = 59
    }

    // if minutes are negative, set them to 59 and reduce hours
    if (time[1] == -1) {
      time[0]--;
      time[1] = 59
    }

    // Output the result in an element with id="demo"
    // add leading zero for seconds if seconds lower than 10
    if (seconds < 10) {
      document.getElementById("demo").innerHTML = hours + ": " + minutes + ": " + "0" + seconds + " ";
    } else {
      document.getElementById("demo").innerHTML = hours + ": " + minutes + ": " + seconds + " ";
    }

    // If the count down is over, write some text
    if (distance < 0) {
      clearInterval(x);
      document.getElementById("demo").innerHTML = "00:00:00";
    }
  }, 1000);
}

＆＃13;

<div id="timer_panel" class="timer_panel1>
          <input type = " text " id = "picker-dates ">
          <button id="start " onclick="countdownTimeStart(); ">
        </div>
        
        <div id="time_count " class="time_count " style="visibility:hidden;>
          <p id="demo" class="count"></p>
        </div>

＆＃13;

问题是时间计数结果没有显示在＆＃34; demo＆＃34;隐藏计时器面板div时的p标签。我怎么能解决这个问题，任何人都可以帮助我！

Answer 1

我注意到您的代码中出现了一些错误，我会尽可能清楚地为您概述这些错误。

<强> HTML

首先，在您的HTML中，您尚未关闭输入标记。您的div上也有一个拼写错误，ID为time_count且没有封闭引号。

正如其他人提到的那样，你的身份名称中也有一个拼写错误。

但最重要的是，您的p标记包含在您已设置为div的内联的visibility:hidden中。你的JS没有解决这个问题。一旦我从这个div移出p标签，我就能看到输出。

...然而

<强>的JavaScript

Javascript代码也有一些小的调整。为什么要创建一个您不使用的日期对象？我删除这是你不需要的。

我还建议您存储元素以供日后使用，而不是每次使用时调用document.getElementById('demo')，如下所示：

var el = document.getElementById('demo');

计时器达到0后如何停止

我已将此逻辑添加到您的if else块

   if( seconds == 0 && minutes == 0 && hours == 0 ){
      clearInterval(x);
      el.innerHTML = "00:00:00";
   }

它使用您之前尝试实现的代码，但并不是很正确。把它移到这里应该可以解决问题。查看我已更新代码的codepen。

取消计时器

首先，您需要在HTML中添加一个新按钮

   <button id="cancel">Cancel</button>

然后在你的setInterval函数中，我添加了以下代码：

// select cancel button
var cancel = document.getElementById('cancel');
 // set up cancel functionality 
 // create a function to handle the cancel
function cancelCountdown(){
  el.innerHTML = "00:00:00";
  clearInterval(x);
  }
  // attach listener to cancel
  // if cancel button is clicked
  cancel.addEventListener( 'click', cancelCountdown);

暂停计时器

好的，我们需要在HTML中添加另一个按钮，其ID为暂停，如下所示：

   <button id="pause" >pause</button>

然后我们在我们放置的代码下面添加这个暂停功能在清除计时器。

 // select the pause button
   var pause = document.getElementById('pause');

// create pause function
  function pauseCountdown(){
    // grab the current time
    let pauseTime = hours+":"+minutes+":"+seconds;
    // set that time into the timeInput
    // so that next time 'Start' is pressed
    // the paused time will be used
    let timeInput = document.getElementById('picker-dates');
    timeInput.value = pauseTime;
    // stop the time to 'pause'
    clearInterval(x);
  }
  // add listener to catch the pause
  pause.addEventListener('click' , pauseCountdown);

它是如何运作的？我们有点作弊。你不能暂停一个间隔计时器（我能够找到它）但你可以采取您当时使用的值并存储它们。然后，当按下启动按钮时，计时器将以暂停的间隔时间作为倒计时时间再次启动。我希望这是有道理的。查看codepen以查看示例是否有效。

希望这有帮助！

干杯，

Answer 2

您的p元素有id demo1，但您的代码使用demo。

Javascript输出未显示在HTML标记内

2 个答案: