Web-урок #09

Когда у человека много свободного времени, он немного чего достигнет.

Генри Форд

На этом уроке мы сделаем часы на JavaScript. А главное, что этот урок — это ворота в мир создания настоящих серьезных проектов на JS.

Сегодня мы научимся вызывать скрипты, которые начнут работать сразу после загрузки окна браузера, а также сделаем так, чтобы эти скрипты выполнялись циклично, в нашем случае через каждую секунду. Поехали!!!

Часы. HTML

<link rel="stylesheet" href="style.css">
<script src = "script.js"></script>
<div id="clock"></div>

В HTML создадим блок div, в который в дальнейшем, мы положим наши часы.

style.css

#clock{
	color: blue;
	font-weight: bold;
	font-size: 20px;
}

script.js

window.onload = function(){
	window.setInterval(function(){
		var now = new Date();
		var clock = document.getElementById("clock");
		clock.innerHTML = now.toLocaleTimeString();
	}, 1000);
};

Давай разберем код на JS

window.onload = function(){

Эта строчка запускает безымянную функцию сразу после загрузки окна браузера.

window.setInterval(function(){

Эта строчка запускает еще одну функцию. Все что, внутри этой функции будет запускаться с временным интервалом, который указывается в миллисекундах.

var now = new Date();
		var clock = document.getElementById("clock");
		clock.innerHTML = now.toLocaleTimeString();

Так вызываются часы в формате 00:00:00

ВсЁ!!!)