Question

我为秒表设计了以下代码。所有选项第一次正常工作仍然点击重置按钮。但是小孩的膝盖并没有正常工作。一旦我点击了重置按钮，当我使用

时，圈选项没有显示

＆LT; - document.getElementById（＆＃34; mainContainer＆＃34;）。remove（）; - ＆GT;

如果我不使用上面的代码，它会显示在圈中的旧值并没有删除

＆＃13;

var secOne = 0,
  secTwo = 0,
  minOne = 0,
  minTwo = 0,
  hourOne = 0,
  hourTwo = 0;
var t;
var timer_is_on = 0;

function timedCount() {
  document.getElementById("txt").value = (hourTwo + hourOne + ":" + minTwo + minOne + ":" + secTwo + secOne);
  secOne++;
  secMinCount();
  t = setTimeout(function() {
    timedCount();
  }, 1000);
}

function secMinCount() {
  if (secOne == 10) {
    secTwo++;
    secOne = 0;
    if (secTwo == 6) {
      minOne++;
      secTwo = 0;
      if (minOne == 10)
        minHourCount();
    }
  }
}

function minHourCount() {
  minTwo++;
  minOne = 0;
  if (minTwo == 6) {
    hourOne++;
    minTwo = 0;
    if (hourOne == 10) {
      hourOne = 0;
      hourTwo++;
    }
  }
}

function startWatch() {
  $('#start').hide();
  $('#stop').show();
  $('#lap').show();
  $('#reset').show();
  startContinue();
}

function stopWatch() {
  $('#stop').hide();
  $('#continue').show();
  clearTimeout(t);
  timer_is_on = 0;
}

function continueWatch() {
  $('#continue').hide();
  $('#stop').show();
  startContinue();
}

function startContinue() {
  if (!timer_is_on) {
    timer_is_on = 1;
    timedCount();
  }
}

function lapWatch() {
  var mainContainer = document.getElementById('mainContainer');
  var newDiv = document.createElement('div');
  var newText = document.createElement('output');
  newText.type = "output";
  newText.value = hourTwo + hourOne + ":" + minTwo + minOne + ":" + secTwo + secOne;
  newDiv.appendChild(newText);
  mainContainer.appendChild(newDiv);
}

function resetWatch() {
  $('#lap').hide();
  $('#stop').hide();
  $('#continue').hide();
  $('#start').show();
  $('#reset').hide();
  clearTimeout(t);
  timer_is_on = 0;
  secOne = 0, secTwo = 0, minOne = 0, minTwo = 0, hourOne = 0, hourTwo = 0;
  document.getElementById("txt").value = hourTwo + hourOne + ":" + minTwo + minOne + ":" + secTwo + secOne;
  document.getElementById("mainContainer").remove();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Stopwatch</title>
  
</head>

<body>
  <button onclick="continueWatch()" id="continue" style="display:none">Continue count!</button>
  <button onclick="startWatch()" id="start">Start count!</button>
  <button onclick="stopWatch()" id="stop" style="display:none">Stop count!</button>
  <button onclick="resetWatch()" id="reset" style="display:none">Reset count!</button>
  <input type="text" id="txt" value="0:00:00">

  <div id="mainContainer">
    <button onclick="lapWatch()" id="lap" style="display:none">Lap count!</button>
  </div>
  <div id="result"></div>
  <script type="text/javascript" src="js/script.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>

</html>

＆＃13;

Answer 1

你正在删除整个div，而不仅仅是div中的div。

更新代码：

function resetWatch() {

  var mainContainer = document.getElementById('mainContainer');
  Array.prototype.slice.call(mainContainer.getElementsByTagName('DIV')).forEach(function(e) {
    e.remove();
  });
  console.dir(mainContainer);

  $('#lap').hide();
  $('#stop').hide();
  $('#continue').hide();
  $('#start').show();
  $('#reset').hide();

  clearTimeout(t);
  timer_is_on = 0;
  secOne = 0, secTwo = 0, minOne = 0, minTwo = 0, hourOne = 0, hourTwo = 0;
  document.getElementById("txt").value = hourTwo + hourOne + ":" + minTwo + minOne + ":" + secTwo + secOne;
};

使用divs循环所有mainContainer.getElementsByTagName('DIV')的主要合约人，因此我们不会删除该按钮，只会移除圈数。阅读Array.prototype.slice()的好地方，它可以让你循环一系列元素。

另外一些出色的控制台工具是console.log和console.dir。

也希望使用jQuery试试：

  $("#mainContainer > div").each(function(v, e) {
    $(e).remove();
  });

不确定是否按照设计，但如果不希望改变，则有时候圈数为1秒;

newText.value = hourTwo + hourOne + ":" + minTwo + minOne + ":" + secTwo + secOne;

到newText.value = document.getElementById('txt').value;

如何重置秒表的圈数并再次运行

1 个答案: