Skip to content

Instantly share code, notes, and snippets.

@seangeleno

seangeleno/index.html

Created March 17, 2023 06:30
Show Gist options
  • Save seangeleno/527a0c2f28dd4c5c1747f9dc1a4b852f to your computer and use it in GitHub Desktop.
Save seangeleno/527a0c2f28dd4c5c1747f9dc1a4b852f to your computer and use it in GitHub Desktop.
Download ZIP
Word clock
Raw
index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style type="text/css">
</style>
<link rel="stylesheet" href="./style.css" type="text/css" media="all" charset="utf-8">
<script src="https://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./master.js" type="text/javascript" charset="utf-8"></script>
<title>Text clock</title>
</head>
<body>
<div id="progressbar"></div>
<div id="clock">
<span class="word on">It</span>
<span class="word nbsp"></span>
<span class="word on">is</span>
<span class="word nbsp"></span>
<span class="word" id="m_20">twenty</span>
<br />
<span class="word" id="m_15">quarter</span>
<span class="word nbsp"></span>
<span class="word" id="m_30">half</span>
<br />
<span class="word" id="m_10">ten</span>
<span class="word" id="m_5">five</span>
<span class="word nbsp"></span>
<span class="word" id="past">past</span>
<br />
<span class="word" id="to">to</span>
<span class="word nbsp"></span>
<span class="word" id="h_0">twelve</span>
<span class="word" id="h_1">one</span>
<br />
<span class="word" id="h_2">two</span>
<span class="word" id="h_3">three</span>
<span class="word" id="h_4">four</span>
<br />
<span class="word" id="h_5">five</span>
<span class="word" id="h_6">six</span>
<span class="word" id="h_7">seven</span>
<br />
<span class="word" id="h_8">eight</span>
<span class="word" id="h_9">nine</span>
<span class="word" id="h_10">ten</span>
<br />
<span class="word nbsp"></span>
<span class="word nbsp"></span>
<span class="word nbsp"></span>
<span class="word" id="h_11">eleven</span>
<span class="word nbsp"></span>
<span class="word nbsp"></span>
<span class="word nbsp"></span>
<br />
<span class="word nbsp"></span>
<span class="word" id="m_0">O'Clock</span>
<span class="word nbsp"></span>
<span class="word on">now</span>
</div>
</body>
</html>
Raw
script.js
var hours, minutes, to, past, nbsps;
var progress;
var chars = 'abcdefghijklmnopqrstuvwxyz';
var changed = function() {
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var offset;
var next;
hour = hour % 12;
minute = minute - minute % 5;
for (var i in minutes) {
minutes[i].removeClass('on');
}
for (var i in hours) {
hours[i].removeClass('on');
}
to.removeClass('on');
past.removeClass('on');
if (minute > 30) {
hours[(hour + 1) % 12].addClass('on');
to.addClass('on');
} else {
hours[hour].addClass('on');
if (minute !== 0) {
past.addClass('on');
}
}
offset = (minute > 30)?(60-minute):minute;
if (offset in minutes) {
minutes[offset].addClass('on');
} else if (offset === 25) {
minutes[20].addClass('on');
minutes[5].addClass('on');
}
now.setTime(Date.now());
next = new Date(now.getTime());
next.setMinutes(minute + 5);
next.setSeconds(0);
next.setMilliseconds(0);
console.log((next - now) / 1000);
setTimeout(changed, next - now);
}
var adjustProgress = function() {
var now = new Date();
var passed = (now.getMinutes() % 5) * 60 + now.getSeconds();
var percent = passed / (5 * 60) * 100;
progress.width(percent+'%')
.css('transition', 'width 1s linear');
if (percent < .5) {
progress.hide();
setTimeout(function() {
progress.fadeIn();
}, 500);
}
setTimeout(adjustProgress, 1000);
};
var first = function() {
nbsps.each(function() {
var c = chars.charAt(Math.floor(Math.random() * chars.length));
$(this).text(c);
});
setTimeout(function() {
progress.fadeIn();
}, 1000);
};
$(function() {
minutes = {
0: $('#clock #m_0'),
5: $('#clock #m_5'),
10: $('#clock #m_10'),
15: $('#clock #m_15'),
20: $('#clock #m_20'),
30: $('#clock #m_30'),
};
hours = {
0: $('#clock #h_0'),
1: $('#clock #h_1'),
2: $('#clock #h_2'),
3: $('#clock #h_3'),
4: $('#clock #h_4'),
5: $('#clock #h_5'),
6: $('#clock #h_6'),
7: $('#clock #h_7'),
8: $('#clock #h_8'),
9: $('#clock #h_9'),
10: $('#clock #h_10'),
11: $('#clock #h_11'),
}
to = $('#clock #to');
past = $('#clock #past');
nbsps = $('#clock .nbsp');
progress = $('#progressbar');
changed();
adjustProgress();
first();
});
Raw
style.css
html {
text-align: center;
background: black;
font-size: 25px;
}
#progressbar {
width: 100%;
height: 2px;
display: none;
position: fixed;
top: 0;
left: 0;
background: red;
box-shadow: 1px 2px 3px red;
}
#clock {
text-align: left;
display: inline-block;
padding: 2em;
margin: 3em;
background: #222;
color: grey;
border: 1px solid #333;
border-radius: .5em;
font-family: 'Courier New', monospace;
word-spacing: -1.1em;
letter-spacing: .5em;
white-space: nowrap;
}
#clock > .word {
text-transform: uppercase;
font-size: 2em;
word-spacing: 0em;
opacity: .1;
transition: all 3s;
}
#clock > .word.on {
opacity: 1;
color: #0af;
text-shadow: 0 0 5px #6bf;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment