Главная 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
```
Результат:

Это простые часы без оформления стиля.

12-часовой формат времени: AM/PM

12-часовой формат времени предполагает разбиение 24 часов на два интервала по 12-часов:

AM = до полудня (от 00:00 до 11:00)
PM = после полудня (от 12:00 до 23:00)

12-часовой формат времени: AM/PM

<script>
function am12() {

var date12 = new Date();
var hours12 = date12.getHours() - (date12.getHours() >= 12 ? 12 : 0);
var period = date12.getHours() >= 12 ? 'PM' : 'AM';
var minutes12 = date12.getMinutes();
var seconds12 = date12.getSeconds();
if (minutes12 < 10) minutes12 = "0" + minutes12;
if (seconds12 < 10) seconds12 = "0" + seconds12;

document.getElementById("clock12").innerHTML = hours12 + ":" + minutes12 + ":"+ seconds12 +" " + period;
setTimeout("am12()", 1000);
}
</script>

<body>    
  <div id="clock12"></div>
  <script>am12();</script>
</body>

Результат:

12-часовой формат времени:

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

в 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

3
<body
<span id="clock"
style="background-color: #2F4F4F; color: #00FF7F; border:4px outset #FFA500; padding:5px 20px;">
</span>
</body

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

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

Сейчас:

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

в HTML документе

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

<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>

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

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

: :

Часы + дата

Хорошо смотрятся на сайте часы совместно с датой оформленные в одну строку.
В Примере 5 к скрипту часы добавлен скрипт дата.
Вид строки оформляется средствами css под дизайн сайта.

Сегодня: ()

5                        
Часы + дата

<script>
  var months = new Array(13);
  months[1]="января"; months[2]="февраля"; months[3]="марта"; months[4]="апреля"; months[5]="мая"; months[6]="июня"; months[7]="июля"; months[8]="августа"; months[9]="сентября"; months[10]="октября"; months[11]="ноября"; months[12]="декабря";

  var time = new Date();
  var thismonth = months[time.getMonth() + 1];
  var date = time.getDate();
  var thisyear = time.getYear();
  var day = time.getDay() + 1;

  if (thisyear < 2000)
      thisyear = thisyear + 1900;
  if (day == 1) DayofWeek = "Воскресенье";
  if (day == 2) DayofWeek = "Понедельник";
  if (day == 3) DayofWeek = "Вторник";
  if (day == 4) DayofWeek = "Среда";
  if (day == 5) DayofWeek = "Четверг";
  if (day == 6) DayofWeek = "Пятница";
  if (day == 7) DayofWeek = "Суббота";
</script>
            
<script>           
setInterval(function() {
  var cd = new Date();
  var clockdat = document.getElementById("clockdat");
  clockdat.innerHTML = cd.toLocaleTimeString();
}, 1000);
</script>

<body    
<div class="center" style="background-color: #3b424a; padding:5px;">
  <span style="color:aqua">Сегодня:</span>
  <span style="color:silver; font-size:14px;">
  <script>
      document.write(date+" ");
      document.write(thismonth+ " "+thisyear+" "+"года"+" — "+ DayofWeek);
  </script>
  (<span id="clockdat" style="color:aqua;"></span>)
  </span>
</div>
</body

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

в HTML документе

Виджеты Аналоговых часов для сайта

Виджет 1                            
<iframe src="../../1-rubrika/13-demo/clock-01.html" width="260" height="275" 
marginheight=0 marginwidth=0  scrolling="no" style="border: none;">
</iframe>

Виджет 2
<iframe src="../../1-rubrika/13-demo/clock-02.html" width="260" height="280" 
marginheight=0 marginwidth=0 scrolling="no" style="border:none;">
</iframe>

Виджет 3

Вид часов на сайте

Виджет 1

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

Виджет 2