How to make jQuery countdown a constant one

I created a little countdown (I know it is not the correct term but don't know what is). It counts from one number to another for a specific time.

<div class="headline"> 
  <p> How much remains to meet the goal? </p>
  </div>
<div class="loader">
  <span class="count">350000</span>
</div>

$('.count').each(function () {
    $(this).prop('Counter',336123).animate({
        Counter: $(this).text()
    }, {
        duration: 1728000000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

You can see the code here:

The problem is that whenever the countdown is opened, these 20 days will start from this moment and from the originally assigned number.

How do I make the time start running from one moment run continuously, and when someone opens the page to see only the numbers that remain at the time of opening.

Excuse me for this bad explanation!

Solution

Ok, so you can take adventage of the Date() function which is available even on Vanilla javascript.

The Date object is used to work with dates and times.

Date objects are created with new Date().

I created a code for you, the only thing you need to do is to tweak the specific date that you want to countdown to on the second line.

// Set the date we're counting down to
var countDownDate = new Date("Dec 09, 2017 19:49:00").getTime(); //CHANGE HERE<----

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var seconds = Math.floor((distance % (1000 * 60))/1000 )+ //seconds
  (Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)))*60+ // min to sec
  (Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)))*60*60+ // hours to sec
  (Math.floor(distance / (1000 * 60 * 60 * 24)))*60*60*60; // days to sec

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML =  seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

@background-color: #4684ee;
@loader-color: #fff;
@loader-size: 40vh;
@import '//fonts.googleapis.com/css?family=Bangers';
@headline: 40vh;

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;  
}

body {
  display: flex;  
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: blue;
}

.loader {
  color: #fff;
  
  font-family: Bangers, Menlo, Monaco, monospace;
  font-weight: bold;
  font-size: @loader-size;
  letter-spacing: 0.6rem;
  opacity: 0.9;
}

.headline {
  font-family: Bangers, Menlo, Monaco, monospace;
  color: #fff;
  font-size: 20vh;
}

<body>
<div class="headline"> 
  <p> How much remains to meet the goal? </p>
 </div>
  <p class="loader" id="demo"></p>
</body>