Coding House

Едукативен форум за сите програмери во Македонија кои сакаат да научат или сакаат да решат одреден проблем во врска со програмирањето.
 
HomeHome  CalendarCalendar  Прашања/ОдговориПрашања/Одговори  БарајБарај  ЧленовиЧленови  Регистрирајте сеРегистрирајте се  Влез  
ИЗВЕСТУВАЊЕ!!!
ИЗВЕСТУВАЊЕ 2 !!!

Share | 
 

 Како да се направи тајмер за одбројување (CountDown Timer) во Јава Скрипт

Go down 
АвторПорака
Moderator

avatar

Posts : 12
Join date : 2018-05-22
Age : 18
Location : Struga

ПишувањеПредмет: Како да се направи тајмер за одбројување (CountDown Timer) во Јава Скрипт   Чет Мај 24, 2018 3:36 am

Да се направи тајмер за одбројување прво треба да направиме еден трепкач со интервал од 1000милисекунди (1секунда). Да се направи ова мора да ја користиме функсијата window.setTimeout:

Код:
window.setTimeout("Трепкач()", 1000);
function Трепкач() {
}

Така да ова ќе ја повика функсијата наречена Трепкач после 1000милисекунди, но секој пат кога Трепкач ќе биде повикан сакаме да го ставиме тајмерот на 1секунда да го направиме тајмерот да продолжува па тоа би изгледало нешто вака:

Код:
window.setTimeout("Трепкач()", 1000);
function Трепкач() {
window.setTimeout("Трепкач()", 1000)
}

Ја направивме базата на тајмерот, функсијата Трепкач ќе биде повикувана секоја една секунда. Но ние сакаме да можеме да го користиме да смениме нечиј текст од нечто да го покажеме времето како во следиот код:

Код:
var Тајмер;
var ВкупноСекунди;


function НаправиТајмер(ТајмерID, Time) {
Тајмер= document.getElementById(ТајмерID);
TotalВкупноСекундиSeconds = Time;

UpdateТајмер()
window.setTimeout("Трепкач()", 1000);
}

function Трепкач() {
ВкупноСекунди-= 1;
UpdateТајмер()
window.setTimeout("Трепкач()", 1000);
}

function UpdateТајмер() {
Тајмер.innerHTML = ВкупноСекунди;
}

Па сега имаме една функсија каде го создаваме тајмерот со земање на ИД од елементот кој сакаме да биде тајмер и секундите треба да трепкаат надоле во кои се собрани во Тајмер и ВкупноСекунди, потоа ги повикуваме функсијата UpdateТајмер па потоа функсијата Трепкач со одложување од 1 секунда. Секој пат кога функсијата Трепкач е повикана ја намалува количината од секундите по еден и ја повикува UpdateТајмер и си става тајмаут на себе од 1000милисекунди. Функсијата UpdateТајмер ќе го стави на тајмерот во количина од колку секунди се останати.

Па долниот пример едноставно користи еден елемент да трепка надоле секоја секунда и да го покажува во елементот.

ХТМЛ кодот за користење изгледа вака (ако долниот код е зачуван во /Тајмер.js):

Код:
<html>
<head>
<script type="text/javascript" src="/Тајмер.js" />
</head>

<body>
<div id='тајмер' />
<script type="text/javascript">window.onload = НовТајмер("тајмер", 30);</script>
</body>
</html>

Но има уште две работи кои треба да се додадат, прва работа е тоа што нашиот тајмер треба да застане на 0, не да продолжува во негативни броеви како што сега го прави, да го решиме ова ќе ја сменеме трепкач функсијата вака:

Код:
function Трепкач() {
if (ВкупноСекунди<= 0) {
alert("Времето Истече!")
return;
}

ВкупноСекунди-= 1;
UpdateТајмер()
window.setTimeout("Трепкач()", 1000);
}

Така да ако тајмерот стигне до 0 (или са сигурност под 0) правиме што ќе посакаме кога тајмерот ќе стигне 0 (во овој случај даваме предупредување) и користиме return да излеземе од функсијата.

Другата работа што треба да се направи е да ставиме претворување од секунди до секунди, минути, саати или денови, тоа се прави во следиов код:

Код:
function UpdateТајмер() {
var Секунди = ВкупноСекунди;

var Денови = Math.floor(Секунди / 86400);
Секунди -= Денови * 86400;

var Саати = Math.floor(Секунди / 3600);
Секунди -= Саати * (3600);

var Минути = Math.floor(Секунди / 60);
Секунди -= Минути * (60);


var TimeStr = ((Денови> 0) ? Денови+ " денови" : "") + LeadingZero(Саати) + ":" + LeadingZero(Минути) + ":" + LeadingZero(Секунди )


Timer.innerHTML = TimeStr;
}


function LeadingZero(Time) {

return (Time < 10) ? "0" + Time : + Time;

}

Потоа само додаваме текст на тајмерот со менување на ова:

Код:
Timer.innerHTML = TimeStr;

Во ова:

Код:
Timer.innerHTML = TimeStr + " до почеток на утакмицата!";

Ова е се во врска со "Како да се направи тајмер за одбројување (CountDown Timer) во Јава Скрипт". Се надевам ќе го најдете ова корисно. Very Happy
Вратете се на почетокот Go down
 
Како да се направи тајмер за одбројување (CountDown Timer) во Јава Скрипт
Вратете се на почетокот 
Страна 1 of 1

Permissions in this forum:Не можете да одговарате на темите во форумот
Coding House :: Tutorials :: Туториал за HTML, CSS и JavaScript-
Отиди до: