up

2017-02-28 12:54:48 +03:00 · 2017-02-28 12:54:48 +03:00 · 508969c13f
commit 508969c13f
parent 4272b7bb13
168 changed files with 340 additions and 10 deletions
--- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html
@ -0,0 +1,58 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <style>
+    .hour {
+      color: red
+    }
+
+    .min {
+      color: green
+    }
+
+    .sec {
+      color: blue
+    }
+  </style>
+</head>
+
+<body>
+
+  <div id="clock">
+    <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
+  </div>
+
+  <script>
+    let timerId;
+
+    function update() {
+      let clock = document.getElementById('clock');
+      let date = new Date();
+
+      let hours = date.getHours();
+      if (hours < 10) hours = '0' + hours;
+      clock.children[0].innerHTML = hours;
+
+      let minutes = date.getMinutes();
+      if (minutes < 10) minutes = '0' + minutes;
+      clock.children[1].innerHTML = minutes;
+
+      let seconds = date.getSeconds();
+      if (seconds < 10) seconds = '0' + seconds;
+      clock.children[2].innerHTML = seconds;
+    }
+
+    function clockStart() {
+      timerId = setInterval(update, 1000);
+      update(); // <--  start right now, don't wait 1 second till the first setInterval works
+    }
+
+    function clockStop() {
+      clearInterval(timerId);
+    }
+
+    clockStart();
+  </script>
+
+</body>
+</html>