Главная JavaScript Часы для сайта цифровые

Часы для сайта

: :

Одним из самых простых и частоиспользуемых скриптов, является скрипт цифровых часов на JavaScript.

Действия по шагам:

Код скрипта нужно вставить между тегами <head>...</head>.

Код скрипта

<head>   
  <script>
   function digitalClock() {
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
        if (hours < 10) hours = "0" + hours;
        if (minutes < 10) minutes = "0" + minutes;
        if (seconds < 10) seconds = "0" + seconds;
          document.getElementById("id_clock").innerHTML = hours + ":" + minutes + ":" + seconds;
          setTimeout("digitalClock()", 1000);
   }
  </script>
</head>

Часы и вызов функции js вставить между тегами <body>...</body> на странице сайта в желаемое место.
```
Вызов скрипта на странице

<body    
    <div id="id_clock"></div>
    <script>digitalClock();</script>
</body
```
Результат:
Это простые часы без всякого оформления стиля.

Примеры оформления простых часов для сайта

в HTML документе

Часы для сайта

<script>  
setInterval(function () {
    var now = new Date();
    var clock = document.getElementById("clock");
    clock.innerHTML = now.toLocaleTimeString();
}, 1000);
</script>

1
<body
<span id="clock"
style="color:red;">
</span>
</body

2
<body
<span id="clock"
style="color:#7e5a25; font-size:14pt; border:2px solid #e1d4ae; background:#e8e3d4; padding:5px 20px;">
</span>
</body

Результат скрипта

Часы для сайта

Цветные часы для сайта

в HTML документе

3
Цветные часы для сайта

<script>
function time () {
  date = new Date(),
  h = date.getHours(),
  m = date.getMinutes(),
  s = date.getSeconds(),

  h = (h < 10) ? '0' + h : h,
  m = (m < 10) ? '0' + m : m,
  s = (s < 10) ? '0' + s : s;

  hours  = document.getElementById("id_H");
  minutes = document.getElementById("id_M");
  seconds = document.getElementById("id_S");
            
  hours.innerHTML = h;   
  minutes.innerHTML = m;
  seconds.innerHTML = s;
};
    
</script>
<script>setInterval(time, 1000);</script>
       
<div id="time" style="font-weight: bold;"> 
<span id="id_H" style="color: red;"></span> : <span id="id_M" style="color: green;"></span> : <span id="id_S" style="color:blue;" ></span>    
</div>

Результат скрипта

3
Цветные часы для сайта

: :

Аналоговые часы для сайта

в HTML документе

4
Аналоговые часы для сайта

<iframe src="http://arbuzova.mooseum.ru/1-rubrika/13-demo/clock-01.html" width="260" height="275" marginheight=0 marginwidth=0  scrolling="no" style="border: none;">
</iframe>

Результат скрипта

Аналоговые часы для сайта