Главная
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
Результат скрипта
Часы для сайта
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
Аналоговые часы для сайта