Javascript - 从标签中获取时间

Question

我对 JavaScript 倒计时脚本有点困惑。它的设计目的是从 div 中获取时间，然后倒计时并提交表单。

代码如下:

function secondPassed() {
  var str=$("#countdown").text();
  var pieces = str.split(":");
  var seconds = (Number(pieces[0]) * 60) + Number(pieces[1]);
  var minutes = Math.round((seconds - 30) / 60);

  remainingSeconds = seconds % 60;

  if (remainingSeconds < 10) {
    remainingSeconds = "0" + remainingSeconds;
  }

  document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
  if (seconds == 0) {
    clearInterval(countdownTimer);
    document.qForm.submit();
  } else {
    seconds--;
  }
}
var countdownTimer = setInterval(secondPassed, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Question 1 of 20<time id="countdown">5:00</time></h3>
<form name="qForm">
  <input type="radio"> 219
  <input type="submit" value="Submit">
</form>

问题出现在我必须修改的前几行中。我如何让它从我的时间标签中获取文本，但我却坚持这样:

var pieces = str.split(":");

如何让它从我的时间标签中提取时间值？

Answer 1

实际上，你的逻辑可以大大简化。您需要意识到的是，由于您正在阅读 .innerHTML的元素，您将必须更新它，以便您实际上成功地减少时间:否则您将永远卡在开始时间，因为您正在从文本节点读取但它从未更新。

第 1 步:阅读 .innerHTML你的元素

为了获取<time>的innerHTML元素，您可以像这样简单地完成:

var pieces = document.getElementById('countdown').innerHTML.split(":");

但是，我们始终可以缓存此 DOM 节点，因为无论如何我们都需要稍后更新其innerHTML:

var countdown = document.getElementById('countdown');
var pieces = countdown.innerHTML.split(":");

第 2 步:倒计时

您的时间解析逻辑是正确的，因此您所需要做的就是跟踪时钟上剩余的总秒数，并记住将其减少 1 秒:

var totalSeconds = (Number(pieces[0]) * 60) + Number(pieces[1]);

// Countdown
totalSeconds--;

第 3 步:更新您的 <time>元素以便更新倒计时时间

这里我们只是递减 totalSeconds ，并计算剩余的分钟和秒数。剩余分钟数只是总秒数除以 60 并取底，而剩余秒数只是总秒数的模数。您一开始就已经进行了正确的计算，我只是让它更易于阅读。

然后，您想要更新倒计时元素的innerHTML(还记得我们在步骤1 中缓存了该DOM 节点吗？)。我们使用十元运算符来简化添加 0 的逻辑。到个位数秒的前面:

// Update <time>
var currentMinutes = Math.floor(totalSeconds / 60);
var currentSeconds = totalSeconds % 60;
countdown.innerHTML = currentMinutes + ':' + (currentSeconds < 10 ? '0' + currentSeconds : currentSeconds);

第 4 步:检查计时器是否已超时

这是简单的部分:在一切结束时，只需检查是否 totalSeconds现在是0 。如果是，请清除间隔并提交表单:

// Submit form when we hit 0
if (totalSeconds === 0) {
  window.clearInterval(countdownTimer);
  document.getElementById('qForm').submit();
}

<小时/>

这是一个概念验证示例，但我已经替换了时间，以便我们有 5 秒的时间倒计时(以简化测试)，并且表单提交被注释掉并替换为 alert() :

function secondPassed() {
  var countdown = document.getElementById('countdown');
  var pieces = countdown.innerHTML.split(":");
  var totalSeconds = (Number(pieces[0]) * 60) + Number(pieces[1]);

  // Countdown
  totalSeconds--;

  // Update <time>
  var currentMinutes = Math.floor(totalSeconds / 60);
  var currentSeconds = totalSeconds % 60;
  countdown.innerHTML = currentMinutes + ':' + (currentSeconds < 10 ? '0' + currentSeconds : currentSeconds);
 
  // Submit form when we hit 0
  if (totalSeconds === 0) {
    window.clearInterval(countdownTimer);
    
    alert('Will submit form!');
    // document.getElementById('qForm').submit();
  }
}

var countdownTimer = setInterval(secondPassed, 1000);

<h3>Question 1 of 20<br /><time id="countdown">0:05</time></h3>
<form name="qForm">
  <input type="radio"> 219
  <input type="submit" value="Submit">
</form>

<小时/>

替代推荐:在 HTML5 中存储数据 data-属性

直接从 DOM 节点的 innerHTML 读取数据通常并不理想，因为有时您可能希望在不影响存储数据的情况下更新 HTML。在这种情况下，您始终可以使用 HTML5 dataset API ，其中任意数据存储在 data- 中属性。

在下面的代码片段中，我们可以将倒计时存储在 date-countdown 中属性:

<time id="countdown" data-countdown="0:05"></time>

我们可以简单地创建一个辅助函数来同步 data-countdown值并将其写入innerHTML:

function updateTimer() {
  var countdown = document.getElementById('countdown');
  countdown.innerHTML = countdown.dataset.countdown;
}

您可以调用此函数:

1. 页面加载时，以及
2. 每次倒计时更新

请参阅下面更新的概念验证:

function secondPassed() {
  var countdown = document.getElementById('countdown');
  var pieces = countdown.dataset.countdown.split(":");
  var totalSeconds = (Number(pieces[0]) * 60) + Number(pieces[1]);

  // Countdown
  totalSeconds--;

  // Update <time>
  var currentMinutes = Math.floor(totalSeconds / 60);
  var currentSeconds = totalSeconds % 60;
  countdown.dataset.countdown = currentMinutes + ':' + (currentSeconds < 10 ? '0' + currentSeconds : currentSeconds);
  
  // Update innerHTML
  updateTimer();
 
  // Submit form when we hit 0
  if (totalSeconds === 0) {
    window.clearInterval(countdownTimer);
    
    alert('Will submit form!');
    // document.getElementById('qForm').submit();
  }
}

function updateTimer() {
  var countdown = document.getElementById('countdown');
  countdown.innerHTML = countdown.dataset.countdown;
}

var countdownTimer = setInterval(secondPassed, 1000);
updateTimer();

<h3>Question 1 of 20<br /><time id="countdown" data-countdown="0:05"></time></h3>
<form name="qForm">
  <input type="radio"> 219
  <input type="submit" value="Submit">
</form>