【问题标题】:JS counter continuously updatingJS 计数器不断更新
【发布时间】:2012-08-11 12:39:29
【问题描述】:

How to implement a live and persistent number counter on a site

所以我在看这个问题 (^),我想做完全相同的事情,只是有点不同。

我需要其中一个从麻木的 $138,276,343 中每秒增加 15.8 美分

我希望逗号像正常的美元金额一样。

我有什么办法可以让它工作吗?我难住了。和上面问题的发帖人一样,我对JS的了解不多。

【问题讨论】:

    标签: javascript counter continuous


    【解决方案1】:

    这花了我很长时间才回答,因为我必须创建自己的格式货币函数。

    可在此处找到现场演示:http://jsfiddle.net/dm6LL/

    每秒的基本更新非常简单,可以通过 JavaScript 的setInterval 命令完成。

    setInterval(function(){
        current += .158;
        update();
    },1000);
    

    您在上面的代码中看到的update() 函数只是一个简单的更新程序,它引用具有amount id 的对象,将格式化的当前金额放入页面上的一个div。

    function update() {
        amount.innerText = formatMoney(current);
    }
    

    您在update() 函数中看到的金额和电流是预定义的:

    var amount = document.getElementById('amount');
    var current = 138276343;
    

    剩下的就是我的formatMoney() 函数,它接受一个数字并将其转换为货币字符串。

    function formatMoney(amount) {
        var dollars = Math.floor(amount).toString().split('');
        var cents = (Math.round((amount%1)*100)/100).toString().split('.')[1];
        if(typeof cents == 'undefined'){
            cents = '00';
        }else if(cents.length == 1){
            cents = cents + '0';
        }
        var str = '';
        for(i=dollars.length-1; i>=0; i--){
            str += dollars.splice(0,1);
            if(i%3 == 0 && i != 0) str += ',';
        }
        return '$' + str + '.' + cents;
    }​
    

    【讨论】:

    • 太棒了!!!!但是有一个问题,有没有办法让它持续更新而不是加载?我需要这个数字总是上升,而不是每次刷新页面时都从一开始就刷新。不管怎样,虽然代码很棒!!!非常感谢!!!
    • 您仍然可以在加载时执行此操作,但只需计算当前日期应给出的起始编号。我假设 138,276,343 美元的数字是基于特定的时间和日期?
    • 正确,这个数字是在 2012 年 7 月 21 日计算的,从那时起它每秒上升了 0.158
    • 酷 - 我稍微修改了 Evan 的演示以适应这一点:jsfiddle.net/dm6LL/3
    • 我也对我的进行了更多修改。我的从 8 月 15 日开始,之后每秒上升 0.158。您也可以非常轻松地编辑开始日期。这是演示:jsfiddle.net/dm6LL/5
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-05-09
    • 2021-09-16
    • 2012-03-02
    • 1970-01-01
    • 2019-03-24
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多