使用 jQuery 计算时差

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

// 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>

- 我更新了您的 HTML，向您展示了一种处理 UX 表示的不同方式，方法是针对 .showInfo 类中提供的内容范围状态使用 CSS。计算演出时间时，会提供数据吸引力。这允许 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/