Домой / Для сайта / Скрипт перехода от нуля до заданного числа
Скрипт перехода от нуля до заданного числа

Скрипт перехода от нуля до заданного числа

Предлагаю вашему вниманию пример реализации скрипта, который заполняет значение от нуля до заданного числа.

Изменяя в скрипте последнюю строчку можно легко задать конечное значение (число которое получим в результате) и длительность заполнения (время перехода от нуля до заданного значения).

Демо

HTML

<h1>Увеличение значения до заданного числа </h1>

<p id="target">Значение будет тут</p>

<p>
 Скрипт перехода от нуля до заданного числа.
 <br/>
</p>

CSS

@import "http://adrienpaquot.be/TNA2/font/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);

Предлагаю вашему вниманию пример реализации скрипта, который заполняет значение от нуля до заданного числа. Изменяя в скрипте последнюю строчку можно легко задать конечное значение (число которое получим в результате) и длительность заполнения (время перехода от нуля до заданного значения). HTML CSS @import &quot;http://adrienpaquot.be/TNA2/font/font.css&quot;; 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; }&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.65 ( 1 голосов )
100

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

Ваш email не будет опубликован.

*