Последние обновления

Таймер и прогресс бар


Описание темы отсутсвует
Тема создана:
Ответов: 0
Просмотров: 284
Последний ответ:
Destroy
Администратор
131 7 0

Еще один пост в рубрике Javascript с двумя примерами на setInterval и clearInterval.

Начнем с таймера, сразу к делу:

<div id="timer">5</div>
<a href="#" onclick="timer();">Запустить таймер</a>

Див с идентификатором timer, в котором и будет идти отсчет времени, в нашем случае таймер отсчитывает от пяти до нуля, но это можно конечно же изменить.

Теперь сам скрипт:

function timer(){
timer = document.getElementById('timer');
 
var z = setInterval(
function(){
if(timer.innerHTML == 0)
{
clearInterval(z);
alert('Нечто грандиозное могло произойти по истечении таймера!\nНо не произошло!');
} else 
{
timer.innerHTML =parseInt(timer.innerHTML) - 1;}}
,1000);
   }

Обьявляем функцию timer(), затем задаем интервал в одну секунду, в котором проверятся условие, если значение таймера равно нулю,значит пора прекратить(метод clearInterval),иначе переходим к следующему действию.А именно, берем содержимое таймер (там пять находится), переводим в целый числовой тип parseInt и отнимаем единицу.

Теперь прогресс бар, у меня уже был пост про Прогресс бар на точках, но там много ненужного кода:

<a href="#" id="startLink" style="color:#222;text-decoration:none;border-bottom:1px dotted #333;">Кликните на прогресс бар,что получить ссылку</a>
<div style="font-size:2em;" id="points"></div>

Вот это выше наш хтмл код, теперь скрипт:

var points = document.getElementById('points');
var startLink  = document.getElementById('startLink');
startLink.onclick = function(){
var z = setInterval(
function()
{
if(points.innerHTML.length == '3')
{
clearInterval(z);
points.innerHTML = '<a href="http://severus.name">Заветная ссылка</a>'
} 
else 
{
points.innerHTML += '.';
}
},1000)
  }

Как видите фактически тоже самое условие, только применение разное.

Зарегистрируйтесь или авторизуйтесь что бы писать