Question

基本上，我正在尝试构建一个太空飞船发射应用程序，从电子表格中提取数据，并显示每个航天器发射的剩余时间。顺便说一下，我现在确实关注了Stack上关于剩余时间的（少数）问题，但它们看起来并不全面，我对如何在代码中实现它们感到困惑。

这是我的html片段：

<h2>Rocket Launch: {{launch.name}}</h2>
            <p>Time left: x minutes</p>
            <script>
            var currentdate = new Date(); 
            var datetime = (currentdate.getMonth()+1) + "/" + currentdate.getDate() + "/"
            + currentdate.getFullYear() + " "  
            + currentdate.getHours() + ":"  
            + currentdate.getMinutes() + ":" 
            + currentdate.getSeconds();
            </script>

正如你所看到的，我正在使用angularJS的$ scope来获得第1行的发布名称。然后我试图显示发布前的剩余时间......但我有点不确定该怎么做所以？在第3行开始的脚本部分中，我发现了如何显示当前时间/日期，但我怎么能够在HTML中显示剩余时间（启动时 - 当前时间）？我有点困惑，想要一些指导来指导我。

顺便说一句，我刚刚开始使用AngularJS，并希望将一些简单但有意义的东西放在一起。很抱歉几乎是个新手。

由于

Answer 1

我花了几分钟写了一个倒计时算法

$scope.CountDown = {
    getTimeRemaining: function(endtime) {
      var t = Date.parse(endtime) - Date.parse(new Date());
      var seconds = Math.floor((t / 1000) % 60);
      var minutes = Math.floor((t / 1000 / 60) % 60);
      var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
      var days = Math.floor(t / (1000 * 60 * 60 * 24));
      return {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
      };
    },

    initializeClock: function(endtime) {
      function updateClock() {
        var t = $scope.CountDown.getTimeRemaining(endtime);

        $scope.CountDown.days = t.days;
        $scope.CountDown.hours = ('0' + t.hours).slice(-2);
        $scope.CountDown.minutes = ('0' + t.minutes).slice(-2);
        $scope.CountDown.seconds = ('0' + t.seconds).slice(-2);

        if (t.total <= 0) {
          $interval.cancel(timeinterval);
        }
      }

      updateClock();
      var timeinterval = $interval(updateClock, 1000);
    }
}

您只需将CountDown对象添加到范围并调用$scope.CountDown.initializeClock($scope.launch.date);

即可

我在这里做了一个傻瓜https://plnkr.co/edit/x0BkVPgPLjD8rtbfADtY?p=preview

您可以在html视图上显示CountDown.days，CountDown.hours，CountDown.minutes和CountDown.seconds

Answer 2

这可能会有所帮助。以下是处理基本倒计时的一种非常简单的方法。将“计数器”设置为任何数字。然后简单地在你的html中有一个带有ID计数的跨度，它应该可以解决问题。可以将这个实现到您的代码中。

HTML：

 <span id="count"></span>

JS

var counter = 91;

setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;

Answer 3

检查here。它讨论了如何找到2个日期之间的差异。您需要以日期格式和当前时间一起启动时间。

既然你有这两个日期，那么这里就是你需要聪明的地方。

第1部分：两个日期之间的差异将给出你的毫秒差异，所以你需要将它转换回你想要的格式（即0天，1小时，1分钟，10秒等）。

第2部分：我假设您希望每秒更新一次，以便它看起来像倒计时。为此，您需要执行我在函数中描述的所有内容并将结果分配给范围变量：

var countdown = function () {
    var launchTime = new Date(//whatever it is);
    var currentTime = new Date(//current Time);
    var difference = (launchTime - currentTime)
    $scope.currentTimeLeft = difference; //this is in milliseconds. If you don't want that you'll have to do some logic
}

然后在您的HTML中，您将能够通过此访问currentTimeLeft：

<p>Time left: {{currentTimeLeft}} minutes</p>

然而，这只会计算一次并且将会是＃34; old＆＃34;字面上一秒钟之后。因此，您可以添加setInterval函数以每秒调用倒计时功能。

setInterval(function(){ countdown() }, 1000); //1000 == 1 second.

您还可以查看使用原生AngularJS $interval每秒调用倒计时功能。

获得时间（倒计时） - Html，Javascript，AngularJS

3 个答案: