Question

我正在尝试向递增计时器添加里程表效果（如https://github.hubspot.com/odometer/docs/welcome/所示），但是说明中并未显示如何将其添加到计时器中。我的计时器看起来有点像这样

<script>
// Set the date we're counting down to
var dateCountup = new Date("Jan 29, 2018 12:00:").getTime();

// 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 = now - dateCountup;

    // 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("dateCountEn").innerHTML = "Created " + days + " Days " + hours + " Hours "
    + minutes + " Minutes " + seconds + " Seconds " + "ago";
    document.getElementById("dateCountPl").innerHTML = "stworzono " + days + " Dni " + hours + " Godzin "
    + minutes + " Minut " + seconds + " Sekund " + "temu";

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

`

Answer 1

您必须提供一个号码...

因此，如果要显示单词分隔符“ day-hour-min-sec”，则必须在format选项中进行定义。

然后，只需在前面连接""，就可以像字符串一样连接数字。

此外，请确保添加前导零！

var el = document.querySelector('#dateCount');

od = new Odometer({
  el: el,
  value: "0,0,0",

  // Any option (other than auto and selector) can be passed in here
  format: 'ddd Day dd Hour dd Min dd Sec',
  theme: 'car',
});

// Set the date we're counting down to
var dateCountup = new Date("Jan 29, 2018 12:00:").getTime();

// 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 = now - dateCountup;

  // 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);

  // Add leading zeros
  (hours<10) ? hours="0"+hours : hours;
  (minutes<10) ? minutes="0"+minutes : minutes;
  (seconds<10) ? seconds="0"+seconds : seconds;

  // Output the result in an element with id="demo"
  document.getElementById("dateCount").innerHTML = ""+days+hours+minutes+seconds;

  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("dateCount").innerHTML = "EXPIRED";
  }
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/odometer.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/themes/odometer-theme-car.css" rel="stylesheet"/>


<div id="dateCount"></div>

如何在里程表中添加里程表效果

1 个答案: