我试图设置一个简单的数字计数器，提供一些有趣的统计数据。
- 计数器必须:
- 只在视口中计数-完成
- 计数-完成
- 每月自动更新一定数量的数字。
最后一个我有问题。
我想要做的是拥有每个月独立增加特定统计的数量的功能。
例如:
<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/谢谢!
您可以创建自己的简单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导致我的函数不工作。
最好在服务器端更新这些数字。我假设您希望从某个日期(可能是用户的注册日期)开始每个月更新这些数字。下面是在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>