JavaScript примеры — Часы, секундомер и обратный отчет

В современном мире динамика на интернет ресурсах очень популярна, и в частности, эту динамику реализовывают с помощью языка программирования JavaScript. Сегодня мы рассмотрим несколько простых, но интересных и полезных примеров, а если говорить конкретней, то мы рассмотрим пример реализации часов, секундомера и обратного отчета.

Ранее мы с Вами уже изучали JavaScript и если Вы пропустили эти уроки, то для более лучшего освоения наших сегодняшних примеров, Вам сначала необходимо ознакомиться с ними: JavaScript для начинающих – Простые примеры, JavaScript – Пример расширения формы регистрации.

Примечание! Для работы всех примеров ниже, необходимо включить поддержку JavaScript в браузере. Если Вы, не знаете, включена ли эта поддержка и принудительно Вы ее не отключали, то она по умолчанию включена, и Вы можете по этому поводу не париться.

Пример реализации часов на JavaScript

Начнем мы с примера часов. Часы на JavaScript достаточно легко можно реализовать, и ниже представлен код с комментариями, поэтому проблем возникнуть не должно.

Сейчас время

Показать время

   
   <!--Место, где мы хотим выводить часы-->
   <p>Сейчас время - <span id="idClock"></span></p>
   <!--Скрипт на JavaScript-->
   
   <script language="JavaScript" type="text/javascript">
   
   function SimpleClock()
   {
     //создаем объект с текущей датой и временем
     var tekDate = new Date();
     //получаем из объекта часы, минуты и секунды
     var hour = tekDate.getHours();
     var minute = tekDate.getMinutes();
     var seconds = tekDate.getSeconds();
     //для того чтобы минуты и секунды до 10 отображались корректно с нулем
     minute=((minute < 10) ? "0" : "") + minute;
     seconds =((seconds < 10) ? "0" : "") + seconds;
     //смотрим чтобы часы не переваливали за 24 
     hour=(hour > 24) ? hour-24 : hour;
     hour=(hour == 0) ? 0 : hour;
     //задаем окончательное значение времени
     var clock = hour + ":" + minute + ":" + seconds;
     
     //отрисовываем время на странице
     if(clock != document.getElementById('idClock').innerHTML){ 
                        document.getElementById('idClock').innerHTML = clock;
        }
        //выполняем все это каждую секунду
     timer = setTimeout("SimpleClock()",1000);
   }
   
   //для первого запуска
   SimpleClock();
   
   </script>

Пример реализации секундомера на JavaScript

Секундомер пишется чуть посложней, но все равно не так сложно, как кажется. Мы будем рассматривать пример, где будут присутствовать миллисекунды. Давайте приступим.

   
   <script language="JavaScript" type="text/javascript">
   //объявляем переменные
   var base = 60; 
   var clocktimer,dateObj,dh,dm,ds,ms; 
   var readout=''; 
   var h=1,m=1,tm=1,s=0,ts=0,ms=0,init=0; 
   
   //функция для очистки поля
   function ClearСlock() { 
        clearTimeout(clocktimer); 
        h=1;m=1;tm=1;s=0;ts=0;ms=0; 
        init=0;
        readout='00:00:00.00'; 
        document.MyForm.stopwatch.value=readout; 
   } 
   
   //функция для старта секундомера
   function StartTIME() { 
        var cdateObj = new Date(); 
        var t = (cdateObj.getTime() - dateObj.getTime())-(s*1000); 
        if (t>999) { s++; } 
        if (s>=(m*base)) { 
                ts=0; 
                m++; 
        } else { 
                ts=parseInt((ms/100)+s); 
                if(ts>=base) { ts=ts-((m-1)*base); } 
        } 
        if (m>(h*base)) { 
                tm=1; 
                h++; 
        } else { 
                tm=parseInt((ms/100)+m); 
                if(tm>=base) { tm=tm-((h-1)*base); } 
        } 
        ms = Math.round(t/10); 
        if (ms>99) {ms=0;} 
        if (ms==0) {ms='00';} 
        if (ms>0&&ms<=9) { ms = '0'+ms; } 
        if (ts>0) { ds = ts; if (ts<10) { ds = '0'+ts; }} else { ds = '00'; } 
        dm=tm-1; 
        if (dm>0) { if (dm<10) { dm = '0'+dm; }} else { dm = '00'; } 
        dh=h-1; 
        if (dh>0) { if (dh<10) { dh = '0'+dh; }} else { dh = '00'; } 
        readout = dh + ':' + dm + ':' + ds + '.' + ms; 
        document.MyForm.stopwatch.value = readout; 
        clocktimer = setTimeout("StartTIME()",1); 
   } 
   
   //Функция запуска и остановки
   function StartStop() { 
        if (init==0){ 
                ClearСlock();
                dateObj = new Date(); 
                StartTIME(); 
                init=1; 
        } else { 
                clearTimeout(clocktimer);
                init=0;
        } 
   } 
   </script> 
   
   <!--Форма для Секундомера-->
   <form name=MyForm>   
        <input type=button value="Обнулить" onclick="ClearСlock()">  
        <input name=stopwatch size=10 value="00:00:00.00">  
        <input type=button value="Запуск/Остановить" onclick="StartStop()"> 
   </form>

