Skip to content

Instantly share code, notes, and snippets.

@mmaltsev

mmaltsev/clock.html

Created May 3, 2018 15:27
Show Gist options
  • Save mmaltsev/8d6b1452f25a3e8a6847a3c119f63a88 to your computer and use it in GitHub Desktop.
Save mmaltsev/8d6b1452f25a3e8a6847a3c119f63a88 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment