{"id":272344,"date":"2016-01-18T13:39:02","date_gmt":"2016-01-18T10:39:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=272344"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=272344","title":{"rendered":"\u0410\u043d\u0430\u043b\u043e\u0433\u043e\u0432\u044b\u0435 \u0447\u0430\u0441\u044b \u043d\u0430 HTML5 c \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u043d\u0430 JavaScript"},"content":{"rendered":"<p>       <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/c88\/ca0\/817\/c88ca0817bf345278cded3453929b8cf.png\"\/><\/p>\n<h4>\u0414\u043b\u044f \u043a\u043e\u0433\u043e \u0438 \u0437\u0430\u0447\u0435\u043c \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f?<\/h4>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u0438\u0437\u0443\u0447\u0430\u0435\u0448\u044c \u043d\u043e\u0432\u0443\u044e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e \u0438\u043b\u0438 \u044f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u043e\u043d\u044f\u0442\u0438\u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u043e\u0441\u044f\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0443\u0442\u0438\u043d\u043d\u044b\u0439 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440 \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0431\u044b\u0441\u0442\u0440\u043e \u043e\u0442\u0431\u0438\u0432\u0430\u044e\u0442 \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u043e\u0431\u0443\u0447\u0430\u0442\u044c\u0441\u044f \u0443 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445. \u0426\u0435\u043b\u044c \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u2014 \u044d\u0442\u043e \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u0442\u044c \u0438 \u0443\u0432\u043b\u0435\u0447\u044c \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0432 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435. \u0421\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u0434\u043b\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043b\u0438\u0441\u044c \u0441 \u043e\u0441\u043d\u043e\u0432\u0430\u043c\u0438 <abbr title=\"HyperText Markup Language, version 5\">HTML5<\/abbr> \u0438 <abbr title=\"\u041f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u043d\u044b\u0439 \u044f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u042f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u044f\u0437\u044b\u043a\u0430 ECMAScript\">JavaScript<\/abbr>, \u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0430\u0441\u043a\u0443\u0447\u0438\u043b\u043e \u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0442\u0435\u043a\u0441\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0435 \u043f\u0440\u0438 \u0432\u044b\u0432\u043e\u0434\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432, \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0430\u0440\u0438\u0444\u043c\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0438 \u0442.\u0434. \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0443\u044e, \u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u0443\u044e \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u044f\u0437\u044b\u043a\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h4>\u0427\u0442\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c?<\/h4>\n<p>  \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0445 \u0430\u043d\u0430\u043b\u043e\u0433\u043e\u0432\u044b\u0445 \u0447\u0430\u0441\u043e\u0432 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 HTML5 \u0438 JavaScript. \u0420\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0447\u0430\u0441\u044b \u0431\u0443\u0434\u0435\u043c \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u0430\u043c\u0438, \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u0440\u0435\u0434\u0441\u0442\u0432 <abbr title=\"Cascading Style Sheets \u2014 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u2014 \u0444\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u044f\u0437\u044b\u043a \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\">CSS<\/abbr>. \u041c\u044b \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430\u0448\u0435\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0438, \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0438 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043b\u043e\u0433\u0438\u043a\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430\u0448\u0438\u0445 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0447\u0430\u0441\u043e\u0432. \u0418 \u0432 \u0446\u0435\u043b\u043e\u043c \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u0435\u043c\u0441\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u044d\u043d\u0442\u0440\u043e\u043f\u0438\u044e \u0432 \u043f\u043e\u0437\u043d\u0430\u043d\u0438\u044f\u0445 \u044f\u0437\u044b\u043a\u0430 JavaScript. \u0414\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u0432\u0440\u043e\u0434\u0435 <a href=\"https:\/\/notepad-plus-plus.org\/\">Notepad++<\/a> \u0438\u043b\u0438 <a href=\"http:\/\/www.sublimetext.com\/3\">Sublime Text 3<\/a>.<\/p>\n<h4>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0446\u0438\u0444\u0440\u043e\u0432\u044b\u0445 \u0447\u0430\u0441\u043e\u0432<\/h4>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0442\u0440\u0438 \u0444\u0430\u0439\u043b\u0430 \u0432 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435. (\u0412\u0441\u0435 \u0442\u0440\u0438 \u0444\u0430\u0439\u043b\u0430 \u0434\u043e\u043b\u0436\u043d\u044b \u043b\u0435\u0436\u0430\u0442\u044c \u0432 \u043e\u0434\u043d\u043e\u0439 \u043f\u0430\u043f\u043a\u0435).<\/p>\n<p>  <i>index.html<\/i> \u2014 \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0430<br \/>  <i>clockscript.js<\/i> \u2014 \u0441\u043a\u0440\u0438\u043f\u0442 \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b<br \/>  <i>style.css<\/i> \u2014 \u0444\u0430\u0439\u043b \u0441\u0442\u0438\u043b\u0435\u0439<\/p>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u044b\u0432\u0435\u0434\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0432 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 <i>div<\/i>-\u0431\u043b\u043e\u043a \u0432 .html \u0444\u0430\u0439\u043b. \u0414\u0430\u0436\u0435 \u0432 \u0442\u0430\u043a\u043e\u0439 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439 \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0439 \u043a\u0430\u043c\u0435\u043d\u044c. \u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043a\u0438\u043d\u0443\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0447\u0430\u0441\u043e\u0432 \u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <font color=\"#00cc00\">onload<\/font> \u0443 \u0442\u0435\u0433\u0430 <i>body<\/i>, \u0442\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u0441\u044f \u0432 \u0441\u0442\u0440\u043e\u043a\u0435, \u043d\u043e \u0442\u0430\u043a \u0438 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c. \u0418 <i>div<\/i>-\u0431\u043b\u043e\u043a, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b\u0438 \u0441\u0442\u0440\u043e\u043a\u0443 \u0441 \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c, \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f.<\/p>\n<p>  \u0414\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0432 \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 <font color=\"#00cc00\">onload<\/font> \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <font color=\"#0000cc\">Window<\/font>.<\/p>\n<p>  \u041e\u0434\u0438\u043d \u0438\u0437 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c. \u0424\u0430\u0439\u043b <i>index.html<\/i>:<\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt; &lt;html&gt;   &lt;head&gt; \t&lt;title&gt;\u0427\u0430\u0441\u044b&lt;\/title&gt; \t&lt;meta http-equiv = &quot;Content-Type&quot; content = &quot;text\/html; charset = utf-8&quot; &gt; \t&lt;link rel = &quot;stylesheet&quot; type = &quot;text\/css&quot; href = &quot;style.css&quot;&gt; \t&lt;script src = &quot;clockscript.js&quot;&gt;&lt;\/script&gt;   &lt;\/head&gt;\t   &lt;body&gt;      \u0427\u0435\u0440\u043d\u043e\u0432\u0438\u043a \u043f\u043e JavaScript. \u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0445\u043e\u043b\u0441\u0442\u043e\u043c: &lt;br&gt; \t &lt;div id='clock'&gt;\u0422\u0443\u0442 \u0431\u0443\u0434\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f&lt;\/div&gt; &lt;br&gt; \t &lt;canvas height='480' width='480' id='myCanvas'&gt;&lt;\/canvas&gt;   &lt;\/body&gt; &lt;\/html&gt; <\/code><\/pre>\n<p>  \u0424\u0430\u0439\u043b <i>style.css<\/i>:<\/p>\n<pre><code class=\"css\">#clock{   font-family:Tahoma, sans-serif;   font-size:20px;   font-weight:bold;   color:#0000cc;\t } <\/code><\/pre>\n<p>  \u0424\u0430\u0439\u043b <i>clockscript.js<\/i>:<\/p>\n<pre><code class=\"javascript\">window.onload = function(){    window.setInterval( \tfunction(){ \t    var d = new Date(); \t    document.getElementById(&quot;clock&quot;).innerHTML = d.toLocaleTimeString(); \t}   , 1000); } <\/code><\/pre>\n<p>  \u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u0441 \u0440\u0430\u0431\u043e\u0442\u043e\u0439 <i>clockscript.js<\/i>:<\/p>\n<p>  \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 JavaScript-\u043a\u043e\u0434 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044e <font color=\"#00cc00\">onload<\/font> \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <font color=\"#0000cc\">Window<\/font>:<\/p>\n<pre><code class=\"javascript\">window.onload = function(){\/*\u0431\u043b\u0430-\u0431\u043b\u0430-\u0431\u043b\u0430*\/} <\/code><\/pre>\n<p>  \u041c\u0435\u0442\u043e\u0434 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <font color=\"#0000cc\">Window<\/font>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043a\u043e\u0434 \u0447\u0435\u0440\u0435\u0437 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043a\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 (\u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445):<\/p>\n<pre><code class=\"javascript\">window.setInterval(function(){\/*\u0422\u0443\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b\u0435 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0435 1000 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434*\/} , 1000); <\/code><\/pre>\n<p>  \u041e\u0431\u044a\u0435\u043a\u0442 Date \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0439 \u0441 \u0434\u0430\u0442\u043e\u0439 \u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0435\u0433\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c <i>d<\/i>:<\/p>\n<pre><code class=\"javascript\">var d = new Date(); <\/code><\/pre>\n<p>  \u041d\u0430\u0445\u043e\u0434\u0438\u043c \u043e\u0431\u044a\u0435\u043a\u0442 DOM \u043f\u043e \u0435\u0433\u043e id. \u042d\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u043d\u0430\u0448\u0435 \u0432\u0440\u0435\u043c\u044f. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438\u043b\u0438 \u0435\u0449\u0435 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u0423 \u043c\u0435\u043d\u044f \u044d\u0442\u043e <i>div<\/i>-\u0431\u043b\u043e\u043a. \u041f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043f\u043e id, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <font color=\"#00cc00\">innerHTML<\/font> \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439 \u0432\u043d\u0443\u0442\u0440\u0438. \u0418 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0442\u0443\u0434\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043c\u0435\u0442\u043e\u0434\u0430 <i>toLocaleTimeString()<\/i>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438:<\/p>\n<pre><code class=\"javascript\">document.getElementById(&quot;clock&quot;).innerHTML = d.toLocaleTimeString(); <\/code><\/pre>\n<p>  \u0412\u043e\u0442, \u0447\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f(\u0432\u0440\u0435\u043c\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u0436\u0434\u0443\u044e \u0441\u0435\u043a\u0443\u043d\u0434\u0443):<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/555\/fa9\/2df\/555fa92df04c4a9d803346b0fd196eb2.png\"\/><\/p>\n<h4>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u043e\u0432\u044b\u0445 \u0447\u0430\u0441\u043e\u0432<\/h4>\n<p>  \u0421 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/ru.wikipedia.org\/wiki\/Canvas_(HTML)\">Canvas (HTML)<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0443\u0436\u0438\u0442\u044c \u043d\u0430\u043c \u0445\u043e\u043b\u0441\u0442\u043e\u043c \u0434\u043b\u044f \u0442\u0432\u043e\u0440\u0447\u0435\u0441\u0442\u0432\u0430.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0430\u0448 \u0445\u043e\u043b\u0441\u0442 \u0432 \u0444\u0430\u0439\u043b\u0435 <i>index.html<\/i> \u0432\u043d\u0443\u0442\u0440\u0438 body \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0433\u0434\u0435-\u0442\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0442\u0435\u0433, \u0441\u0440\u0430\u0437\u0443 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0432 \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u044b:<\/p>\n<pre><code class=\"html\">&lt;canvas height='480' width='480' id='myCanvas'&gt;&lt;\/canvas&gt; <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0432 \u0444\u0430\u0439\u043b\u0435 <i>clockscript.js<\/i>, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c, \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <font color=\"#0000cc\">Canvas<\/font>. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043d\u0430\u0448\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0447\u0430\u0441\u043e\u0432. \u0422\u043e\u0433\u0434\u0430 \u0444\u0430\u0439\u043b <i>clockscript.js<\/i> \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">function displayCanvas(){     var canvasHTML = document.getElementById('myCanvas');     var contextHTML = canvasHTML.getContext('2d');     contextHTML.strokeRect(0,0,canvasHTML.width, canvasHTML.height);     \/\/\u0422\u0443\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0447\u0430\u0441\u043e\u0432 \u0438 \u043a\u043e\u0434 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u044b     return; }  window.onload = function(){    window.setInterval( \tfunction(){ \t    var d = new Date(); \t    document.getElementById(&quot;clock&quot;).innerHTML = d.toLocaleTimeString();             displayCanvas(); \t}   , 1000); } <\/code><\/pre>\n<p>  \u041d\u0443 \u0447\u0442\u043e, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0441\u043f\u043e\u043c\u0438\u043d\u0430\u0442\u044c \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0443? \u041d\u0430\u043c \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c \u0441\u0432\u044f\u0437\u044c \u043c\u0435\u0436\u0434\u0443 \u0434\u0435\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u0435\u043b\u043e\u043a \u0438 \u0443\u0433\u043b\u043e\u043c \u0438\u0445 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u043d\u0430 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u0446\u0438\u0444\u0435\u0440\u0431\u043b\u0430\u0442\u0435. <\/p>\n<p>  \u0423\u0433\u043e\u043b \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u0432\u0441\u0435\u0445 \u0441\u0442\u0440\u0435\u043b\u043e\u043a \u0437\u0430 1 \u0441\u0435\u043a\u0443\u043d\u0434\u0443:<\/p>\n<ul>\n<li>\u0421\u0435\u043a\u0443\u043d\u0434\u043d\u0430\u044f \u0441\u0442\u0440\u0435\u043b\u043a\u0430 \u043f\u043e\u0432\u0435\u0440\u043d\u0435\u0442\u0441\u044f \u043d\u0430 \u0443\u0433\u043e\u043b \u2014 (1\/60)*360<sup>o<\/sup> = 6<sup>o<\/sup><\/li>\n<li>\u041c\u0438\u043d\u0443\u0442\u043d\u0430\u044f \u0441\u0442\u0440\u0435\u043b\u043a\u0430 \u043f\u043e\u0432\u0435\u0440\u043d\u0435\u0442\u0441\u044f \u043d\u0430 \u0443\u0433\u043e\u043b \u2014 (1\/60)*6<sup>o<\/sup> = 0,1<sup>o<\/sup> <\/li>\n<li>\u0427\u0430\u0441\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0435\u043b\u043a\u0430 \u043f\u043e\u0432\u0435\u0440\u043d\u0435\u0442\u0441\u044f \u043d\u0430 \u0443\u0433\u043e\u043b \u2014 (1\/60)*0,1<sup>o<\/sup> \u2248 0,0017<sup>o<\/sup> <\/li>\n<\/ul>\n<p>  <u>\u041f\u0435\u0440\u0432\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430:<\/u><\/p>\n<p>  \u0422\u043e \u0435\u0441\u0442\u044c \u0434\u0430\u0436\u0435 \u0437\u0430 1 \u0441\u0435\u043a\u0443\u043d\u0434\u0443 \u0432\u0441\u0435 \u0441\u0442\u0440\u0435\u043b\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f, \u043a\u0430\u0436\u0434\u0430\u044f \u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0443\u0433\u043e\u043b. \u0418 \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043d\u0435 \u0443\u0447\u0435\u0441\u0442\u044c, \u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0439 \u043a\u0430\u043c\u0435\u043d\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0432 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438, \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043a\u0440\u0430\u0441\u0438\u0432\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u043a\u043e\u0433\u0434\u0430 \u0432\u0440\u0435\u043c\u044f \u0431\u0443\u0434\u0435\u0442 19:30, \u0442\u043e \u0447\u0430\u0441\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0435\u043b\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u043e\u0432\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0430 19 \u0447\u0430\u0441\u043e\u0432, \u0445\u043e\u0442\u044f \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u0436\u0438\u0437\u043d\u0438 \u043e\u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0443\u0436\u0435 \u0431\u044b\u0442\u044c \u043d\u0430\u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443 \u043f\u0440\u0438\u0431\u043b\u0438\u0436\u0435\u043d\u0430 \u043a 20 \u0447\u0430\u0441\u0430\u043c. \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u043f\u0440\u0438\u044f\u0442\u043d\u0435\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u043b\u0430\u0432\u043d\u043e\u0435 \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043c\u0438\u043d\u0443\u0442\u043d\u043e\u0439 \u0441\u0442\u0440\u0435\u043b\u043a\u0438. \u041d\u0443 \u0430 \u0441\u0435\u043a\u0443\u043d\u0434\u043d\u0430\u044f \u0441\u0442\u0440\u0435\u043b\u043a\u0430 \u043f\u0443\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0449\u0435\u043b\u043a\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u0438\u0441\u043a\u0440\u0435\u0442\u043d\u044b\u043c\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f\u043c\u0438, \u043a\u0430\u043a \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043c\u0435\u0445\u0430\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0447\u0430\u0441\u043e\u0432. \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b: \u043f\u0440\u0438\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043a \u0443\u0433\u043b\u044b \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0435\u043b\u043a\u0438 \u0443\u0433\u043e\u043b \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0441\u0442\u0440\u0435\u043b\u043a\u0438, \u0434\u043e\u043c\u043d\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u043d\u0430 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442, \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0449\u0438\u0439 \u0435\u0433\u043e \u0434\u043e\u043b\u044e \u043e\u0442 \u0443\u0433\u043b\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0435\u043b\u043a\u0438.<\/p>\n<p>  \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f:<\/p>\n<pre><code class=\"javascript\">var t_sec = 6*d.getSeconds();  \/\/\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0443\u0433\u043e\u043b \u0434\u043b\u044f \u0441\u0435\u043a\u0443\u043d\u0434 var t_min = 6*(d.getMinutes() + (1\/60)*d.getSeconds()); \/\/\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0443\u0433\u043e\u043b \u0434\u043b\u044f \u043c\u0438\u043d\u0443\u0442 var t_hour = 30*(d.getHours() + (1\/60)*d.getMinutes());  \/\/\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0443\u0433\u043e\u043b \u0434\u043b\u044f \u0447\u0430\u0441\u043e\u0432 <\/code><\/pre>\n<p>  <u>\u0412\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430:<\/u><\/p>\n<p>  \u0423\u0433\u043e\u043b \u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0435\u0433\u043e\u0441\u044f \u0440\u0430\u0434\u0438\u0443\u0441-\u0432\u0435\u043a\u0442\u043e\u0440\u0430(\u0441\u0442\u0440\u0435\u043b\u043a\u0438 \u0447\u0430\u0441\u043e\u0432) \u043e\u0442\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0442\u0438\u0432 \u0447\u0430\u0441\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0435\u043b\u043a\u0438. \u0415\u0441\u043b\u0438 \u043c\u044b \u044d\u0442\u043e \u043d\u0435 \u0443\u0447\u0442\u0435\u043c \u0432 \u043d\u0430\u0448\u0435\u0439 \u043b\u043e\u0433\u0438\u043a\u0435, \u0442\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u0438\u043c \u0447\u0430\u0441\u044b \u043d\u0430\u0437\u0430\u0434 \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u0435.<\/p>\n<p>  \u0418 \u0435\u0449\u0435, \u043e\u0442\u0441\u0447\u0435\u0442 \u0447\u0430\u0441\u043e\u0432, \u043c\u0438\u043d\u0443\u0442 \u0438 \u0441\u0435\u043a\u0443\u043d\u0434 \u0443 \u043d\u0430\u0441 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0442 \u0446\u0438\u0444\u0440\u044b 12, \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b: \u0432 \u043d\u0430\u0448\u0438\u0445 \u0444\u043e\u0440\u043c\u0443\u043b\u0430\u0445 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0447\u0435\u0441\u0442\u044c \u044d\u0442\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0434\u0432\u0438\u0433\u0430 +\u03c0\/2 (90<sup>o<\/sup>). \u0410 \u043f\u0435\u0440\u0435\u0434 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0443\u0433\u043b\u0430 \u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0437\u043d\u0430\u043a &quot;-&quot;, \u0447\u0442\u043e\u0431\u044b \u0447\u0430\u0441\u044b \u0448\u043b\u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u043e \u0447\u0430\u0441\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0435\u043b\u043a\u0435. \u0418, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0443\u0433\u043b\u0430 \u0432 \u0433\u0440\u0430\u0434\u0443\u0441\u0430\u0445 \u0432 \u0442\u0440\u0438\u0433\u043e\u043d\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u044f\u0437\u044b\u043a\u043e\u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 \u0443\u043c\u043d\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u043d\u0430 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 &quot;\u03c0\/180<sup>o<\/sup>&quot;.<\/p>\n<p>  \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441\u0435\u043a\u0443\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0435\u043b\u043a\u0438:<\/p>\n<pre><code class=\"javascript\">contextHTML.moveTo(xCenterClock, yCenterClock); contextHTML.lineTo(xCenterClock + lengthSeconds*Math.cos(Math.PI\/2 - t_sec*(Math.PI\/180)),                      yCenterClock - lengthSeconds*Math.sin(Math.PI\/2 - t_sec*(Math.PI\/180))); <\/code><\/pre>\n<p>  <u>\u0422\u0440\u0435\u0442\u044c\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430:<\/u><\/p>\n<p>  \u0412 \u0445\u043e\u0434\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0440\u0438\u0441\u043e\u0447\u0435\u043a \u0446\u0438\u0444\u0435\u0440\u0431\u043b\u0430\u0442\u0430 \u043d\u0443\u0436\u043d\u043e \u043a\u0430\u043a-\u0442\u043e \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u0440\u0438\u0441\u043e\u0447\u043a\u0438 \u043d\u0430\u043f\u0440\u043e\u0442\u0438\u0432 \u0447\u0430\u0441\u043e\u0432. \u0412\u0441\u0435\u0433\u043e \u0440\u0438\u0441\u043e\u0447\u0435\u043a \u2014 60 \u0434\u043b\u044f \u0441\u0435\u043a\u0443\u043d\u0434 \u0438 \u043c\u0438\u043d\u0443\u0442. 12 \u2014 \u0434\u043b\u044f \u0447\u0430\u0441\u043e\u0432. \u042d\u0442\u0438 12 \u0434\u043e\u043b\u0436\u043d\u044b \u043a\u0430\u043a-\u0442\u043e \u0432\u044b\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u043d\u0430 \u0444\u043e\u043d\u0435 \u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445. \u0422\u0430\u043a\u0436\u0435 \u0441\u0438\u043c\u043c\u0435\u0442\u0440\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u043e\u0446\u0438\u0444\u0440\u043e\u0432\u043a\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0448\u0438\u0440\u0438\u043d\u044b \u0446\u0438\u0444\u0440. \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0446\u0438\u0444\u0440\u044b 10, 11 \u0438 12 \u0448\u0438\u0440\u0435, \u0447\u0435\u043c 1, 2, 3 \u0438 \u0442.\u0434. \u041f\u0440\u043e \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043d\u0435 \u0437\u0430\u0431\u044b\u0442\u044c.<\/p>\n<p>  \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043e\u0446\u0438\u0444\u0440\u043e\u0432\u043a\u0438 \u0446\u0438\u0444\u0435\u0440\u0431\u043b\u0430\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">for(var th = 1; th &lt;= 12; th++){ \tcontextHTML.beginPath(); \tcontextHTML.font = 'bold 25px sans-serif'; \tvar xText = xCenterClock + (radiusNum - 30) * Math.cos(-30*th*(Math.PI\/180) + Math.PI\/2); \tvar yText = yCenterClock - (radiusNum - 30) * Math.sin(-30*th*(Math.PI\/180) + Math.PI\/2); \t\/\/\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u0443\u0441\u043e\u043a \u043a\u043e\u0433\u0434\u0430 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0442\u043e, \u0447\u0442\u043e \u0441\u0438\u043c\u043c\u0435\u0442\u0440\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u043e\u0446\u0438\u0444\u0440\u043e\u0432\u043a\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0448\u0438\u0440\u0438\u043d\u044b \u0446\u0438\u0444\u0440\u044b \t\/\/\u041d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 &quot;10&quot; \u0447\u0430\u0441\u043e\u0432 \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c(!) \tif(th &lt;= 9){ \t    contextHTML.strokeText(th, xText - 5 , yText + 10); \t}else{ \t    contextHTML.strokeText(th, xText - 15 , yText + 10); \t}      \tcontextHTML.stroke(); \tcontextHTML.closePath();\t } <\/code><\/pre>\n<p>  \u0421 \u0443\u0447\u0435\u0442\u043e\u043c \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e\u0433\u043e, \u043c\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u043b\u043e\u0433\u0438\u043a\u0438 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u043e\u0432\u044b\u0445 \u0447\u0430\u0441\u043e\u0432 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041a\u043e\u0434 clockscript.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">function displayCanvas(){     var canvasHTML = document.getElementById('myCanvas');     var contextHTML = canvasHTML.getContext('2d');     contextHTML.strokeRect(0,0,canvasHTML.width, canvasHTML.height); \t     \/\/\u0420\u0430\u0441\u0447\u0435\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0446\u0435\u043d\u0442\u0440\u0430 \u0438 \u0440\u0430\u0434\u0438\u0443\u0441\u0430 \u0447\u0430\u0441\u043e\u0432     var radiusClock = canvasHTML.width\/2 - 10;     var xCenterClock = canvasHTML.width\/2;     var yCenterClock = canvasHTML.height\/2; \t     \/\/\u041e\u0447\u0438\u0441\u0442\u043a\u0430 \u044d\u043a\u0440\u0430\u043d\u0430.      contextHTML.fillStyle = &quot;#ffffff&quot;;     contextHTML.fillRect(0,0,canvasHTML.width,canvasHTML.height); \t     \/\/\u0420\u0438\u0441\u0443\u0435\u043c \u043a\u043e\u043d\u0442\u0443\u0440 \u0447\u0430\u0441\u043e\u0432     contextHTML.strokeStyle =  &quot;#000000&quot;;     contextHTML.lineWidth = 1;     contextHTML.beginPath();     contextHTML.arc(xCenterClock, yCenterClock, radiusClock, 0, 2*Math.PI, true);     contextHTML.moveTo(xCenterClock, yCenterClock);     contextHTML.stroke();     contextHTML.closePath(); \t     \/\/\u0420\u0438\u0441\u0443\u0435\u043c \u0440\u0438\u0441\u043e\u0447\u043a\u0438 \u0447\u0430\u0441\u043e\u0432     var radiusNum = radiusClock - 10; \/\/\u0420\u0430\u0434\u0438\u0443\u0441 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0440\u0438\u0441\u043e\u0447\u0435\u043a\t     var radiusPoint;     for(var tm = 0; tm &lt; 60; tm++){ \t  contextHTML.beginPath(); \t  if(tm % 5 == 0){radiusPoint = 5;}else{radiusPoint = 2;} \/\/\u0434\u043b\u044f \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0447\u0430\u0441\u043e\u0432\u044b\u0445 \u0440\u0438\u0441\u043e\u0447\u0435\u043a \t  var xPointM = xCenterClock + radiusNum * Math.cos(-6*tm*(Math.PI\/180) + Math.PI\/2); \t  var yPointM = yCenterClock - radiusNum * Math.sin(-6*tm*(Math.PI\/180) + Math.PI\/2); \t  contextHTML.arc(xPointM, yPointM, radiusPoint, 0, 2*Math.PI, true); \t  contextHTML.stroke(); \t  contextHTML.closePath();     }  \t     \/\/\u041e\u0446\u0438\u0444\u0440\u043e\u0432\u043a\u0430 \u0446\u0438\u0444\u0435\u0440\u0431\u043b\u0430\u0442\u0430 \u0447\u0430\u0441\u043e\u0432     for(var th = 1; th &lt;= 12; th++){ \tcontextHTML.beginPath(); \tcontextHTML.font = 'bold 25px sans-serif'; \tvar xText = xCenterClock + (radiusNum - 30) * Math.cos(-30*th*(Math.PI\/180) + Math.PI\/2); \tvar yText = yCenterClock - (radiusNum - 30) * Math.sin(-30*th*(Math.PI\/180) + Math.PI\/2); \tif(th &lt;= 9){ \t\tcontextHTML.strokeText(th, xText - 5 , yText + 10); \t}else{ \t\tcontextHTML.strokeText(th, xText - 15 , yText + 10); \t}      \tcontextHTML.stroke(); \tcontextHTML.closePath();\t     }  \t     \/\/\u0420\u0438\u0441\u0443\u0435\u043c \u0441\u0442\u0440\u0435\u043b\u043a\u0438     var lengthSeconds = radiusNum - 10;     var lengthMinutes = radiusNum - 15;     var lengthHour = lengthMinutes \/ 1.5;     var d = new Date();                \/\/\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0434\u0430\u0442\u044b     var t_sec = 6*d.getSeconds();                           \/\/\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0443\u0433\u043e\u043b \u0434\u043b\u044f \u0441\u0435\u043a\u0443\u043d\u0434     var t_min = 6*(d.getMinutes() + (1\/60)*d.getSeconds()); \/\/\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0443\u0433\u043e\u043b \u0434\u043b\u044f \u043c\u0438\u043d\u0443\u0442     var t_hour = 30*(d.getHours() + (1\/60)*d.getMinutes()); \/\/\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0443\u0433\u043e\u043b \u0434\u043b\u044f \u0447\u0430\u0441\u043e\u0432 \t     \/\/\u0420\u0438\u0441\u0443\u0435\u043c \u0441\u0435\u043a\u0443\u043d\u0434\u044b     contextHTML.beginPath();     contextHTML.strokeStyle =  &quot;#FF0000&quot;;     contextHTML.moveTo(xCenterClock, yCenterClock);     contextHTML.lineTo(xCenterClock + lengthSeconds*Math.cos(Math.PI\/2 - t_sec*(Math.PI\/180)), \t\t\t\tyCenterClock - lengthSeconds*Math.sin(Math.PI\/2 - t_sec*(Math.PI\/180)));     contextHTML.stroke();     contextHTML.closePath();      \/\/\u0420\u0438\u0441\u0443\u0435\u043c \u043c\u0438\u043d\u0443\u0442\u044b     contextHTML.beginPath();     contextHTML.strokeStyle =  &quot;#000000&quot;;     contextHTML.lineWidth = 3;     contextHTML.moveTo(xCenterClock, yCenterClock);     contextHTML.lineTo(xCenterClock + lengthMinutes*Math.cos(Math.PI\/2 - t_min*(Math.PI\/180)), \t\t\t\t yCenterClock - lengthMinutes*Math.sin(Math.PI\/2 - t_min*(Math.PI\/180)));     contextHTML.stroke();     contextHTML.closePath();      \/\/\u0420\u0438\u0441\u0443\u0435\u043c \u0447\u0430\u0441\u044b     contextHTML.beginPath();     contextHTML.lineWidth = 5;     contextHTML.moveTo(xCenterClock, yCenterClock);     contextHTML.lineTo(xCenterClock + lengthHour*Math.cos(Math.PI\/2 - t_hour*(Math.PI\/180)), \t\t\t\t yCenterClock - lengthHour*Math.sin(Math.PI\/2 - t_hour*(Math.PI\/180)));     contextHTML.stroke();     contextHTML.closePath();\t \t     \/\/\u0420\u0438\u0441\u0443\u0435\u043c \u0446\u0435\u043d\u0442\u0440 \u0447\u0430\u0441\u043e\u0432     contextHTML.beginPath();     contextHTML.strokeStyle =  &quot;#000000&quot;;     contextHTML.fillStyle = &quot;#ffffff&quot;;     contextHTML.lineWidth = 3;     contextHTML.arc(xCenterClock, yCenterClock, 5, 0, 2*Math.PI, true);     contextHTML.stroke();     contextHTML.fill();     contextHTML.closePath(); \t       return; }   window.onload = function(){     window.setInterval( \tfunction(){ \t\tvar d = new Date(); \t\tdocument.getElementById(&quot;clock&quot;).innerHTML = d.toLocaleTimeString(); \t\tdisplayCanvas(); \t}     , 1000); } <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  <\/p>\n<h4>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h4>\n<p>  \u0412\u043e\u0442 \u0442\u0430\u043a\u0438\u0435 \u0447\u0430\u0441\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0432 \u0438\u0442\u043e\u0433\u0435. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0440\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0430 JavaScript \u0438 \u0437\u0430\u0440\u043e\u0434\u0438\u0442 \u0443 \u0432\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441 \u043a \u043e\u0441\u0432\u043e\u0435\u043d\u0438\u044e \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/ac6\/476\/ea2\/ac6476ea22b24f25934dc62f5b549c29.png\"\/>       <\/p>\n<div class=\"clear\"><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/275353\/\"> http:\/\/habrahabr.ru\/post\/275353\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>       <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/c88\/ca0\/817\/c88ca0817bf345278cded3453929b8cf.png\"\/><\/p>\n<h4>\u0414\u043b\u044f \u043a\u043e\u0433\u043e \u0438 \u0437\u0430\u0447\u0435\u043c \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f?<\/h4>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u0438\u0437\u0443\u0447\u0430\u0435\u0448\u044c \u043d\u043e\u0432\u0443\u044e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e \u0438\u043b\u0438 \u044f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u043e\u043d\u044f\u0442\u0438\u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u043e\u0441\u044f\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0443\u0442\u0438\u043d\u043d\u044b\u0439 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440 \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0431\u044b\u0441\u0442\u0440\u043e \u043e\u0442\u0431\u0438\u0432\u0430\u044e\u0442 \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u043e\u0431\u0443\u0447\u0430\u0442\u044c\u0441\u044f \u0443 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445. \u0426\u0435\u043b\u044c \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u2014 \u044d\u0442\u043e \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u0442\u044c \u0438 \u0443\u0432\u043b\u0435\u0447\u044c \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0432 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435. \u0421\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u0434\u043b\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043b\u0438\u0441\u044c \u0441 \u043e\u0441\u043d\u043e\u0432\u0430\u043c\u0438 <abbr title=\"HyperText Markup Language, version 5\">HTML5<\/abbr> \u0438 <abbr title=\"\u041f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u043d\u044b\u0439 \u044f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u042f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u044f\u0437\u044b\u043a\u0430 ECMAScript\">JavaScript<\/abbr>, \u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0430\u0441\u043a\u0443\u0447\u0438\u043b\u043e \u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0442\u0435\u043a\u0441\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0435 \u043f\u0440\u0438 \u0432\u044b\u0432\u043e\u0434\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432, \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0430\u0440\u0438\u0444\u043c\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0438 \u0442.\u0434. \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0443\u044e, \u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u0443\u044e \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u044f\u0437\u044b\u043a\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-272344","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/272344","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=272344"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/272344\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=272344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=272344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=272344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}