Обратный отчет – пример на JavaScript

Рассмотрим простой пример обратного отчета, где Вы сами будете задавать время, которое будет отчитываться в секундах. Вот код, он также прокомментирован.

Начать Остановить

   
   <script>
   //Объявим переменную
   var stopTimer;
   
   //Функция для старта 
   function testTimer(startTime) {
     //для повторного запуска очистим rezult
     document.getElementById("rezult").innerHTML = '';
     //выключим кнопку запуска
     var bot = document.getElementById("bot");
     bot.setAttribute("disabled","");
     //сколько будет длиться обратный отчет
     var time = startTime;
     //определим сколько минут
     var min = parseInt(time / 60);
     if ( min < 1 ) min = 0;
        time = parseInt(time - min * 60);
     if ( min < 10 ) min = '0'+min;
     //определим сколько секунд
     var seconds = time;
     if ( seconds < 10 ) seconds = '0'+seconds;
     //отрисовываем время
     document.getElementById("time").innerHTML='<span>Осталось времени- '+min+' мин '+seconds+' секунд</span>';
     //уменьшаем общее время на одну секунду
     startTime--;
     //смотрим время не закончилось
     if ( startTime  >= 0 ) {
                //если нет, то повторяем процедуру заново
       stopTimer  =  setTimeout(function(){testTimer(startTime); }, 1000);
           //если закончилось, то выводим сообщение на экран, и делаем кнопку запуска активной
   } else {
     document.getElementById("time").innerHTML='<span>Осталось времени- 00 мин 00 секунд</span>';
     var rezult = document.getElementById("rezult");
     rezult.innerHTML ="Время вышло";
     clearTimeout(stopTimer);
     var bot = document.getElementById("bot");
     bot.removeAttribute("disabled","disabled");
     bot.removeChild(bot.childNodes[0]);
     var text = document.createTextNode("Начать заново");
     bot.appendChild(text);
    }
   }
   
   //Функция для остановки обратного отчета
   function stop(){
        //очистим переменную с таймером
        clearTimeout(stopTimer);
        //и включим кнопку запуска
        var bot = document.getElementById("bot");
        bot.removeAttribute("disabled","disabled");
   }
   </script>
   
   <p id = "time"></p>
   <button id = "bot" onclick="testTimer (10)">Начать</button>
   <button  onclick="stop ()">Остановить</button>
   <p id = "rezult">
   </p>

Где при запуске функции testTimer, необходимо передать параметр количество секунд, которое должно отчитаться.

Вот простые примеры, которые помогут Вам написать что-то серьезное и внедрить на своем ресурсе. Удачи!