This is most excellent JavaScript clock on the web page I ever see, although this is 5 minutes interval JavaScript clock but it has a very nice design and very unique performance: writing the time in ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: CSS below for styling thescript, place it into HEAD section
CSS
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Step 3: Copy & Paste HTML code below in your BODY section
HTML
How to setup
Step 1: CSS below for styling thescript, place it into HEAD section
CSS
Codice:
<style>
body {
background-color: #111;
}
div#clock {
font-size: 50px;
font-family: monospace;
color: #222;
text-align: center;
}
.lightup {
color: #EEE;
}
.seclightup {
color: #EEE;
}
.gumuz {
color: #333;
}
</style>Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Codice:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
function render_time(classes) {
// reset
$('span').removeClass('lightup');
//toggle_sec();
for (var i in classes) {
$(classes[i]).addClass('lightup');
}
}
function toggle_sec() {
if ($('.sec').hasClass('seclightup')) {
$('.sec').removeClass('seclightup')
} else {
$('.sec').addClass('seclightup')
}
}
function check_time() {
var classes = ['.it_is']
toggle_sec();
var date = new Date();
var hours = date.getHours()%12;
if (hours==0) hours = 12;
var minutes = date.getMinutes()-(date.getMinutes()%5);
if (date.getMinutes()%5 > 2) minutes = minutes + 5;
if (minutes == 60) { minutes = 0; hours = hours+1;}
// stupid switch logic...
if (minutes == 0) {
// o'clock!
classes.push('.'+hours);
classes.push('.oclock');
} else if (minutes == 30) {
// half past
classes.push('.'+hours);
classes.push('.half');
classes.push('.past');
} else if (minutes == 15) {
// quarter past
classes.push('.'+hours);
classes.push('.past');
classes.push('.quarter');
} else if (minutes == 45) {
// quarter to
if (hours==12) hours = 0;
classes.push('.'+(hours+1));
classes.push('.quarter');
classes.push('.to');
} else if (minutes < 30) {
// X past
classes.push('.'+hours);
classes.push('.'+minutes+'to');
classes.push('.past');
classes.push('.minutes');
} else if (minutes > 30) {
// X to
if (hours==12) hours = 0;
classes.push('.'+(hours+1));
classes.push('.'+(60-minutes)+'to');
classes.push('.to');
classes.push('.minutes');
}
render_time(classes);
}
setInterval(check_time, 1000);
});
</script>Step 3: Copy & Paste HTML code below in your BODY section
HTML
Codice:
<div id="clock">
<span class="it_is lightup">it</span>r<span class="it_is lightup">is</span>u<span class="half">half</span><span class="10to 10past">ten</span><br>
<span class="quarter">quarter</span><span class="20to 25to lightup">twenty</span><br>
<span class="25to 5to">five</span>q<span class="minutes lightup">minutes</span>t<br>
<span class="past lightup">past</span>gumuz<span class="to">to</span>ne<br>
<span class="1">one</span>n<span class="2">two</span>z<span class="3">three</span><br>
<span class="4">four</span><span class="5">five</span><span class="7">seven</span><br>
<span class="6">six</span><span class="8 lightup">eight</span>y<span class="9">nine</span><br>
<span class="10">ten</span><span class="11">eleven</span><span class="sec">♥</span>sec<br>
<span class="12">twelve</span><span class="oclock">o'clock</span><br>
</div>