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

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

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

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

  1. Код скрипта нужно вставить между тегами <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>
    
  2. Часы и вызов функции js вставить между тегами <body>...</body> на странице сайта в желаемое место.

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

 

 

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

в 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

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

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

1

 

2

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

в 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>
Результат скрипта

4

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