Getting Time Left (Countdown) -- Html, Javascript, AngularJS - Stack Overflow

admin管理员组

文章数量:1289623

Basically, I'm trying to build a spaceship launch app that pulls data from say, a spreadsheet, and displays the time left for each spacecraft's launch. BTW, I did look at the (few) questions on Stack right now about getting time left, but they don't seem very prehensive and I'm confused on how to implement them into my code.

Here's a snippet from my 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>

As you can see, I'm using angularJS's $scope to get the launch's name in line 1. Then I'm trying to display the time left until the launch...but I'm kind of unsure how to do so? In the script part starting in line 3, I found out how to display the Current time/date, but how am I supposed to be able to display the time remaining (launchtime - currenttime) in the HTML? I'm kind of confused and would like a few pointers to guide me.

By the way, I'm just starting out in AngularJS and hoping to put something somewhat simple yet meaningful together. Sorry about pretty much being a newb.

Thanks

Basically, I'm trying to build a spaceship launch app that pulls data from say, a spreadsheet, and displays the time left for each spacecraft's launch. BTW, I did look at the (few) questions on Stack right now about getting time left, but they don't seem very prehensive and I'm confused on how to implement them into my code.

Here's a snippet from my 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>

As you can see, I'm using angularJS's $scope to get the launch's name in line 1. Then I'm trying to display the time left until the launch...but I'm kind of unsure how to do so? In the script part starting in line 3, I found out how to display the Current time/date, but how am I supposed to be able to display the time remaining (launchtime - currenttime) in the HTML? I'm kind of confused and would like a few pointers to guide me.

By the way, I'm just starting out in AngularJS and hoping to put something somewhat simple yet meaningful together. Sorry about pretty much being a newb.

Thanks

• javascript
• html
• angularjs

Share Improve this question Follow asked Jun 29, 2016 at 18:58 FreedomFreedom 34722 gold badges77 silver badges2424 bronze badges 5

• 2 Where is the launch date located relatively to this code? – Efe Omoregie Elijah Commented Jun 29, 2016 at 19:04
• Sorry, not sure what you meant by that, do you mind rephrasing that? – Freedom Commented Jun 29, 2016 at 19:06
• 1 I mean can you access the date from launch.date? for example – Efe Omoregie Elijah Commented Jun 29, 2016 at 19:13
• Yeah, I can pull {{launch.date}} from my code to get the launch date--I'm just wondering how to do the subtraction currenttime-launchdate/time then display it in place of the Time left: x minutes – Freedom Commented Jun 29, 2016 at 19:17
• 1 You can calculate the difference in JavaScript Date objects: stackoverflow./a/7763335/1828744 – JonK Commented Jun 29, 2016 at 19:18

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 11

I took a few minutes to write up a countdown algorithm

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

All you have to do is add the CountDown object to your scope and call $scope.CountDown.initializeClock($scope.launch.date);

I made a plunker here https://plnkr.co/edit/x0BkVPgPLjD8rtbfADtY?p=preview

You can display CountDown.days, CountDown.hours, CountDown.minutes and CountDown.seconds on your html view

This might help. Below is a pretty simple way to handle a basic countdown. Set the "counter" to any number. Then simply have a span with ID count in your html and it should do the trick. May be able to implement this into your code.

HTML:

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

JS

var counter = 91;

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

Check here. It discusses the how to find the difference between 2 dates. You would need to have you launch time in the date format along with the current time.

Now that you have both dates, here is where you need to get clever.

Part 1: The difference between the two dates will give you the difference in milliseconds, so you'll need to convert it back to the format you want (ie 0 day, 1 hour, 1 minute, 10 seconds etc).

Part 2: I'm assuming you'll want to update it every second so that it looks like a countdown. To do this, you will need to do everything I've described in a function and assign the result to a scope variable:

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
}

Then in your html you'll be able to access the currentTimeLeft by this:

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

However, this will only calculate once and will be "old" literally after one second. So, you can add the setInterval function to call the countdown function every second.

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

You could also look at using the native AngularJS $interval to call the countdown function every second.

本文标签： Getting Time Left (Countdown)HtmljavascriptangularjsStack Overflow