Скрипт перехода от нуля до заданного числа
Добавлено 19.10.2015 в 18:17
Скрипт перехода от нуля до заданного числа
Предлагаю вашему вниманию пример реализации скрипта, который заполняет значение от нуля до заданного числа. Изменяя в скрипте последнюю строчку можно легко задать конечное значение (число которое получим в результате) и длительность заполнения (время перехода от нуля до заданного значения).

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>


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;
}


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);
К материалу оставили 0 комментариев