按时间递增数字

Question

我正在尝试设置一个简单的数字计数器，以提供一些有趣的统计数据。

• 计数器必须：
• 仅在视口中计算 - 完成
• 数数 - 完成
• 每月自动更新一定数量的数字。

最后一个有问题。

我想要做的是每月独立增加特定统计数据的数量的功能。

例如：

        <div class="stat col-lg-2">
            <p class="counter red-bull">4246</p> <!-- Plus 132 every month -->
            <p class="counter-name">Cans of red bull</p>
        </div>
        <div class="stat col-lg-2">
            <p class="counter ping-pong">7624</p> <!-- Plus 215 every month --> 
            <p class="counter-name">Games of ping pong</p>
        </div>
        <div class="stat col-lg-2">
            <p class="counter fifa">635</p> <!-- Plus 46 every month -->
            <p class="counter-name">Hours of FIFA</p>
        </div>

我不知道该怎么做，我对date() 函数的了解也非常有限。

我已经修改了我现有的代码。

http://jsfiddle.net/patadvis/csk88vfc/

谢谢！

Answer 1

你可以自己制作简单的 JavaScript 函数，这里是：

function updateCounters() {
    var START_DATE = new Date(2014, 7, 8), // start date (e.g. today)
        // I typed in "7" because in JS months start from 0
        // edit the date if you want to see a change
        ONE_MONTH = 2592000000, // one month in milliseconds
        MONTHS = parseInt((new Date() - START_DATE) / ONE_MONTH);

    $('.red-bull').html(parseInt($('.red-bull').html()) + MONTHS * 132);
    $('.ping-pong').html(parseInt($('.ping-pong').html()) + MONTHS * 215);
    $('.fifa').html(parseInt($('.fifa').html()) + MONTHS * 46);
}

updateCounters();

上述函数会每月自动更新数值。

工作示例：http://jsfiddle.net/MeBeiM/csk88vfc/4/

如果您想在每个月的第一天更新，那么您只需将函数内的第一行更改为：

var START_DATE = new Date(2014, 7, 1); // first august 2014

---

如果您想在一个月内逐步更新值，您可以对函数进行一些小改动，如下所示：

function updateCounters() {
    var START_DATE = new Date(2014, 7, 8), // start date (e.g. today)
        // I typed in "7" because in JS months start from 0
        // edit the date if you want to see a change
        ONE_MONTH = 2592000000, // one month in milliseconds
        MONTHS = (new Date() - START_DATE) / ONE_MONTH;

    $('.red-bull').html(parseInt($('.red-bull').html()) + parseInt(MONTHS * 132));
    $('.ping-pong').html(parseInt($('.ping-pong').html()) + parseInt(MONTHS * 215));
    $('.fifa').html(parseInt($('.fifa').html()) + parseInt(MONTHS * 46));
}

updateCounters();

工作示例：http://jsfiddle.net/MeBeiM/csk88vfc/5/

注意：我删除了您的其余代码，因为它有很多错误并且它会停止 JavaScript 导致我的函数无法工作。你应该检查一下...

Answer 2

最好在服务器端更新这些数字。我假设您想从某个日期开始每个月更新数字，也许是用户的注册日期。这是您可以在 PHP 中完成此操作的一种方法：

    <?php 
        $registrationDate = $this->currentUser->registrationDate;
        //2592000 is approximate number of seconds in a month
        $monthsRegistered = (time() - $registrationDate)/2592000;
    ?>
    <div class="stat col-lg-2">
        <p class="counter red-bull"><?php echo 4246 + 132*$monthsRegistered?></p> <!-- Plus 132 every month -->
        <p class="counter-name">Cans of red bull</p>
    </div>
    <div class="stat col-lg-2">
        <p class="counter ping-pong"><?php echo 7624 + 215*$monthsRegistered ?></p> <!-- Plus 215 every month --> 
        <p class="counter-name">Games of ping pong</p>
    </div>
    <div class="stat col-lg-2">
        <p class="counter fifa">6<?php echo 35 + 46*$monthsRegistered ?></p> <!-- Plus 46 every month -->
        <p class="counter-name">Hours of FIFA</p>
    </div>