ГЛАВНАЯ | HTML | CSS | PHP | JS | ЕЩЁ |

javascript часы код пример

Часы на javascript. На самом деле все просто!

Как-то я очень искал самые простые часы на javascript. Но поскольку, в те далекие времена и не подозревал, что существуют вообще какие-то языки. То просто поставил, что нашел.

И когда сегодня мы уже имеем некоторое представление о программировании, то в момент, когда потребовались часы на javascript, то нам просто нужно их написать!

Погнали!

Мы сегодня разбирали вывод времени в javascript. И некоторые элементы мы почерпнем из этой страницы.
Логика скрипта.

Начнем с логики и что нам требуется собственно сделать! Нам нужен какой-то код, который будет получать время, ну, например, через секунду, выводить его на экран, стирать старое значение и перезаписывать новое и так до бесконечности!

На php это сделать нельзя, вернее можно конечно, но вам придется через секунду перезагружать страницу. А на javascript это сделать легко и не нужно перезагружать страницу.

Нам потребуется функция setInterval – которая выполняет код много раз, через равные промежутки времени.

Поставим интервал в одну секунду(1сек = 1000)

setInterval(myFuncSuper, 1000);

Ну и далее создадим свою функцию, в которой зададим объект

var data = new Date();

Установим требуемые деления для времени – часы/минуты/секунды

var time  = data.getHours() + ":" +  data.getMinutes() + ":" +  data.getSeconds();

Отправим все полученное в наш див под ид равным display

document.getElementById("display").innerHTML = time;  

Выше скрипта поставим

<div id="display"></div>

Теперь соберем все вместе:

<div id="display"></div>

<script>

setInterval(myFuncSuper, 1000);

function myFuncSuper() {

var data = new Date();  

var time  = data.getHours() + ":" +  data.getMinutes() + ":" +  data.getSeconds();

document.getElementById('display').innerHTML = time;  

}

</script>

Результат:

Как добавить ноль к цифре во времени!?

Обратите внимание, что если у вас какой-то из трех элементов будет меньше 10, то у него отсутствует ноль!

Это не совсем привычно и когда смотришь на это время, то кажется. Что чего-то не хватает…

Что нужно сделать, чтобы к нашей цифре у которой отсутствует ноль, его прибавить!?

Для этого для каждого метода нам нужно ввести новую переменную их будет три - часы, минуты, секунды: «Chasi, Minutes, Seconds»

И сделаем 3 условия, если у нас одна из трех переменных будет меньше 10, то прибавим к ней нолик...

И между двоеточием поставим пробел, а то, время у нас прилепилось друг к другу...

Результат:

Друзья! Если здесь нет часов. То попробуйте перезагрузить страницу –пока не нашли в чем проблема…

Посмотреть пример и скачать можно по ниже идущей ссылке

Скрипт № 52.1
Название скрипта и номер :Часы на javascript
Пример - Часы на javascript
Скачать - архив
Все скрипты на одной страницеС вашими куками, что-то не то..., попробуете перезагрузить страницу..
Теги:
javascript часыjavascript за часjavascript часы на сайтjavascript идущие часыjavascript за часасоздание часов в html javascriptjavascript часы со стрелкамиввод времени в часах и минутах javascript

Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019