Question

我的目标是仅向用户显示当前时段剩余的时间。目前它显示所有时段持续时间和时间扩展，我只想显示一个，这是他们当前的时间范围。

＆＃13;

var periods = [
  [ '07:45' , '08:34' ],
  [ '08:38' , '09:30' ],
  [ '09:34' , '10:23' ],
  [ '10:27' , '11:16' ],
  [ '11:20' , '12:38' ],
  [ '12:42' , '13:31' ],
  [ '13:35' , '14:25' ]
];

generatePeriods();
updateTimePeriods();
setTimeout(updateTimePeriods, 1000); // Update every second

function generatePeriods() {
  var listEl = document.getElementById('periods');
  periods.forEach(function(period) {
    listEl.appendChild(document.createElement('LI'));
  });
}
function updateTimePeriods() {
  var now = new Date();
  var children = document.getElementById('periods').childNodes;
  var i = 0;
  
  for (var i = 0; i < children.length; i++) {
    var child = children[i];
    child.innerHTML = periods[i][0] + ' — ' + periods[i][1]
        + ' => Duration: ' + formatUTCTime(duration(periods[i][0], periods[i][1]))
       + ', Remaining: ' + formatTimeRemaining(timeLeft(now, periods[i][1]));
  }
}
function duration(start, end) {
  var startTime = parseTime(start);
  var endTime = parseTime(end);
  return endTime.getTime() - startTime.getTime();
}
function timeLeft(now, end) {
  var nowTime = parseTime(formatTime(now));
  var endTime = parseTime(end);
  return endTime.getTime() - nowTime.getTime();
}
function parseTime(timeStr) {
  var tokens = timeStr.split(':');
  return new Date(1970, 0, 1, parseInt(tokens[0], 10), parseInt(tokens[1], 10));
}
function formatUTCTime(time) {
  var date = new Date(time);
  return padZero(date.getUTCHours()) + ':' + padZero(date.getUTCMinutes());
}
function formatTime(time) {
  var date = new Date(time);
  return padZero(date.getHours()) + ':' + padZero(date.getMinutes());
}
function formatTimeRemaining(time) {
  var sign = '+';
  if (time < 0) { time *= -1; sign = '–'; }
  var date = new Date(time);
  return sign + padZero(date.getUTCHours()) + ':' + padZero(date.getUTCMinutes())  + ':' + padZero(date.getUTCSeconds());
}
function padZero(n) { return ('00' + n).substr(-2); }

＆＃13;

body {
  background-color: #A00000;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.outer-box {
  border: 3px solid black;
  height: true;
  width: 75%;
  padding: 10px;
  margin: 10px auto 10px auto;
  border-radius: 10px;
  background-color: white;
  text-align:center;
}
#periods {
  border-radius: 5px;
  margin: 20px auto 20px auto;
  padding: 5px;
  font-weight: bold; 
  text-align: center;
}

＆＃13;

<div class="outer-box">
  <div id="periods"></div>
</div>

＆＃13;

Answer 1

您可以使用以下代码段检查时间：

for (var i = 0; i < children.length; i++) {
    var child = children[i];
    var now = new Date();
    var nowHour = now.getHours();
    if(periods[i][0] > nowHour) {
        child.innerHTML = periods[i][0] + ' — ' + periods[i][1]
            + ' => Duration: ' + formatUTCTime(duration(periods[i][0], periods[i][1]))
           + ', Remaining: ' + formatTimeRemaining(timeLeft(now, periods[i][1]));
    }
 }

Answer 2

首先，我稍微更改了您的HTML，<p-tabPanel header="Bezier Curve" [selected]="true" headerStyleClass="greenText">应该是li的孩子。然后我删除了你的generatePeriods（）函数。

如果您不想显示所有期间（只是正面） - 您不需要空ul元素。

然后我稍微修改了你的updateTimePeriods（）函数：

li

所以，现在应该这样工作：

    function updateTimePeriods() {
    var listEl = document.getElementById('periods');
    var now = new Date();
    var count = periods.length;
    listEl.innerHTML='';

      for (var i = 0; i < count; i++) {

       if(formatTimeRemaining(timeLeft(now, periods[i][1])).charAt(0)!='–') { // check if negative
       child=listEl.appendChild(document.createElement('LI'));
        child.innerHTML = periods[i][0] + ' — ' + periods[i][1]
            + ' => Duration: ' + formatUTCTime(duration(periods[i][0], periods[i][1]))
           + ', Remaining: ' + formatTimeRemaining(timeLeft(now, periods[i][1]));

      } 
     }
   }

var periods = [
  [ '07:45' , '08:34' ],
  [ '08:38' , '09:30' ],
  [ '09:34' , '10:23' ],
  [ '10:27' , '11:16' ],
  [ '11:20' , '12:38' ],
  [ '12:42' , '15:55' ],
  [ '13:35' , '15:56' ]
];


updateTimePeriods();
setInterval(updateTimePeriods, 1000); // Update every second

function updateTimePeriods() {
var listEl = document.getElementById('periods');
  var now = new Date();
  var count = periods.length;
 listEl.innerHTML='';
  
  for (var i = 0; i < count; i++) {

   if(formatTimeRemaining(timeLeft(now, periods[i][1])).charAt(0)!='–') {
   child=listEl.appendChild(document.createElement('LI'));
    child.innerHTML = periods[i][0] + ' — ' + periods[i][1]
        + ' => Duration: ' + formatUTCTime(duration(periods[i][0], periods[i][1]))
       + ', Remaining: ' + formatTimeRemaining(timeLeft(now, periods[i][1]));
       
  } 
  
  }
 }
 
 
function duration(start, end) {
  var startTime = parseTime(start);
  var endTime = parseTime(end);
  return endTime.getTime() - startTime.getTime();
}
function timeLeft(now, end) {
  var nowTime = parseTime(formatTime(now));
  var endTime = parseTime(end);
  return endTime.getTime() - nowTime.getTime();
}
function parseTime(timeStr) {
  var tokens = timeStr.split(':');
  return new Date(1970, 0, 1, parseInt(tokens[0], 10), parseInt(tokens[1], 10));
}
function formatUTCTime(time) {
  var date = new Date(time);
  return padZero(date.getUTCHours()) + ':' + padZero(date.getUTCMinutes());
}
function formatTime(time) {
  var date = new Date(time);
  return padZero(date.getHours()) + ':' + padZero(date.getMinutes());
}
function formatTimeRemaining(time) {
  var sign = '+';
  if (time < 0) { time *= -1; sign = '–'; }
  var date = new Date(time);
  return sign + padZero(date.getUTCHours()) + ':' + padZero(date.getUTCMinutes())  + ':' + padZero(date.getUTCSeconds());
}
function padZero(n) { return ('00' + n).substr(-2); }

body {
  background-color: #A00000;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.outer-box {
  border: 3px solid black;
  height: true;
  width: 75%;
  padding: 10px;
  margin: 10px auto 10px auto;
  border-radius: 10px;
  background-color: white;
  text-align:center;
}
#periods {
  border-radius: 5px;
  margin: 20px auto 20px auto;
  padding: 5px;
  font-weight: bold; 
  text-align: center;
}

P.S。我因为测试而更新了句点数组。

消极时删除组件

2 个答案: