Цифровые часы на JavaScript
Описание: Одним из самых простых и в то же время частоиспользуемых скриптов, является скрипт цифровых часов на JavaScript. Я думаю, что Вы часто на сайтах видели подобные часы, поэтому решил показать, как они делаются. Результат работы цифровых часов на JavaScript представлен ниже.
Результат:
Код JavaScript (вставлять между тегами <head> и </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>
Код HTML (вставлять между тегами <body onload="digitalWatch()"> и </body>):
<p id="digital_watch" style="color: #f00; font-size: 120%; font-weight: bold;"></p> -
Создано 25.06.2012 15:02:08
-
Михаил Русаков
Комментарии (27):
Возможно ли как-нибудь выводить определённое время? Например московское. Это нужно брать время по Гринвичу и прибавлять/отнимать?? Просто у юзера не всегда на компьютере стоит точное время, а мне хотелось бы выводить точное московское время
Ответить
Можно в PHP генерировать начальное время и подставлять в переменные.
Ответить
Спасибо, как-нибудь попробую
Ответить
Спасибо Михаил за науку Все доступно и понятно Удачи!
Ответить
почему не работает таймер <html> <head> <title>Таймер</title> <script language = "javascript"> function dynamic(str){ var x = 0; var = id setInterval(dynam. 100); function dynam() { document.getElementById("din").inner += str.char(x); if (x == string.length) clearInterval(id); } } </script> </head> <body> <span id = "din"></span> <script language = "javascript"> dynamic("Это динамический текст. Спасиюо за просмотр."); </script> </body> </html>
Ответить
Потому что у Вас очень много ошибок в коде. Переменная x никуда не передается, не правильно заданы аргументы для stInterval, inner вместо innerHTML и так далее. То, что Вы хотите сделать уже есть тут http://myrusakov.ru/javascript-dynamic-text.html
Ответить
Михаил как двигать например часы в то место где тебе надо ?
Ответить
Просто вставить код в то место страницы, которое Вам нужно.
Ответить
можно поподробней
Ответить
Код вставляется между тегами <body onload="digitalWatch()"> и </body>. А где конкретней, это уже надо смотреть в Вашем коде страницы.
Ответить
Здавстуйте, Михаил! А в дальнейшем можно будет как-нибудь изменить внешний вид часов, добавить красоты, так сказать?
Ответить
Через CSS.
Ответить
Михаил, а как можно создать стрелочные часы?
Ответить
Через JavaScript очень трудно, но возможно. Можете поискать готовые скрипты и попытаться в них разобраться.
Ответить
окей
Ответить
Почему, если 'startTime()' в скобках, таймер работает, а без скобок не работает? <script language="javascript"> var sep; function startTime() { var tm = new Date(); var h = tm.getHours(); var m = tm.getMinutes(); h = h<10? '0'+h: h; m = m<10? '0'+m: m; sep = sep == ':'? ' ': ':'; document.getElementById('time').innerHTML=h+sep+m; setTimeout('startTime()',1000); } </script> <body onload="startTime();"> <br /> <hr /> <br /> <div align=center> <b>Сейчас <span id="time"></span></b> </div> <br /> <hr /> <br /> </body>
Ответить
Это про какие скобки?
Ответить
Скобки вокруг startTime()! setTimeout('startTime()',1000); если их убрать, двоеточие не мигает.
Ответить
Как сделать чтобы при срабатывании таймера и выводе ":" в часах, не сдвигались минуты? Метод моноширинных шрифтов не устраивает. <script language="javascript"> var sep; function startTime() { var tm = new Date(); var h = tm.getHours(); var m = tm.getMinutes(); h = h<10? '0'+h: h; m = m<10? '0'+m: m; sep = sep == ':'? ' ': ':'; document.getElementById('time').innerHTML=h+sep+m; setTimeout('startTime()',1000); } </script> <body onload="startTime();"> <br /> <div align=center> <b>Сейчас <span id="time"></span></b> </div> <br /> </body>
Ответить
А чем Вам не понравились моноширинные шрифты? Иначе они будут сдвигаться всё равно.
Ответить
Я не проверял, но боюсь, что не все браузеры будут поддерживать такие шрифты. Я ошибаюсь?
Ответить
Не думаю что такая проблема может возникнуть.
Ответить
Помогите пожалуйста, Как изменить вид часов. Понятно, что это нужно делать через CSS. Но где именно в коде нужно задать класс для часов, для минут? Чтобы сделать рамку и для часов и для минут.
Ответить
там всё написано же. строчка с абзацем и стилями,в конце статьи
Ответить
Эта строчка изменения всех часов. А я имею в виду поменять цвет только часов, а минуты сделать другого цвета например. Или сделать рамку для каждого отдельно. По примеру часов на телефоне. Они как бы в отдельной рамке: часы и минуты.
Ответить
И еще может быть кто нибудь знает хороший скрипт - как поставить дату на сайте?
Ответить
А вот ссылка на сайт, где можно посмотреть скрипт для даты. Если кому интересно. :-) http://ab-w.net/JS/JS_date.php
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.