JS realizes thermometer time style code sharing _javascript skills

This is based on JS to achieve a thermometer time style code, and we have seen the date display is not the same, very creative, sharing to learn and learn

Run Effects chart:----------------------View Effects-----------------------

Tip: If you are not running properly in your browser, you can try switching browsing mode.
For everyone to share the JavaScript implementation thermometer time style code is as follows

<title> Thermometer design time </title> <script language=javascript> var cellwidth=10; Each "CELL" WIDTH in PIXELS var cellheight=10; Each "CELL" HEIGHT in PIXELS var fontsize=11; The FONT SIZE of the NUMBERS.
SETTING This TOO big causes undesired effects. var fontcolor= "080080"; ENTER any HTML or RGB COLOR CODE var fontstyle= "bold"; ENTER either BOLD, italics, NONE var oncolor= "Red"; COLOR of ACTIVE CELLS var offcolor= "Lightgrey"; COLOR of INACTIVE CELLS var NS4 = (navigator.appName.indexOf ("Netscape") >=0 && parsefloat (navigator.appver Sion) >= 4 && parsefloat (navigator.appversion) < 5)?
True:false; var IE4 = (document.all)?
True:false; var NS6 = (parsefloat (navigator.appversion) >= 5 && navigator.appName.indexOf ("Netscape") >=0)?
True:false;
var binclk, now;
var t= ' <table cellspacing= "1" cellpadding= "0" border= "0" ><tr><td align= "center" > </td>; for (i=0;i<=58;i+=2) t+= ' <td align= ' left ' colsPan= "2" ><font style= "font-size: ' +fontsize+ ' px; Font-weight: ' +fontstyle+ ';
Color: ' +fontcolor+ ' > ' +i+ ' <br> |</font></td> '; t+= ' <td> </td></tr><tr><td align= "center" ><font style= "font-size: ' +fontsize+ ' px; Font-weight: ' +fontstyle+ ';
Color: ' +fontcolor+ ' "> Time: </font></td>"; for (i=0;i<=23;i++) {t+= ' <td> '; t+= (NS4)? "<ilayer name=" hrs ' +i+ ' "height=" ' +cellheight+ ' "width=" ' +cellwidth+ ' "bgcolor=" ' +offcolor+ ' "></ilayer" > ': ' <div id= ' hrs ' +i+ ' style= ' position:relative; Width: ' +cellwidth+ ' px; font-size:1px; Height: ' +cellheight+ ' px;
Background-color: ' +offcolor+ ' "></div>";
t+= ' </td> '; } t+= ' <td colspan= "><td> </td></tr><tr><td align=" center "><font style=" Font-size: ' +fontsize+ ' px; Font-weight: ' +fontstyle+ ';
Color: ' +fontcolor+ ' ">: </font></td>"; for (i=0;i<=59;i++) {t+= ' <td> '; t+= (NS4)? ' <ilayer name= ' min ' +i+ ' "width="+cellwidth+ ' "height=" ' +cellheight+ ' "bgcolor=" ' +offcolor+ ' "></ilayer>": ' <div id= ' min ' +i+ ' "style=" position:relative; Width: ' +cellwidth+ ' px; font-size:1px; Height: ' +cellheight+ ' px;
Background-color: ' +offcolor+ ' "></div>";
t+= ' </td> '; } t+= ' <td> </td></tr><tr><td align= ' center ' ><font style= ' font-size: ' +fontsize+ ' px ; Font-weight: ' +fontstyle+ ';
Color: ' +fontcolor+ ' "> Sec: </font></td>"; for (i=0;i<=59;i++) {t+= ' <td> '; t+= (NS4)? ' <ilayer name= ' sec ' +i+ ' width= ' +cellwidth+ ' ' height= ' ' +cellheight+ ' ' bgcolor= ' +offcolor+ > ': ' <div id= ' sec ' +i+ ' style= ' position:relative; Width: ' +cellwidth+ ' px; font-size:1px; Height: ' +cellheight+ ' px;
Background-color: ' +offcolor+ ' "></div>";
t+= ' </td> ';
} t+= ' <td> </td></tr><tr><td> </td><td> </td> '; for (i=1;i<=59;i+=2) t+= ' <td align= "left" colspan= "2" ><font style= "font-size: ' +fontsiZe+ ' px; Font-weight: ' +fontstyle+ ';
Color: ' +fontcolor+ ' > |<br> ' +i+ ' </font></td> ';
t+= ' </tr></table> ';
document.write (t); function init () {getvals (); for (i=0;i<=now.h;i++) setbgcolor (' hrs ' +i, Oncolor); for (i=0;i<=now.m;i++)
Setbgcolor (' min ' +i, oncolor);
for (i=0;i<=now.s;i++) Setbgcolor (' sec ' +i, oncolor);
SetInterval (' Setclock () ', 100); function Getvals () {now=new Date (); Now.s=now.getseconds (); now.h=now.gethours (); Now.m=now.getminutes ();} function Setclock () {getvals (), if (now.h==0) && (now.m==0) for (i=1;i<=23;i++) setbgcolor (' hrs ' +i, Offcolor); if (
now.s==0) && (now.m==0)) for (i=1;i<=59;i++) setbgcolor (' min ' +i, offcolor);
if (now.s==0) for (i=1;i<=59;i++) Setbgcolor (' sec ' +i, offcolor);
Setbgcolor (' hrs ' +now.h, Oncolor);
Setbgcolor (' min ' +now.m, oncolor);
Setbgcolor (' sec ' +now.s, oncolor); The function resize () {if (NS4) history.go (0);} function Setbgcolor (idstr, color) {if (IE4) document.all[idstr].
Style.backgroundcolor=color; IfNS4) Document.layers[idstr].bgcolor=color;
if (NS6) document.getElementById (IDSTR). Style.backgroundcolor=color;
} Window.onload=init;
Window.onresize=resize; 
 </SCRIPT>

The above is for everyone to share the JavaScript implementation thermometer time style code, I hope you can enjoy.