Skip to content

Instantly share code, notes, and snippets.

@2shortplanks
Last active January 20, 2021 12:31
Show Gist options
  • Save 2shortplanks/8c99b9a47d5fa6c4c1764305cb5cd6ab to your computer and use it in GitHub Desktop.
Save 2shortplanks/8c99b9a47d5fa6c4c1764305cb5cd6ab to your computer and use it in GitHub Desktop.
TabTime
<!DOCTYPE html>
<head>
<style>
body { background: purple; font-family: Helvetica, sans-serif }
h1 { font-size: 100pt; font-size: 20vw; text-align: right}
h2 { font-size: min(3vw, 50px) }
p { font-size: min(2vw, 30px) }
#time { background: yellow; padding: 0.5vw }
.cyan { background: cyan; padding: 0.5vw }
</style>
</head>
<body>
<h1><span id="time">--:--:--</span></h1>
<h2><span class="cyan">tinyurl.com/tabtime shows the time in the page title</span></h2>
<p><span class="cyan">
Useful for background tabs when running in
a fullscreen mode that won't show your taskbar / menubar
</span></p>
<script>
timeElement = document.getElementById("time");
window.setInterval(function () {
var d = new Date()
output = "" + d.getHours() + ":"
if (d.getMinutes() < 10) {
output += "0";
}
output += d.getMinutes() + ":"
if (d.getSeconds() < 10) {
output += "0";
}
output += d.getSeconds()
document.title = output
timeElement.innerText = output
}, 1000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment