Скрипт анимированных бегущих цифр

Скрипт анимированных бегущих  цифр

Часто необходимо для наглядности показать какие-то показатели в виде анимированных цифр.

Для этих целей можно использовать простой javascript.

<script type="text/javascript">// <![CDATA[
window.onload=function(){
function number_to(id,from,to,duration)
{
var element = document.getElementById(id);
var start = new Date().getTime();
setTimeout(function() {
var now = (new Date().getTime()) - start;
var progress = now / duration;
var result = Math.floor((to - from) * progress + from);
element.innerHTML = progress < 1 ? result : to;
if (progress < 1) setTimeout(arguments.callee, 10);
}, 10);
}
number_to("example",1,96,4000);
number_to("example2",10,540,5000);
number_to("example3",5000,20000,5000);
number_to("example4",1000,12673,4000);
};
// ]]></script>

А в тело документа вставить

<div id="example"></div>

<div id="example2"></div>

<div id="example3"></div>

<div id="example4"></div>

Пример на сайте

Можно регулировать скорость изменения цифр и начальное число, от которого пойдет отсчет.


Оставить комментарий

comments powered by HyperComments