如何将里程表效果添加到countup-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

487683

文章

249181231

访问

+关注

分类

暂无分类

日期归档

暂无数据

如何将里程表效果添加到countup

发布于2021-10-23 03:17 阅读(453) 评论(0) 点赞(18) 收藏(1)

我正在尝试向我的计数计时器添加里程表效果（如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);

解决方案

你必须提供一个号码给它...

因此，如果您希望显示单词分隔符“天 - 小时 - 分钟 - 秒”，则必须在format选项中定义它。

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

另外，一定要添加前导零！

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>

window属性：controllers

2022年最受欢迎的8大编程语言

为什么都说程序员找不到女朋友，但是身边程序猿的却没一个单身的

30岁以上你还死磕技术，别说拿高薪，可能你连饭碗都会保不住

程序员被开除，老板：“有你参与的项目全黄了！”

笑话：一个测试工程师走进一家酒吧

趣图：程序员头疼的4种原因

笑话：面试官：请拿出一段体现你水平的代码。我： sudo rm -rf /*面试官：这体现了你哪方面能力？

网友说：做开发，不被领导喜欢怎么办？

前端精选：在 WPF 中实现融合效果

所属网站分类: 技术文章 > 问答

作者：黑洞官方问答小能手