Здравейте, в днешният урок съм решил да се прехвърлим малко към JavaScript сферата.

Ще ви покажа как да си направите брояч с обратно броене.

Той ще показва колко часове, минути и секунди остават до дадено събитие.




По кода съм слагал доста обяснения, за да се ориентирате кое какво прави.

Ето го кода:

<html>
<head>
<script type="text/javascript">
function timer(timeLeft)
{
if (timeLeft > 0) // проверяваме дали секундите са повече от 0
{
var curTime = timeLeft;

var hours = Math.floor(curTime / 3600); // пресмятаме колко часове остават
curTime -= hours * 3600; // изважда часовете от оставащите секунди
var minutes = Math.floor(curTime / 60); // пресмятаме колко минути остават
curTime -= minutes * 60;// изважда минутите от оставащите секунди

document.getElementById("timer").innerHTML = fixTime(hours)+':'+fixTime(minutes)+':'+fixTime(curTime); // извеждаме оставащото време

setTimeout("timer("+(timeLeft – 1)+")", 1000); // викаме сегашната функция през 1 секунда като намаляваме timeLeft с 1
}
else
{
document.getElementById("timer").innerHTML = 'Готово'; // ако секундите са стигнали до 0, ще изведем текста "Готово"
}
}

function fixTime(sendTime)
{
return (sendTime < 10) ? '0' + sendTime : sendTime; // ако sendTime е по-малко от 10 му слагаме отпред една 0, ако е по-голямо или равно на 10 не го променяме
}
</script>
</head>
<body onLoad="timer(300)">

<div id="timer"></div>

</body>
</html>

Сега нека обясня как работи.

<body onLoad="timer(300)">

Тук на мястото на 300 слагате колко секунди искате да отброява. В момента това се равнява на 5 минути.

А чрез това <div id="timer"></div> извеждаме оставащото време. Може да го промените примерно на това: <span id="timer"></span>

Това беше урока. Надявам се да ви е полезен.

Очаквайте скоро още уроци и ако имате проблеми пишете в коментарите.