Предлагаю вашему вниманию пример реализации скрипта, который заполняет значение от нуля до заданного числа. Изменяя в скрипте последнюю строчку можно легко задать конечное значение (число которое получим в результате) и длительность заполнения (время перехода от нуля до заданного значения).
HTML
CSS
JS
HTML
Код
<h1>Увеличение значения до заданного числа </h1>
<div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 300x250 orange media and text -->
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-1961147311692851" data-ad-slot="7771578127"></ins>
<script>(adsbygoogle=window.adsbygoogle||[]).push({});</script>
</div>
<p id="target">Значение будет тут</p>
<p>
Скрипт перехода от нуля до заданного числа.
<br/>
</p>
<div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 300x250 orange media and text -->
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-1961147311692851" data-ad-slot="7771578127"></ins>
<script>(adsbygoogle=window.adsbygoogle||[]).push({});</script>
</div>
<p id="target">Значение будет тут</p>
<p>
Скрипт перехода от нуля до заданного числа.
<br/>
</p>
CSS
Код
@import "http://uway.ucoz.com/materials/1/9/font.css";
body, header, main, section, footer, a, p, div, ul, li, h1, h2, h3, h4, h5, h6
{
padding:0;
margin:0;
outline:0;
text-decoration:none;
list-style:none;
}
body
{
background:#DDD;
font:16px/1.5 sans-serif;
color:#555;
}
h1
{
font:bold 24px/1.5 sans-serif;
margin-top:100px;
text-align:center;
text-transform:uppercase;
}
#canvas_clock
{
margin:0 auto;
margin-top:50px;
display:block;
margin-bottom:50px;
}
p
{
text-align:center;
font-family:"aleoregular", serif;
}
#target
{
padding:50px 0;
font-size:24px;
}
body, header, main, section, footer, a, p, div, ul, li, h1, h2, h3, h4, h5, h6
{
padding:0;
margin:0;
outline:0;
text-decoration:none;
list-style:none;
}
body
{
background:#DDD;
font:16px/1.5 sans-serif;
color:#555;
}
h1
{
font:bold 24px/1.5 sans-serif;
margin-top:100px;
text-align:center;
text-transform:uppercase;
}
#canvas_clock
{
margin:0 auto;
margin-top:50px;
display:block;
margin-bottom:50px;
}
p
{
text-align:center;
font-family:"aleoregular", serif;
}
#target
{
padding:50px 0;
font-size:24px;
}
JS
Код
function ptn(id, a, b, c)
{
var x = i = 0;
var y = 1000/70;
var j = parseInt(b/y);
y = b/j;
var k = a/j;
var int1 = setInterval(function()
{
if(i<j+1)
{
x = k * i;
document.getElementById(id).innerHTML = (x.toFixed(c));
i++;
}else
{
window.clearInterval(int1);
}
},y);
}
//ptn(идентификатор, конечное значение, длительность[в ms], nbDecimales);
ptn("target", 9999999999, 1330, 0);
{
var x = i = 0;
var y = 1000/70;
var j = parseInt(b/y);
y = b/j;
var k = a/j;
var int1 = setInterval(function()
{
if(i<j+1)
{
x = k * i;
document.getElementById(id).innerHTML = (x.toFixed(c));
i++;
}else
{
window.clearInterval(int1);
}
},y);
}
//ptn(идентификатор, конечное значение, длительность[в ms], nbDecimales);
ptn("target", 9999999999, 1330, 0);