Javascript Clock Program by John A. Matheson © John Matheson 2021

$AMERICA76 / $SOL

Scoop the code from the box below...

<html>
<head>
<title>Javascript Clock Program by John A. Matheson © John Matheson 2021</title>

<style>
body {
  font-family: times;
  text-align: center;
}
</style>

function getsin(degree)
{
 return(Math.sin(degree * Math.PI / 180).toFixed(4));
}

function putblob(blobsize,shift,radius,degree)
{
 var strokewidth = (blobsize/10).toFixed(4);

const x = (shift + (radius * getcos(degree))).toFixed(4);
 const y = (shift + (radius * getsin(degree))).toFixed(4);
 const text = "<circle cx= \"" + x +
 "\" cy= \"" + y + "\" " + "r = \"" + blobsize +
 "\" stroke = \"black\" " + "stroke-width=\"" + strokewidth +
 "\" fill = \"black\"/>\n";
 return(text);
}

function putline(linewid, shift, inner, ring, degree)
{
 return genline(linewid, shift, inner, ring, degree, "#000000");
}

function genline(linewid, shift, inner, ring, degree, color)
{
 const x1 = shift + (inner * getcos(degree));
 const y1 = shift + (inner * getsin(degree));
 const x2 = shift + (ring * getcos(degree));
 const y2 = shift + (ring * getsin(degree));
 const text =
 "<line x1=\"" + x1 + "\" y1=\"" + y1 + "\" x2=\"" +
 x2 + "\" y2=\"" + y2 + "\" " +
 "stroke=\"" + color + "\" stroke-width=\"" + linewid + "\" />\n";
 return(text);
}

function makeframe(dim,ifmiddle,hhdeg,mmdeg,ssdeg)
{
 const centre = dim/2;
 const outer = dim * 0.98/2;
 const middle = dim * 0.87/2;
 const inner = dim * 0.65/2;
 const hhlength = dim * 0.4/2;
 const mmlength = inner;
 const sslength = inner;
 const ring = dim * 0.05/2;
 const strokewidth = dim * 0.005;
 blobsize = dim * 0.01;
 linewid = dim * 0.0075;
 var text = "";
 text += "<circle cx=\"" + centre + "\" cy=\"" + centre + "\" " +
 "r=\"" + outer + "\" stroke=\"#000000\" stroke-width=\"" +
 (strokewidth * 3) + "\" fill=\"none\" />\n";

text += "<circle cx=\"" + centre + "\" cy=\"" + centre + "\" " +
 "r=\"" + ring + "\" stroke=\"#000000\" stroke-width=\"" +
 (strokewidth * 2)  + "\" fill=\"none\" />\n";

if(ifmiddle == 1)
 {
  text += "<circle cx=\"" + centre + "\" cy=\"" + centre + "\" " +
  "r=\"" + middle + "\" stroke=\"#000000\" stroke-width=\"" +
  strokewidth + "\" fill=\"none\" />\n";
 }
  text += "<circle cx=\"" + centre + "\" cy=\"" + centre + "\" " +
  "r=\"" + inner + "\" stroke=\"#000000\" stroke-width=\"" +
  strokewidth + "\" fill=\"none\" />\n";

var ii;
 for(ii = 0; ii < 12; ii++)
 {
  text += putblob(blobsize, dim/2, inner, ii * 30);
  text += putline(linewid, dim/2, inner, outer, 15 + (ii * 30));
 }
 text += genline(linewid, dim/2, ring, sslength, ssdeg, "red");
 text += genline(linewid * 2, dim/2, ring, mmlength, mmdeg, "blue");
 text += genline(linewid * 3, dim/2, ring, hhlength, hhdeg, "black");
 return(text);
}

function putfigure(dim,xdim,ydim,boxsize,fsize,figure)
{
 var text = "";
 text += "<text x=\"" + xdim/500 * dim + "\" " +
               "y=\"" + ydim/500 * dim + "\" " +
 "height=\"" + boxsize / 500 * dim + "\" " +
 "width=\"" + boxsize / 500 * dim + "\" " +
 "font-size=\"" + fsize / 500 * dim + "\" " +
 "font-weight=\"bold\" fill=\"black\">" + figure +
 "</text>";
 return(text);
}

function littleclocknumbers(dim)
{
 var text = "";
 text += putfigure(dim,237,28,30,25,"12");
 text += putfigure(dim,355,57,30,25,"1");
 text += putfigure(dim,445,146,30,25,"2");
 text += putfigure(dim,473,257,30,25,"3");
 text += putfigure(dim,443,373,30,25,"4");
 text += putfigure(dim,356,459,30,25,"5");
 text += putfigure(dim,243,488,30,25,"6");
 text += putfigure(dim,132,461,30,25,"7");
 text += putfigure(dim,45,377,30,25,"8");
 text += putfigure(dim,14,260,30,25,"9");
 text += putfigure(dim,39,145,30,20,"10");
 text += putfigure(dim,129,56,30,21,"11");

return(text);
}

function bigclocknumbers(dim)
{
 var text = "";
 text += putfigure(dim,215,72,80,70,"12");
 text += putfigure(dim,334,96,80,70,"1");
 text += putfigure(dim,410,170,80,70,"2");
 text += putfigure(dim,436,274,80,70,"3");
 text += putfigure(dim,405,376,80,70,"4");
 text += putfigure(dim,333,453,80,70,"5");
 text += putfigure(dim,230,478,80,70,"6");
 text += putfigure(dim,128,453,80,70,"7");
 text += putfigure(dim,57,376,80,70,"8");
 text += putfigure(dim,30,274,80,70,"9");
 text += putfigure(dim,41,170,80,65,"10");
 text += putfigure(dim,120,94,80,70,"11");
 return(text);

}
/*
The value of dim is the diameter of the clock. It is contained in a
<div>. This can be contained in something else.

var dim = 400;
</script>
</head>
<body>

<div id="clock" onload="currentTime();"></div>

hh = (hh < 10) ? "0" + hh : hh;
   mm = (mm < 10) ? "0" + mm : mm;
   ss = (ss < 10) ? "0" + ss : ss;

let time = hh + ":" + mm + ":" + ss;
   let timedegs = "s: " + ssdeg + "° m: " +
   mmdeg.toFixed(1) + "° h: " + hhdeg.toFixed(1) + "°";
  var stuff = "";
  stuff += "<svg width=\"" + dim + "\" height=\"" + (dim*1.5) + "\">\n";
  stuff += makeframe(dim,0,hhdeg,mmdeg,ssdeg);
  stuff += bigclocknumbers(dim);

/*
comment out ONLY the following two lines of code to just have the clock

stuff += putfigure(dim,118,560,400,70,time);
  stuff += putfigure(dim,50,620,400,40,timedegs);
*/
  stuff += "</svg>\n";
  document.getElementById("clock").innerHTML = stuff;
  let t = setTimeout(function(){ currentTime() }, 1000);
}
currentTime();

</script>

</body>
</html>

HOME
NEWS
ABOUT US
TRADING SIMULATOR
BOOK AND BANK
TWO PILES TRADING
MULTIPLE TRADES
DIGITAL CLOCK CODE
POLICY
WARNING