时间戳

首页 > 解决方案 > 更新日期对象分配的变量

javascript - 更新日期对象分配的变量

问题描述

这是一个向上计数的计时器，从加载页面开始计时，我要创建一个名为 resetcountupDate() 的函数，通过使变量 countupDate 等于当前日期（使用 date() 或某些东西），并且我希望第 4 到最后一行的按钮执行该功能，我下面的代码在重置计时器方面不起作用。

<!DOCTYPE HTML>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" , charset="UTF-8">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100&display=swap');
    p {
      font-family: 'Roboto Slab', serif;
      text-align: center;
      font-size: 60px;
      margin-top: 0px;
    }
  </style>
</head>

<body>

  <p id="demo"></p>

  <p></p>
  <p></p>
  <p></p>
  <p></p>



  <script>
    // Set the date we're counting up from
    var countupDate = new Date();

    function resetcountupDate() {
      var countupDate;
      countupDate = Date();
    }

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

      // Get today's date and time
      var now = new Date().getTime();

      // Find the distance between now and the count up date
      var distance = now - countupDate;

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

      // Output the result in an element with id="demo"
      document.getElementById("demo").innerHTML = days + "d " + hours + "h " +
        minutes + "m " + seconds + "s ";


    }, 1000);
  </script>

  <input type=button value="Show Time" onclick="resetcountupDate();">

</body>

</html>

标签： javascripthtmlglobal

解决方案

主要问题是您countupDate使用的区间具有全局范围，因此重新定义它reset...不会影响您的预期变量

function resetcountupDate() {
  countupDate = new Date() // just this only
}

此外，我建议进行一些额外的更改，让它感觉更像是重置。首先，我做了一个返回间隔的函数，所以当重置时，它首先停止间隔。其次，我还做了一个单独的函数 display ，同时也做了days, hours, minutes, seconds全局作用域，所以重置的时候，我也把这些变量都设置为 0，显示初始值，然后重新开始间隔

function resetcountupDate() {
  clearInterval(x)
  days = hours = minutes = seconds = 0
  display()
  countupDate = new Date()
  x = startInterval()
}


// Set the date we're counting up from
var countupDate = new Date()
var days, hours, minutes, seconds

function display() {
  document.getElementById("demo").innerHTML =
    days + "d " + hours + "h " + minutes + "m " + seconds + "s "
}

function startInterval() {
  return setInterval(function () {
    // Get today's date and time
    var now = new Date().getTime()

    // Find the distance between now and the count up date
    var distance = now - countupDate

    // Time calculations for days, hours, minutes and seconds
    days = Math.floor(distance / (1000 * 60 * 60 * 24))
    hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
    minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))
    seconds = Math.floor((distance % (1000 * 60)) / 1000)

    // Output the result in an element with id="demo"
    display()
  }, 1000)
}

function resetcountupDate() {
  clearInterval(x)
  days = hours = minutes = seconds = 0
  display()
  countupDate = new Date()
  x = startInterval()
}

// Update the count up every 1 second
var x = startInterval()
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100&display=swap');
p {
  font-family: 'Roboto Slab', serif;
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}
<!DOCTYPE HTML>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" , charset="UTF-8">
</head>

<body>

  <p id="demo"></p>

  <p></p>
  <p></p>
  <p></p>
  <p></p>

  <input type=button value="Show Time" onclick="resetcountupDate();">

</body>

</html>

推荐阅读