如何使 jQuery 倒计时成为一个常数

Question

我创建了一个小倒计时（我知道这不是正确的术语，但不知道是什么）。它在特定时间内从一个数字计数到另一个数字。

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

问题是无论什么时候开启倒计时，这20天都会从这一刻开始，从原来分配的数字开始。

如何让时间从一个时刻运行开始连续运行，当有人打开页面时只看到打开时剩余的数字。

请原谅我这么糟糕的解释！

Answer 1

您将需要以某种方式在某处存储一个值。
由于您只需要存储一个 number 如果您没有与该项目关联的数据库 [似乎不太可能]，则不需要创建一个新的 table。

无论如何，假设您写入 table、某处页面或其他文件 - 您执行以下操作：

//检查storage place，看是否有值（如果没有，这是计数器的第一个运行）

//如果是第一个运行，则当前时间与storage place相同；如果不是，从 storage place.

中获取 starting time

//用这个starting time和当前时间减去得到elapsed time再减去return[显示]remaining time.

以多种方式实施并不困难，但我需要更多细节才能给出更好的答案。

Answer 2

好的，所以你可以尝试 Date() 函数，它甚至在 Vanilla 上也可用 javascript。

Date 对象用于处理日期和时间。

日期对象是用 new Date() 创建的。

我为你创建了一个代码，你唯一需要做的就是在第二行调整你想要倒计时的具体日期。

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

如何使 jQuery 倒计时成为一个常数

How to make jQuery countdown a constant one

javascript

jquery

html

countdown