JQuery или Javascript непрерывный счетчик (отсчет) - PullRequest
Новая
       2

JQuery или Javascript непрерывный счетчик (отсчет)

0 голосов
/ 27 июля 2010

В поисках сценария, в котором я в идеале могу ввести начальный номер и начальную дату, которые затем продолжают увеличиваться в зависимости от установленной мной ставки, например. 1 в секунду . Сценарий в идеале рассчитал бы, на какое число он должен опираться, исходя из разницы между текущим временем и временем начала.

Это должно выглядеть так, как будто показывает счет в реальном времени.

В идеале, что-то вроде счетчика на http://sendgrid.com/

Кто-нибудь получил ссылку или плагин или решение, которым они могут поделиться?

Если числа можно заменить изображениями чисел еще лучше, но отправная точка будет высоко цениться.

Спасибо

Ответы [ 3 ]

5 голосов
/ 27 июля 2010

Возможно, у вас есть страница с такой разметкой: 

<div id='counter'><%= some_number_from_database_or_similar() %></div>

И чтобы вы могли написать такой скрипт: 

var INTERVAL = 1;

$(document).ready( function() {
  var delay = INTERVAL * 1000;
  var target = $('#counter');
  var counter = parseInt( target.text(), 10 );
  setInterval( function() {
    target.text( counter++ );
  }, delay );
} );

Это не совсем точно, так как вы не можете быть уверены, что функция будет вызываться точно раз в секунду, но это будет довольно близко (и насколько точной она вам нужна , тем не мение?). В качестве альтернативы вы можете создать new Date() и получить его временную метку, затем создавать еще одну каждые интервал и просто вычислять количество прошедших фактических секунд ... Кажется, слишком дорого, чтобы того стоить.

Что касается использования изображений для чисел, вы можете просто изменить функцию интервала на что-то вроде: 

function() {
  var counterString = (counter++).toString();
  var chunks = [];
  for( var i = 0; i < counterString.length; i++ ) {
    chunks.push( "<img src='/images/numbers/" + counterString[i] + ".png' />" );
  }
  target.html( chunks.join('') );
}
3 голосов
/ 27 июля 2010

вы можете создать его самостоятельно или , просто используйте этот плагин .там есть отсчет .

1 голос
/ 27 июля 2010

Если вам нужно решение только на javascript, вы можете просто сделать div следующим образом: 

<div id="counter"></div>

И затем использовать следующий скрипт где-нибудь на странице: 

var START_DATE = new Date("July 27, 2010 13:30:00"); // put in the starting date here
var INTERVAL = 1; // in seconds
var INCREMENT = 2; // increase per tick
var START_VALUE = 9001; // initial value when it's the start date
var count = 0;

window.onload = function()
{
 var msInterval = INTERVAL * 1000;
 var now = new Date();
 count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE;
 document.getElementById('counter').innerHTML = count;
 setInterval("count += INCREMENT; document.getElementById('counter').innerHTML = count;", msInterval);
}

ВыВы можете использовать технику, аналогичную методам thenduks, для получения изображений, или вы можете просто стилизовать счетчик div с помощью CSS.

...