mmaltsev/clock.html

## clock.html
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clock</title>
    <style>
      .clock {
        color: orange;
        font-size: 40px;
        display: flex;
        flex-direction: row;
        font-family: monospace;
        width: 190px;
      }
      .colon {
        width: 20px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="clock">
      <div id="hour"></div>
      <div class="colon"> </div>
      <div id="min"></div>
      <div class="colon"> </div>
      <div id="sec"></div>
    </div>
    <script>
      let isColon = false
      isColon = setTime(isColon)
      setInterval(() => {
        isColon = setTime(isColon)
      }, 1000)

      function setTime(isColon) {
        hour = new Date().getHours()
        min = new Date().getMinutes()
        sec = new Date().getSeconds()
        hourText = hour < 10 ? '0' + hour : '' + hour
        minText = min < 10 ? '0' + min : '' + min
        secText = sec < 10 ? '0' + sec : '' + sec
        document.getElementById('hour').innerText = hourText
        document.getElementById('min').innerText = minText
        document.getElementById('sec').innerText = secText
        if (isColon) {
          document.getElementsByClassName('colon')[0].innerText = ' '
          document.getElementsByClassName('colon')[1].innerText = ' '
        } else {
          document.getElementsByClassName('colon')[0].innerText = ':'
          document.getElementsByClassName('colon')[1].innerText = ':'
        }
        return !isColon
      }
    </script>
  </body>
</html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Clock</title>
	<style>
	.clock {
	color: orange;
	font-size: 40px;
	display: flex;
	flex-direction: row;
	font-family: monospace;
	width: 190px;
	}
	.colon {
	width: 20px;
	text-align: center;
	}
	</style>
	</head>
	<body>
	<div class="clock">
	<div id="hour"></div>
	<div class="colon"> </div>
	<div id="min"></div>
	<div class="colon"> </div>
	<div id="sec"></div>
	</div>
	<script>
	let isColon = false
	isColon = setTime(isColon)
	setInterval(() => {
	isColon = setTime(isColon)
	}, 1000)

	function setTime(isColon) {
	hour = new Date().getHours()
	min = new Date().getMinutes()
	sec = new Date().getSeconds()
	hourText = hour < 10 ? '0' + hour : '' + hour
	minText = min < 10 ? '0' + min : '' + min
	secText = sec < 10 ? '0' + sec : '' + sec
	document.getElementById('hour').innerText = hourText
	document.getElementById('min').innerText = minText
	document.getElementById('sec').innerText = secText
	if (isColon) {
	document.getElementsByClassName('colon')[0].innerText = ' '
	document.getElementsByClassName('colon')[1].innerText = ' '
	} else {
	document.getElementsByClassName('colon')[0].innerText = ':'
	document.getElementsByClassName('colon')[1].innerText = ':'
	}
	return !isColon
	}
	</script>
	</body>
	</html>