Javascript - 从标签中获取时间

时间：2017-10-10 13:26:15

标签： javascript html

我有点陷入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(":");

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

4 个答案:

答案 0 :(得分：2)

实际上，您的逻辑可以大大简化。您需要意识到的是，由于您正在从元素的.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节点吗？）。我们使用tenary运算符来简化将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. 每次倒计时更新

    3. 请参阅下面的更新概念验证：

    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>

答案 1 :(得分：1)

不完全确定为什么你想从DOM中选择它，知道你计算5分钟并且省去从DOM解析值的麻烦不仅仅是更好。

或者，设置标记的“datetime”属性。

https://www.w3schools.com/tags/tag_time.asp

请参阅下文，了解阅读本文的一个例子：

https://www.w3schools.com/jsref/prop_time_datetime.asp

答案 2 :(得分：1)

您可以使用以下代码

override func viewDidLayoutSubviews() {
    self.selectedViewController?.view.frame = self.view.frame
    super.viewDidLayoutSubviews()
}

答案 3 :(得分：1)

您可以使用momentJS将时间转换为持续时间（虽然有点矫枉过正）并使用它设置结束日期，如下所示：

function convertStringToDuration( s ) {
  // Just in case, if you plan to use hours as well in the future :)
  const parameterNames = [ 'hours', 'minutes', 'seconds' ];
  const parts = s.split( ':' );
  
  // Generate moment.duration parameters
  const parameters = parameterNames.slice( -parts.length ).reduce( ( result, param, index ) => {
    result[ param ] = parseInt( parts[ index ], 10 );
    return result;
  }, {} );
  
  return moment.duration( parameters );
}

function pass( timer, element, end, callback ) {
  // get the current time
  const now = moment();
  // calculate duration
  let duration = end - now;
  if ( duration <= 0 ) {
    duration = 0;
    clearInterval( timer );
    if ( typeof callback === 'function' ) {
      callback();
    }
  }
  
  // and format time
  const formatted = moment.utc( duration ).format( 'm:ss' );
  element.innerText = formatted;
}

function action() {
  console.log( 'Done' );
}

const countdown = document.querySelector( '#countdown' );
const duration = convertStringToDuration( countdown.innerText );

// set end time
const end = moment().add( duration );

let countdownTimer = setInterval( () => pass( countdownTimer, countdown, end, action ), 250 );
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.0/moment.min.js"></script>
<h3>Question 1 of 20<br><time id="countdown">5:00</time></h3>
<form name="qForm">
  <input type="radio"> 219
  <input type="submit" value="Submit">
</form>

相关问题
最新问题