/ Новости и уроки / Простые часы на javascript

Простые часы на javascript

259
Простые часы на javascript
Одна из замечательных особенностей JavaScript заключается в том, что он позволяет вам манипулировать содержимым веб-страницы в режиме реального времени. Это означает, что мы можем использовать JavaScript для создания часов, встроенных в веб-страницу, которые обновляются каждую секунду. В этой статье показано, как сделать простые часы используя javascript.

Разметка HTML

Давайте начнем с обычной разметки html. Класс clock будет служить для обертке, поэтому мы можем центрировать все, увеличивать или уменьшать ширину или настраивать другие параметры в CSS.

Также у нас будет 3 span с id, где мы будем показывать время. Каждый id будет отвечать за отдельное время. Id hr будет отвечать за часы, id min будет отвечать за минуты и id sec будет отвечать за секунды.


 <div class="clock">
            <span id="hr">00</span>
            <span> : </span>
            <span id="min">00</span>
            <span> : </span>
            <span id="sec">00</span>
        </div>

CSS

CSS у нас будет очень коротким. Здесь мы просто добавим некоторых стилей к нашему блоку clock.


*{
    margin:0;
    padding:0;
    font-family:sans-serif;
    font-size:36px;
}

.clock{
    text-align:center;
    width:auto;
    height:auto;
    padding-top:5%;
}
#hr, #min, #sec {
    background: #474646;
    padding: 10px;
    color: white;
    border-radius:4px;
}

JavaScript

Теперь приступаем к javascript. Для того, чтобы узнать дату, мы будем использовать метод new Date(). Дальше в переменных мы обращаемся к переменной, где хранится метод new Date(), и берем данные о времени.

В функции clock() мы смотрим если секунд равно 60, то мы сбрасываем до нуля и добавляем 1 к переменной, которая отвечает за часы, и так дальше. И в конце этой функции мы добавляем анимацию используя setTimeout


var d,h,m,s,animate;

function init(){
    d=new Date();
    h=d.getHours();
    m=d.getMinutes();
    s=d.getSeconds();
    clock();
};

function clock(){
    s++;
    if(s==60){
        s=0;
        m++;
        if(m==60){
            m=0;
            h++;
            if(h==24){
                h=0;
            }
        }
    }
    $('sec',s);
    $('min',m);
    $('hr',h);
    animate=setTimeout(clock,1000);
};

function $(id,val){
    if(val<10){
        val='0'+val;
    }
    document.getElementById(id).innerHTML=val;
};

window.onload=init;