Question

我正在寻找如下图所示的内容：
Live bus map example

理想情况下，随着时间的推移，公交车的图像会在线路上移动，并且会在特定时间到达每个“目的地”。

我在考虑使用HTML5画布功能来做这与翻译/动画在公共汽车和Javascript上得到日期（）和时间，但让公共汽车在一段时间内在两点之间移动让我感到困惑。

例如，是否可以在9点的1点开始公交，9点10点的2点结束？

如果还有其他方法可以解决问题，请告诉我，因为我现在只能考虑使用画布。

Answer 1

你可以尝试做一些jquery。我已经把这个小小的演示文章放在一起让你开始：

documentation

我能够使用结束时间和当前时间之间的差异来计算左侧位置。我让盒子向右移动100个像素然后停止。对于我的例子，这将在一分钟的时间跨度内发生。

var start = new Date();
var end = start.setMinutes(start.getMinutes() +1); //one minute in the future
var pixelsToMove =100;
var oneMinute = (60 * 1 * 1000);
function move(){
  var percentMoved = 1 - (end- new Date())/ oneMinute;
  $('.bus').css({left: (percentMoved * pixelsToMove), position:'absolute'});
  if(percentMoved <= 1){
      setTimeout(move,100);
  }
}
move();

基于HTML中的日期和时间创建“实时”总线地图

1 个答案: