commit 90530e93da0f273b19a8dc0f6c82e16b8bd210a3 Author: brettlangdon Date: Thu Jan 2 09:14:26 2014 -0500 initial commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..673b8d7 --- /dev/null +++ b/README.md @@ -0,0 +1,4 @@ +dotclock +======== + +It is a dotclock... check it out [dotclock.brett.is](https://dotclock.brett.is/). diff --git a/dotclock.css b/dotclock.css new file mode 100644 index 0000000..ac9586e --- /dev/null +++ b/dotclock.css @@ -0,0 +1,90 @@ +body{ + background-color: rgb(200,200,200); +} + +.clear{ + clear: both; +} + +#header{ + width: 100%; + text-align: center; + margin: 0; + padding: 0; + font-size: 1em; +} + +#time{ + width: 100%; + text-align: center; + font-size: 2em; + height: 2em; + font-family: 'Offside', cursive; + margin: 0; + padding: 0; +} + +#clock{ + width: 980px; + margin-left: auto; + margin-right: auto; +} +.second{ + float: left; + width: 4px; + height: 1px; +} + +.minute{ + float: left; + width: 24px; + height: 10px; + margin: 1px; + background-color: rgb(170,170,170); + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + -khtml-border-radius: 2px; + border-radius: 2px; + overflow: hidden; +} + +.hour{ + float: left; + width: 156px; + height: 120px; + margin: 3px; +} + +#info{ + width: 100%; + text-align: center; +} + +.title{ + float: left; +} + +#footer{ + margin-top: 20px; + text-align: center; + width: 980px; + margin-left: auto; + margin-right: auto; +} + +#footer p{ + text-indent: 2em; +} + +.active{ + background-color: rgb(255,102, 255); +} + +a{ + color: rgb(30,30,135); + text-decoration: none; +} + +a:hover{ + color: rgb(255,102, 255); +} \ No newline at end of file diff --git a/dotclock.js b/dotclock.js new file mode 100644 index 0000000..08004d2 --- /dev/null +++ b/dotclock.js @@ -0,0 +1,79 @@ +var now = new Date(); +var today = new Date(now.getFullYear(), + now.getMonth(), + now.getDate(), + 0, 0, 0, 0); + +$(document).ready(function(){ + set_time(); + setInterval(update_time, 1000); + setInterval(get_time, 10 * 1000); +}); + + +var set_time = function(){ + var now = new Date().getTime()/1000; + now = Math.round(now - (today.getTime()/1000)); + var hours = Math.floor((now / 3600) % 24); + var minutes = Math.floor((now / 60) % 60); + var seconds = Math.floor(now % 60); + for(var hr = 0; hr < hours; ++hr){ + next = $('#hr-' + hr); + next.children('.minute').addClass('active'); + } + for(var min = 0; min < minutes; ++min){ + next = $('#hr-' + hours + ' #min-' + min); + next.addClass('active'); + } + for(var sec = 0; sec <= seconds; ++sec){ + parent = $('#hr-' + hours + ' #min-' + minutes); + parent.append($('')); + } + last_hour = hours; + last_minute = minutes; + last_second = seconds; + + hr = (last_hour<10)?'0'+last_hour:last_hour; + min = (last_minute<10)?'0'+last_minute:last_minute; + sec = (last_second<10)?'0'+last_second:last_second; + $('#time').text(hr + ':' + min + ':' + sec); +}; + +var get_time = function(){ + var now = new Date().getTime()/1000; + now = Math.round(now - (today.getTime()/1000)); + var hours = Math.floor((now / 3600) % 24); + var minutes = Math.floor((now / 60) % 60); + var seconds = Math.floor(now % 60); + last_hour = hours; + last_minute = minutes; + last_second = seconds; +}; + +var update_time = function(){ + last_second += 1; + if(last_second >= 60){ + last_second = 0; + last_minute += 1; + if(last_minute >= 60){ + last_minute = 0; + last_hour += 1; + if(last_hour >= 24){ + last_hour = 0; + reset(); + } + } + } + parent = $('#hr-' + last_hour + ' #min-' + last_minute); + parent.append($('')); + + hr = (last_hour<10)?'0'+last_hour:last_hour; + min = (last_minute<10)?'0'+last_minute:last_minute; + sec = (last_second<10)?'0'+last_second:last_second; + $('#time').text(hr + ':' + min + ':' + sec); +}; + +var reset = function(){ + $('.second').remove(); + $('#clock').children('.hour').children('.minute').removeClass('active'); +}; \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..f3ca912 --- /dev/null +++ b/index.html @@ -0,0 +1,46 @@ + + + + + The Dot Clock + + + + + + + +
+
+
+ + + +