我一直在寻找一个基于一天中时间的 jquery 计数计时器,但我很难找到一个,所以在这里我只写了我自己的。这是给任何正在寻找的人。
目标是获取一天中的时间,计算当前时间当天的百分比,将其乘以目标总和并开始添加以创建现实的时间场景。我的计时器正在触发以创建不稳定数据流的模拟,但您可以轻松地将其更改为稳定增加。
带数字的元素是#counter
,物镜总和是3.5mm。
我一直在寻找一个基于一天中时间的 jquery 计数计时器,但我很难找到一个,所以在这里我只写了我自己的。这是给任何正在寻找的人。
目标是获取一天中的时间,计算当前时间当天的百分比,将其乘以目标总和并开始添加以创建现实的时间场景。我的计时器正在触发以创建不稳定数据流的模拟,但您可以轻松地将其更改为稳定增加。
带数字的元素是#counter
,物镜总和是3.5mm。
var currentNumber;
$(document).ready(function (e) {
var currDate = new Date();
var mins = currDate.getMinutes();
var hours = currDate.getHours();
var seconds = currDate.getSeconds();
var combined = (hours * 60 * 60) + (mins * 60) + seconds;
var percentage = (combined / 90000);
var startingPoint = Math.round(3500000 * percentage);
currentNumber = startingPoint;
$('#counter').html(formatNumber(startingPoint));
setTimeout(function () {
updateNumber(currentNumber)
}, 100);
});
function updateNumber(startingPoint) {
if (startingPoint % 58 === 0) {
startingPoint += 5;
currentNumber = startingPoint;
$('#counter').html(formatNumber(currentNumber));
setTimeout(function () {
updateNumber(currentNumber)
}, 850);
} else if (startingPoint % 22 === 0) {
startingPoint += 4;
currentNumber = startingPoint;
$('#counter').html(formatNumber(currentNumber));
setTimeout(function () {
updateNumber(currentNumber)
}, 500);
} else if (startingPoint % 6 === 0) {
startingPoint += 1;
currentNumber = startingPoint;
$('#counter').html(formatNumber(currentNumber));
setTimeout(function () {
updateNumber(currentNumber)
}, 75);
} else {
startingPoint += 5;
currentNumber = startingPoint;
$('#counter').html(formatNumber(currentNumber));
setTimeout(function () {
updateNumber(currentNumber)
}, 250);
}
}
function formatNumber(number) {
return addCommas((number).toFixed(0));
}
function addCommas(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}