Простые рабочие электронные часы, которые запросто можно установить на любой сайт.
А если постараться, то с помощью CSS им можно придать стильный вид под дизайн сайта.
Я приведу очень короткий css, чтоб вам осталась свобода для творчества.
Чтобы часы работали, в тег body нужно добавить атрибут onload="digitalWatch()".
Если часы нужны только на отдельной странице, как тут, например, то весь код размещается в теге body.
Если же часы нужны на всех страницах сайта, то скрипт размещается в теге head, а html размещается в теге body.
Скрипт:
<script type="text/javascript">
function digitalWatch() {
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("digital_watch").innerHTML = hours + ":" + minutes + ":" + seconds;
setTimeout("digitalWatch()", 1000);
}
</script">
CSS:
#digital_watch{
letter-spacing: 5px;
color: #777;
font-size: 30px;
border: 2px solid #777;
padding: 10px;
width: 160px;
box-shadow: 1px 1px 3px #BCCCCF,
-1px -1px 2px #BCCCCF;
HTML:
<body onload="digitalWatch()">
<p id="digital_watch"></p>
</body>
И полный код, который можно вставить в Notepad++ для работы со стилями.
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Часы</title>
<head>
<script type="text/javascript">
function digitalWatch() {
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("digital_watch").innerHTML = hours + ":" + minutes + ":" + seconds;
setTimeout("digitalWatch()", 1000);
}
</script">
<style>
#digital_watch{
letter-spacing: 5px;
color: #777;
font-size: 30px;
border: 2px solid #777;
padding: 10px;
width: 160px;
box-shadow: 1px 1px 3px #BCCCCF,
-1px -1px 2px #BCCCCF;
}
</style>
</head>
<body onload="digitalWatch()">
<p id="digital_watch"></p>
</body>
</html>
Желаю творческих успехов.
В раздел >>>
У меня работает. Проверьте скрипт, посмотрев Код страницы. Возможно, при подкраске кода в статье появилась ошибка.
Доброго дня. Функция неработает.
Хорошо работуют часы, спасибо большое!