剩余时间（倒计时）——Html、Javascript、AngularJS

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

以下是我的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>

火箭发射：{{Launch.name}
剩余时间：x分钟

var currentdate=新日期（）；
var datetime=（currentdate.getMonth（）+1）+“/”+currentdate.getDate（）+“/”
+currentdate.getFullYear（）+“”
+currentdate.getHours（）+“：”
+currentdate.getMinutes（）+“：”
+currentdate.getSeconds（）；

如您所见，我正在使用angularJS的$scope在第1行中获取发布名称。然后我试着显示发射前的剩余时间…但我有点不确定怎么做？在第3行开始的脚本部分中，我了解了如何显示当前时间/日期，但是我应该如何在HTML中显示剩余时间（launchtime-currenttime）？我有点困惑，想要一些指点来指导我

顺便说一下，我刚开始学习AngularJS，希望能把一些简单但有意义的东西放在一起。很抱歉我是个新手

---

谢谢

这可能会有帮助。下面是一个处理基本倒计时的简单方法。将“计数器”设置为任意数字。然后在你的html中有一个带有ID计数的span，它应该可以做到这一点。可以在代码中实现这一点

HTML:

---

这可能会有帮助。下面是一个处理基本倒计时的简单方法。将“计数器”设置为任意数字。然后在你的html中有一个带有ID计数的span，它应该可以做到这一点。可以在代码中实现这一点

HTML:

---

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

$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);
    }
}

$scope.CountDown={
GetTime剩余：函数（endtime）{
var t=Date.parse（endtime）-Date.parse（new Date（））；
var秒=数学地板（（t/1000）%60）；
var分钟=数学地板（（t/1000/60）%60）；
可变小时数=数学楼层（（t/（1000*60*60））%24）；
风险天数=数学下限（t/（1000*60*60*24））；
返回{
“总计”：t，
“天”：天，
“小时”：小时，
“分钟”：分钟，
“秒”：秒
};
},
InitializeLock:函数（endtime）{
函数updatelock（）{
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）；
如果（t.total我花了几分钟写了一个倒计时算法

$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);
    }
}

$scope.CountDown={
GetTime剩余：函数（endtime）{
var t=Date.parse（endtime）-Date.parse（new Date（））；
var秒=数学地板（（t/1000）%60）；
var分钟=数学地板（（t/1000/60）%60）；
可变小时数=数学楼层（（t/（1000*60*60））%24）；
风险天数=数学下限（t/（1000*60*60*24））；
返回{
“总计”：t，
“天”：天，
“小时”：小时，
“分钟”：分钟，
“秒”：秒
};
},
InitializeLock:函数（endtime）{
函数updatelock（）{
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检查。它讨论了如何找到两个日期之间的差异。您需要将启动时间与当前时间一起设置为日期格式

既然你已经有了两个约会，那么你就需要聪明了

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

您还可以看看如何使用本机AngularJS每秒调用倒计时函数。
检查。它讨论了如何查找两个日期之间的差异。您需要将启动时间设置为日期格式以及当前时间

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

既然你已经有了两个约会，那么你就需要聪明了

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

您还可以考虑使用本机AngularJS每秒调用一次倒计时函数。
相对于此代码，启动日期位于何处？抱歉，不确定这是什么意思，您介意重新表述吗？我的意思是您可以从launch.date访问日期吗？例如，是的，我可以拉{launch.date}从我的代码中获取启动日期——我只是想知道如何减去currenttime launchdate/time，然后显示它来代替剩余时间：x分钟您可以计算JavaScript日期对象中的差异：la在哪里
setInterval(function(){ countdown() }, 1000); //1000 == 1 second.