用jQuery计算时间差

Question

我正在尝试创建一个显示电视节目名称和节目持续时间的简单应用。我需要做的是根据时间改变跨度的宽度。如果节目已经开始，用户应该会看到一个彩色进度条，并且它的宽度应该是时间线的某个百分比。

// this is a very simplified version of the json I'm getting

var data = { "showName":"Batman Begins", "duration":"141", "startTime":"22 January 2016 17:30:00" };

function showProgress(){
	var timeline = $('.timeline');
	var duration = data.duration; // time in minutes. Getting this from a json
	var timelineSection = 100 / duration;
	var maxWidth = 100;
	var increment = timelineSection;
    var now = Math.floor($.now() / 1000); // UNIX timestamp for current date and time
    var startTime = Date.parse(data.startTime) / 1000; // UNIX timestamp for showtime

	var timer = setInterval(function(){

		$('.timeline').css({ 'width' : timelineSection + '%' });
		timelineSection = timelineSection + increment; // doing this to keep the incrementation same everytime
		if (timelineSection > maxWidth) {
			clearInterval(timer);
			$('.timeline').css({ 'width' : timelineSection + '%' });
		}
	}, 1000); // running every second instead of minute for demo purposes
}

$(document).ready(function(){
	$('.showName').html(data.showName);
  $('.startTime').html(data.startTime);
	showProgress();
});

.wrapper {
	margin: auto;
	width: 500px;
}

.timeline-container {
	background: #bbb;
}

.timeline {
	background: green;
	height: 20px;
    margin: 0 0 10px;
	max-width: 100%;
	transition: all 200ms linear;
	width: 0%;
}

.example-timeline {  
    background: green;
	height: 20px;
    margin: 0 0 10px;
	max-width: 100%;
	transition: all 200ms linear;
}

.example-timeline.half { width: 50%; }
.example-timeline.twothirds { width: 66.6666%; }
.example-timeline.onethird { width: 33.3333%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <h1 class="showName"></h1>
  <p class="description">Show starting at: <span class="startTime"></span></p>
  <div class="timeline-container"> 
    <div class="timeline"></div>
    
    <div class="example-timeline half"></div>
    <div class="example-timeline twothirds"></div>
    <div class="example-timeline onethird"></div>
  </div>
</div>

如果节目已经开始，我似乎无法弄清楚如何正确显示时间线。请参阅 sn-p 中的示例时间线。我有一个节目开始的倒计时时钟，当节目开始显示时间线时它会隐藏起来，而且效果很好。

我真的希望有人可以帮助我:)

Answer 1

只需执行一些计算来初始化时间线

// this is a very simplified version of the json I'm getting

var data = { "showName":"Batman Begins", "duration":"141", "startTime":"22 January 2016 17:30:00" };

function showProgress(){
	var timeline = $('.timeline');
	var duration = data.duration; // time in minutes. Getting this from a json
	var timelineSection = 100 / duration;
	var maxWidth = 100;
	var increment = timelineSection;
    //var now = Math.floor($.now() / 1000); // UNIX timestamp for current date and time
    var now = Math.floor(Date.parse("22 January 2016 17:39:00") / 1000);
    var startTime = Date.parse(data.startTime) / 1000; // UNIX timestamp for showtime
    if (now > startTime) {
      var elapsed = Math.floor((now-startTime)/60);                   //timespan converted to minutes
      timelineSection = Math.min(maxWidth, elapsed*timelineSection);  //set the start width to match the time elapsed but only reach maximum of 100
      $('.timeline').css({ 'width' : timelineSection + '%' });        //set the initial width first
      timelineSection += increment;                                   //to be used as next width
    }

	var timer = setInterval(function(){

		$('.timeline').css({ 'width' : timelineSection + '%' });
		timelineSection = timelineSection + increment; // doing this to keep the incrementation same everytime
		if (timelineSection > maxWidth) {
			clearInterval(timer);
			$('.timeline').css({ 'width' : timelineSection + '%' });
		}
	}, 1000); // running every second instead of minute for demo purposes
}

$(document).ready(function(){
	$('.showName').html(data.showName);
  $('.startTime').html(data.startTime);
	showProgress();
});

.wrapper {
	margin: auto;
	width: 500px;
}

.timeline-container {
	background: #bbb;
}

.timeline {
	background: green;
	height: 20px;
    margin: 0 0 10px;
	max-width: 100%;
	transition: all 200ms linear;
	width: 0%;
}

.example-timeline {  
    background: green;
	height: 20px;
    margin: 0 0 10px;
	max-width: 100%;
	transition: all 200ms linear;
}

.example-timeline.half { width: 50%; }
.example-timeline.twothirds { width: 66.6666%; }
.example-timeline.onethird { width: 33.3333%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <h1 class="showName"></h1>
  <p class="description">Show starting at: <span class="startTime"></span></p>
  <div class="timeline-container"> 
    <div class="timeline"></div>
    
    <div class="example-timeline half"></div>
    <div class="example-timeline twothirds"></div>
    <div class="example-timeline onethird"></div>
  </div>
</div>

Answer 2

HTML - 我更新了您的 HTML，向您展示了一种处理 UX 演示的不同方式，方法是针对 .showInfo 类中提供的内容范围状态使用 CSS。计算放映时间时，会提供 data-attr。这允许 CSS 显示或隐藏某些文本，稍后将允许您构建其他与状态相关的样式（例如不同的进度条颜色）。

<div class="wrapper showInfo">
  <h1 class="showName"></h1>
  <p class="description">
    <span class="status past">The show has finished</span>
    <span class="status present">It started on </span>
    <span class="status future">It will start on</span>
    <span class="showTimeInfo"></span></p>
  <div class="timeline-container"> 
    <div class="timeline"></div>
  </div>

  <div class="showStatus">
    <div class="status past">Oh man, it's over!</div>
    <div class="status present">It is ON!</div>
    <div class="status future">Dude, the show is on later.</div>
  </div>
</div>

附加 CSS - 您当前的 CSS 应该非常适合，附加样式用于更新所描述的功能。

.showInfo > .showStatus > .status {display: none;}
.showInfo > .description > .status {display: none;}

.showInfo[data-state="past"] .showStatus .past, .showInfo[data-state="past"] .description .past {display: inline-block;}
.showInfo[data-state="present"] .showStatus .present, .showInfo[data-state="present"] .description .present {display: inline-block;}
.showInfo[data-state="future"] .showStatus .future, .showInfo[data-state="future"] .description .future {display: inline-block;}

JavaScript - 日期/时间在 JavaScript 中可能有点棘手，所以我没有添加很多聪明的部分或任何可测量的智能。考虑将 Moment.js（或类似的）作为您项目的库。

// this is a very simplified version of the json I'm getting
var data = { "showName":"Batman Begins", "duration":"5", "startTime":"17 January 2016 20:09:00" };

// Make some jQuery object vars so you only have to call them once
var timeline = $('.timeline');
var showInfo = $('.showInfo');
var showTimeInfo = $('.showTimeInfo');

// Always make a timeout into a global var so you can cancel it later
var progressTimeout = {};
var tickDuration = 1000;

// Self calling function
function showProgress () {
  // Set some time related vars
    var now = Math.floor($.now() / 1000);
    var startTime = Date.parse(data.startTime) / 1000;
    // Conver 'duration' into seconds
    var durationSec = parseInt(data.duration, 10) * 60
    var endTime = (Date.parse(data.startTime) / 1000) + durationSec;

    // Help for our conditional statments
    var showStart = startTime - now;
    var showEnd = + endTime - now;

    // Events that are in the past will be minus - thus false
    // If both are grater than zero, then the show is on now
    if (showStart>0 && showEnd>0) {
      // Set a data-attr at the top of our content so we can use CSS as an aide
      showInfo.attr('data-state', 'future');
          showTimeInfo.html(data.startTime)
    } else if (showEnd>-1) {
      // If showEnd is zero or more then the show is on, but not over
      // Now we can make the progress bar work

      // Work out the progress of the show as a percentage
      var progress = now - startTime;
      var percent = Math.ceil(progress / (durationSec / 1000) / 10);    

                // Use the percentage to push progress bar
      timeline.css('width', percent + "%")
      // Set the state to say that the show is on in the 'present'
      showInfo.attr('data-state', 'present');
          showTimeInfo.html(data.startTime)

    } else {
        // Both startTime and endTime are now in the past
      // Make the bar full
      timeline.css('width', '100%')
      showInfo.attr('data-state', 'past');
      // Clear the time text
          showTimeInfo.html("");
      // The timeout is no longer needed
      clearTimeout(progressTimeout);
    }

  progressTimeout = setTimeout(showProgress, tickDuration)

}

$('.showName').html(data.showName);
showProgress();

jsFiddle 示例：https://jsfiddle.net/likestothink/0d7hf2fq/3/