Free Binary Clock Javascript by IndigoTide
- binary_clock.html
- Free Binary Clock Javascript by Indigotide.
- Design Intent: Windows Desktop Application
- Features: Bitwise Comparisons
CODE - binary_clock.js
<!--
// Begin Script "binary_clock.js"
var hbit0 = "#000000";
var hbit1 = "#000000";
var mbit0 = "#000000";
var mbit1 = "#000000";
var sbit0 = "#000000";
var sbit1 = "#000000";
var hours = 0;
var minutesX10 = 0;
var minutesX1 = 0;
var secondsX10 = 0;
var secondsX1 = 0;
var meridian = " AM";
function initialize()
{
document.getElementById( "h1" ).readOnly = true; // no writing in display
document.getElementById( "h2" ).readOnly = true;
document.getElementById( "h4" ).readOnly = true;
document.getElementById( "h8" ).readOnly = true;
document.getElementById( "m10" ).readOnly = true;
document.getElementById( "m20" ).readOnly = true;
document.getElementById( "m40" ).readOnly = true;
document.getElementById( "m80" ).readOnly = true;
document.getElementById( "m1" ).readOnly = true;
document.getElementById( "m2" ).readOnly = true;
document.getElementById( "m4" ).readOnly = true;
document.getElementById( "m8" ).readOnly = true;
document.getElementById( "s10" ).readOnly = true;
document.getElementById( "s20" ).readOnly = true;
document.getElementById( "s40" ).readOnly = true;
document.getElementById( "s80" ).readOnly = true;
document.getElementById( "s1" ).readOnly = true;
document.getElementById( "s2" ).readOnly = true;
document.getElementById( "s4" ).readOnly = true;
document.getElementById( "s8" ).readOnly = true;
UpdateClock(); // start clock update routine
}
function UpdateClock() //loop to keep time displays current
{
var now = new Date(); // get current date & time from computer clock
hours = Math.floor(now.getHours());
if( hours > 11 )
{
hbit0 = "#000099"; // select BGR PM colors
hbit1 = "#3366ff";
mbit0 = "#006600";
mbit1 = "#00ff00";
sbit0 = "#990000";
sbit1 = "#ff0000";
meridian = " PM";
}
else
{
hbit0 = "#990000"; // select RGB AM colors
hbit1 = "#ff0000";
mbit0 = "#006600";
mbit1 = "#00ff00";
sbit0 = "#000099";
sbit1 = "#3366ff";
meridian = " AM";
}
if( hours > 12 )
{
hours -= 12; // force 12 hour mode
}
else if( hours == 0 )
{
hours = 12;
}
minutesX10 = Math.floor( now.getMinutes() / 10 );
minutesX1 = Math.floor( now.getMinutes() % 10 ); // mod 10 remainder
secondsX10 = Math.floor( now.getSeconds() / 10 );
secondsX1 = Math.floor( now.getSeconds() % 10 ); // mod 10 remainder
document.getElementById( "time" ).innerHTML = hours + ":" + minutesX10 + minutesX1 + ":" + secondsX10 + secondsX1 + meridian;
if(secondsX1 & 1)
{
document.getElementById( "s1" ).style.backgroundColor = sbit1; // set element colors with bitwise comparisons
}
else
document.getElementById( "s1" ).style.backgroundColor = sbit0;
if(secondsX1 & 2)
{
document.getElementById( "s2" ).style.backgroundColor = sbit1;
}
else
document.getElementById( "s2" ).style.backgroundColor = sbit0;
if(secondsX1 & 4)
{
document.getElementById( "s4" ).style.backgroundColor = sbit1;
}
else
document.getElementById( "s4" ).style.backgroundColor = sbit0;
if(secondsX1 & 8)
{
document.getElementById( "s8" ).style.backgroundColor = sbit1;
}
else
document.getElementById( "s8" ).style.backgroundColor = sbit0;
if(secondsX10 & 1)
{
document.getElementById( "s10" ).style.backgroundColor = sbit1;
}
else
document.getElementById( "s10" ).style.backgroundColor = sbit0;
if(secondsX10 & 2)
{
document.getElementById( "s20" ).style.backgroundColor = sbit1;
}
else
document.getElementById( "s20" ).style.backgroundColor = sbit0;
if(secondsX10 & 4)
{
document.getElementById( "s40" ).style.backgroundColor = sbit1;
}
else
document.getElementById( "s40" ).style.backgroundColor = sbit0;
if(secondsX10 & 8)
{
document.getElementById( "s80" ).style.backgroundColor = sbit1;
}
else
document.getElementById( "s80" ).style.backgroundColor = sbit0;
if(minutesX1 & 1)
{
document.getElementById( "m1" ).style.backgroundColor = mbit1;
}
else
document.getElementById( "m1" ).style.backgroundColor = mbit0;
if(minutesX1 & 2)
{
document.getElementById( "m2" ).style.backgroundColor = mbit1;
}
else
document.getElementById( "m2" ).style.backgroundColor = mbit0;
if(minutesX1 & 4)
{
document.getElementById( "m4" ).style.backgroundColor = mbit1;
}
else
document.getElementById( "m4" ).style.backgroundColor = mbit0;
if(minutesX1 & 8)
{
document.getElementById( "m8" ).style.backgroundColor = mbit1;
}
else
document.getElementById( "m8" ).style.backgroundColor = mbit0;
if(minutesX10 & 1)
{
document.getElementById( "m10" ).style.backgroundColor = mbit1;
}
else
document.getElementById( "m10" ).style.backgroundColor = mbit0;
if(minutesX10 & 2)
{
document.getElementById( "m20" ).style.backgroundColor = mbit1;
}
else
document.getElementById( "m20" ).style.backgroundColor = mbit0;
if(minutesX10 & 4)
{
document.getElementById( "m40" ).style.backgroundColor = mbit1;
}
else
document.getElementById( "m40" ).style.backgroundColor = mbit0;
if(minutesX10 & 8)
{
document.getElementById( "m80" ).style.backgroundColor = mbit1;
}
else
document.getElementById( "m80" ).style.backgroundColor = mbit0;
if(hours & 1)
{
document.getElementById( "h1" ).style.backgroundColor = hbit1;
}
else
document.getElementById( "h1" ).style.backgroundColor = hbit0;
if(hours & 2)
{
document.getElementById( "h2" ).style.backgroundColor = hbit1;
}
else
document.getElementById( "h2" ).style.backgroundColor = hbit0;
if(hours & 4)
{
document.getElementById( "h4" ).style.backgroundColor = hbit1;
}
else
document.getElementById( "h4" ).style.backgroundColor = hbit0;
if(hours & 8)
{
document.getElementById( "h8" ).style.backgroundColor = hbit1;
}
else
document.getElementById( "h8" ).style.backgroundColor = hbit0;
newtime = window.setTimeout("UpdateClock();", 1000); // update clock display once per second
}
// End Script "binary_clock.js"
// unhide -->
// Begin Script "binary_clock.js"
var hbit0 = "#000000";
var hbit1 = "#000000";
var mbit0 = "#000000";
var mbit1 = "#000000";
var sbit0 = "#000000";
var sbit1 = "#000000";
var hours = 0;
var minutesX10 = 0;
var minutesX1 = 0;
var secondsX10 = 0;
var secondsX1 = 0;
var meridian = " AM";
function initialize()
{
document.getElementById( "h1" ).readOnly = true; // no writing in display
document.getElementById( "h2" ).readOnly = true;
document.getElementById( "h4" ).readOnly = true;
document.getElementById( "h8" ).readOnly = true;
document.getElementById( "m10" ).readOnly = true;
document.getElementById( "m20" ).readOnly = true;
document.getElementById( "m40" ).readOnly = true;
document.getElementById( "m80" ).readOnly = true;
document.getElementById( "m1" ).readOnly = true;
document.getElementById( "m2" ).readOnly = true;
document.getElementById( "m4" ).readOnly = true;
document.getElementById( "m8" ).readOnly = true;
document.getElementById( "s10" ).readOnly = true;
document.getElementById( "s20" ).readOnly = true;
document.getElementById( "s40" ).readOnly = true;
document.getElementById( "s80" ).readOnly = true;
document.getElementById( "s1" ).readOnly = true;
document.getElementById( "s2" ).readOnly = true;
document.getElementById( "s4" ).readOnly = true;
document.getElementById( "s8" ).readOnly = true;
UpdateClock(); // start clock update routine
}
function UpdateClock() //loop to keep time displays current
{
var now = new Date(); // get current date & time from computer clock
hours = Math.floor(now.getHours());
if( hours > 11 )
{
hbit0 = "#000099"; // select BGR PM colors
hbit1 = "#3366ff";
mbit0 = "#006600";
mbit1 = "#00ff00";
sbit0 = "#990000";
sbit1 = "#ff0000";
meridian = " PM";
}
else
{
hbit0 = "#990000"; // select RGB AM colors
hbit1 = "#ff0000";
mbit0 = "#006600";
mbit1 = "#00ff00";
sbit0 = "#000099";
sbit1 = "#3366ff";
meridian = " AM";
}
if( hours > 12 )
{
hours -= 12; // force 12 hour mode
}
else if( hours == 0 )
{
hours = 12;
}
minutesX10 = Math.floor( now.getMinutes() / 10 );
minutesX1 = Math.floor( now.getMinutes() % 10 ); // mod 10 remainder
secondsX10 = Math.floor( now.getSeconds() / 10 );
secondsX1 = Math.floor( now.getSeconds() % 10 ); // mod 10 remainder
document.getElementById( "time" ).innerHTML = hours + ":" + minutesX10 + minutesX1 + ":" + secondsX10 + secondsX1 + meridian;
if(secondsX1 & 1)
{
document.getElementById( "s1" ).style.backgroundColor = sbit1; // set element colors with bitwise comparisons
}
else
document.getElementById( "s1" ).style.backgroundColor = sbit0;
if(secondsX1 & 2)
{
document.getElementById( "s2" ).style.backgroundColor = sbit1;
}
else
document.getElementById( "s2" ).style.backgroundColor = sbit0;
if(secondsX1 & 4)
{
document.getElementById( "s4" ).style.backgroundColor = sbit1;
}
else
document.getElementById( "s4" ).style.backgroundColor = sbit0;
if(secondsX1 & 8)
{
document.getElementById( "s8" ).style.backgroundColor = sbit1;
}
else
document.getElementById( "s8" ).style.backgroundColor = sbit0;
if(secondsX10 & 1)
{
document.getElementById( "s10" ).style.backgroundColor = sbit1;
}
else
document.getElementById( "s10" ).style.backgroundColor = sbit0;
if(secondsX10 & 2)
{
document.getElementById( "s20" ).style.backgroundColor = sbit1;
}
else
document.getElementById( "s20" ).style.backgroundColor = sbit0;
if(secondsX10 & 4)
{
document.getElementById( "s40" ).style.backgroundColor = sbit1;
}
else
document.getElementById( "s40" ).style.backgroundColor = sbit0;
if(secondsX10 & 8)
{
document.getElementById( "s80" ).style.backgroundColor = sbit1;
}
else
document.getElementById( "s80" ).style.backgroundColor = sbit0;
if(minutesX1 & 1)
{
document.getElementById( "m1" ).style.backgroundColor = mbit1;
}
else
document.getElementById( "m1" ).style.backgroundColor = mbit0;
if(minutesX1 & 2)
{
document.getElementById( "m2" ).style.backgroundColor = mbit1;
}
else
document.getElementById( "m2" ).style.backgroundColor = mbit0;
if(minutesX1 & 4)
{
document.getElementById( "m4" ).style.backgroundColor = mbit1;
}
else
document.getElementById( "m4" ).style.backgroundColor = mbit0;
if(minutesX1 & 8)
{
document.getElementById( "m8" ).style.backgroundColor = mbit1;
}
else
document.getElementById( "m8" ).style.backgroundColor = mbit0;
if(minutesX10 & 1)
{
document.getElementById( "m10" ).style.backgroundColor = mbit1;
}
else
document.getElementById( "m10" ).style.backgroundColor = mbit0;
if(minutesX10 & 2)
{
document.getElementById( "m20" ).style.backgroundColor = mbit1;
}
else
document.getElementById( "m20" ).style.backgroundColor = mbit0;
if(minutesX10 & 4)
{
document.getElementById( "m40" ).style.backgroundColor = mbit1;
}
else
document.getElementById( "m40" ).style.backgroundColor = mbit0;
if(minutesX10 & 8)
{
document.getElementById( "m80" ).style.backgroundColor = mbit1;
}
else
document.getElementById( "m80" ).style.backgroundColor = mbit0;
if(hours & 1)
{
document.getElementById( "h1" ).style.backgroundColor = hbit1;
}
else
document.getElementById( "h1" ).style.backgroundColor = hbit0;
if(hours & 2)
{
document.getElementById( "h2" ).style.backgroundColor = hbit1;
}
else
document.getElementById( "h2" ).style.backgroundColor = hbit0;
if(hours & 4)
{
document.getElementById( "h4" ).style.backgroundColor = hbit1;
}
else
document.getElementById( "h4" ).style.backgroundColor = hbit0;
if(hours & 8)
{
document.getElementById( "h8" ).style.backgroundColor = hbit1;
}
else
document.getElementById( "h8" ).style.backgroundColor = hbit0;
newtime = window.setTimeout("UpdateClock();", 1000); // update clock display once per second
}
// End Script "binary_clock.js"
// unhide -->
/CODE
HTML - binary_clock.html
<!DOCTYPE HTML>
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Description" content="Free Binary Clock Javascript">
<TITLE>Free Binary Clock Javascript</TITLE>
<STYLE type="text/css">
<!--
INPUT{
font-family : Arial;
background-color : #990000;
border : none;
font-weight : bolder;
width : 48px;
height : 48px;
}
TABLE{
font-family : Arial;
color : white;
background-color : normal;
font-size : xx-small;
font-weight : bolder;
}
DIV{
color : #000000;
font-size : x-small;
}
BODY{
background-color : #000000;
font-family : Arial;
font-size : x-small;
font-weight : bolder;
}-->
</STYLE>
<SCRIPT language="JavaScript" src="binary_clock.js"></SCRIPT>
</HEAD>
<BODY onload="initialize()">
<NOSCRIPT><FONT style="font-size:x-small;color:red;">Sorry, your browser does not support JavaScript,</FONT>
<FONT style="font-size:x-small;color:red;">your browser is blocking client-side scripting,</FONT>
<FONT style="font-size:x-small;color:red;">or JavaScript is disabled!</FONT></NOSCRIPT>
<CENTER>
<FORM name="clock">
<TABLE border="0" bgcolor="#000000" style="border-width : 4px 4px 4px 4px;border-style : solid solid solid solid;border-color : black black black black;">
<TR>
<TD colspan="9" align="center">
<TABLE border="0">
<TR>
<TD><INPUT id="h8" type="text"></TD>
<TD><INPUT id="h4" type="text"></TD>
<TD><INPUT id="h2" type="text"></TD>
<TD><INPUT id="h1" type="text"></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD><INPUT id="m80" type="text"></TD>
<TD><INPUT id="m40" type="text"></TD>
<TD><INPUT id="m20" type="text"></TD>
<TD><INPUT id="m10" type="text"></TD>
<TD width="4"></TD>
<TD><INPUT id="m8" type="text"></TD>
<TD><INPUT id="m4" type="text"></TD>
<TD><INPUT id="m2" type="text"></TD>
<TD><INPUT id="m1" type="text"></TD>
</TR>
<TR>
<TD><INPUT id="s80" type="text"></TD>
<TD><INPUT id="s40" type="text"></TD>
<TD><INPUT id="s20" type="text"></TD>
<TD><INPUT id="s10" type="text"></TD>
<TD width="4"></TD>
<TD><INPUT id="s8" type="text"></TD>
<TD><INPUT id="s4" type="text"></TD>
<TD><INPUT id="s2" type="text"></TD>
<TD><INPUT id="s1" type="text"></TD>
</TR>
<TR>
<TD colspan="9" align="center">
<DIV id="time" style="text-align:center;color:yellow;"></DIV>
</TD>
</TR>
</TABLE>
</FORM>
</CENTER>
</BODY>
</HTML>
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Description" content="Free Binary Clock Javascript">
<TITLE>Free Binary Clock Javascript</TITLE>
<STYLE type="text/css">
<!--
INPUT{
font-family : Arial;
background-color : #990000;
border : none;
font-weight : bolder;
width : 48px;
height : 48px;
}
TABLE{
font-family : Arial;
color : white;
background-color : normal;
font-size : xx-small;
font-weight : bolder;
}
DIV{
color : #000000;
font-size : x-small;
}
BODY{
background-color : #000000;
font-family : Arial;
font-size : x-small;
font-weight : bolder;
}-->
</STYLE>
<SCRIPT language="JavaScript" src="binary_clock.js"></SCRIPT>
</HEAD>
<BODY onload="initialize()">
<NOSCRIPT><FONT style="font-size:x-small;color:red;">Sorry, your browser does not support JavaScript,</FONT>
<FONT style="font-size:x-small;color:red;">your browser is blocking client-side scripting,</FONT>
<FONT style="font-size:x-small;color:red;">or JavaScript is disabled!</FONT></NOSCRIPT>
<CENTER>
<FORM name="clock">
<TABLE border="0" bgcolor="#000000" style="border-width : 4px 4px 4px 4px;border-style : solid solid solid solid;border-color : black black black black;">
<TR>
<TD colspan="9" align="center">
<TABLE border="0">
<TR>
<TD><INPUT id="h8" type="text"></TD>
<TD><INPUT id="h4" type="text"></TD>
<TD><INPUT id="h2" type="text"></TD>
<TD><INPUT id="h1" type="text"></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD><INPUT id="m80" type="text"></TD>
<TD><INPUT id="m40" type="text"></TD>
<TD><INPUT id="m20" type="text"></TD>
<TD><INPUT id="m10" type="text"></TD>
<TD width="4"></TD>
<TD><INPUT id="m8" type="text"></TD>
<TD><INPUT id="m4" type="text"></TD>
<TD><INPUT id="m2" type="text"></TD>
<TD><INPUT id="m1" type="text"></TD>
</TR>
<TR>
<TD><INPUT id="s80" type="text"></TD>
<TD><INPUT id="s40" type="text"></TD>
<TD><INPUT id="s20" type="text"></TD>
<TD><INPUT id="s10" type="text"></TD>
<TD width="4"></TD>
<TD><INPUT id="s8" type="text"></TD>
<TD><INPUT id="s4" type="text"></TD>
<TD><INPUT id="s2" type="text"></TD>
<TD><INPUT id="s1" type="text"></TD>
</TR>
<TR>
<TD colspan="9" align="center">
<DIV id="time" style="text-align:center;color:yellow;"></DIV>
</TD>
</TR>
</TABLE>
</FORM>
</CENTER>
</BODY>
</HTML>
/HTML
License: This javascript is FREEWARE, use it at your own risk. If you like
it, please don't hesitate to share it with your friends or to modify it
to suit your needs. All I ask is that it be distributed FREE of cost to
help others to learn Javascript. If you want, you can pay me back by sending
your help or comments about the script.
In no event will Web Designs By IndigoTide be liable to any party for any direct, indirect, special or other consequential damages for any use of this free software, including, without limitation, any lost profits, business interruption, loss of programs or other data, loss of images or web pages, loss of printed or electronic media, or otherwise, even if we are expressly advised of the possibility of such damages. This program is provided "As-Is" without warranty of any kind, either express or implied, including, but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement. Any use of this software indicates your full acceptance of all terms and conditions of this software license.
In no event will Web Designs By IndigoTide be liable to any party for any direct, indirect, special or other consequential damages for any use of this free software, including, without limitation, any lost profits, business interruption, loss of programs or other data, loss of images or web pages, loss of printed or electronic media, or otherwise, even if we are expressly advised of the possibility of such damages. This program is provided "As-Is" without warranty of any kind, either express or implied, including, but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement. Any use of this software indicates your full acceptance of all terms and conditions of this software license.
