Skip to content

Instantly share code, notes, and snippets.

@Fordi

Fordi/text-clock.html

Created August 11, 2011 12:06
Show Gist options
  • Save Fordi/1139487 to your computer and use it in GitHub Desktop.
Save Fordi/1139487 to your computer and use it in GitHub Desktop.
Download ZIP
Text-based clock
Raw
text-clock.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.clock {
font: 48pt Consolas;
margin: 0 auto;
width: 556pt;
margin-top: 1.5em;
}
.clock span {
padding: 0 0.25em;
opacity: 0.25;
}
.clock span.on {
opacity: 1;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
jQuery(function ($) {
var grid = [
'ITLISASTIME',
'ACQUARTERDC',
'TWENTYFIVEX',
'HALFBTENFTO',
'PASTERUNINE',
'ONESIXTHREE',
'FOURFIVETWO',
'EIGHTELEVEN',
'SEVENTWELVE',
'TENSEOCLOCK'
].join('').split('');
var gridWidth=11;
var itIs = [0, 1, 3, 4];
var minutes = {
0: [104, 105, 106, 107, 108],
5: [28, 29, 30, 31, 44, 45, 46, 47],
10: [38, 39, 40, 44, 45, 46, 47],
15: [11, 13, 14, 15, 16, 17, 18, 19, 44, 45, 46, 47],
20: [22, 23, 24, 25, 26, 27, 44, 45, 46, 47],
25: [22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 44, 45, 46, 47],
30: [33, 34, 35, 36, 44, 45, 46, 47],
35: [22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 42, 43],
40: [22, 23, 24, 25, 26, 27, 42, 43],
45: [11, 13, 14, 15, 16, 17, 18, 19, 42, 43],
50: [38, 39, 40, 42, 43],
55: [28, 29, 30, 31, 42, 43]
};
var hours = {
0: [93, 94, 95, 96, 97, 98],
1: [55, 56, 57],
2: [74, 75, 76],
3: [61, 62, 63, 64, 65],
4: [66, 67, 68, 69],
5: [70, 71, 72, 73],
6: [58, 59, 60],
7: [88, 89, 90, 91, 92],
8: [77, 78, 79, 80, 81],
9: [51, 52, 53, 54],
10: [99, 100, 101],
11: [82, 83, 84, 85, 86, 87]
}
var clock = $('<div>').addClass('clock');
var item=null;
for (var i=0; i<grid.length; i++) {
if (i%gridWidth==0) {
if (item) clock.append(item);
item=$('<div>');
}
item.append($('<span>').text(grid[i]));
}
clock.appendTo(document.body);
var set = clock.find('span');
function setTime() {
var now = new Date();
var min = Math.round(now.getMinutes()/5)*5;
var hr = (now.getHours()+(min>30?1:0))%12;
set.removeClass('on');
console.log(hr, min);
for (var i=0; i<itIs.length; i++)
set.eq(itIs[i]).addClass('on');
for (var i=0; i<minutes[min].length; i++)
set.eq(minutes[min][i]).addClass('on');
for (var i=0; i<hours[hr].length; i++)
set.eq(hours[hr][i]).addClass('on');
}
setTime();
setInterval(setTime, 1000);
});
</script>
</head>
<body>
</body>
</html>
@hrk
Copy link

hrk commented Feb 9, 2016

Sorry, bad paste. The internal timer reset should look like this:

                if (now.getSeconds() == 0) {
                    if (firstTimer) {
                        clearInterval(firstTimer);
                        setInterval(setTime, 60 * 1000);
                    }
                } else {
                    firstTimer = setInterval(setTime, (60 - now.getSeconds()) * 1000);
                }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment