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>

按时间递增数字

2 个答案: