...

View Full Version : JsDE Clock



Omega9850
05-25-2012, 02:49 PM
I decided to program a clock to work with the Javascript Date Engine (JsDE). Below is the code of what I came up with...


<!DOCTYPE HTML>
<html>
<head>
<title>JsDE Analog Clock</title>
<style>
#Canvas{
background: #292929;
border-color: #FFFFFF;
border-width: 2px;
border-style: dashed;
}
</style>
<script type="text/javascript">
function jsdeclock()
{
var fdate=new Date();
var mhours=fdate.getHours();
var minutes=fdate.getMinutes();
var seconds=fdate.getSeconds();
var milliseconds=fdate.getMilliseconds();

if (mhours === 0)
{
var meridiem="AM";
var hours=mhours + 12;
}
if (mhours >= 1 && mhours <= 11)
{
var meridiem="AM";
var hours=mhours;
}
if (mhours == 12)
{
var meridiem="PM";
var hours=mhours;
}
if (mhours >= 13 && mhours <= 23)
{
var meridiem="PM";
var hours=mhours - 12;
}

var canvas=document.getElementById("Canvas");
var context=canvas.getContext("2d");

context.clearRect (0, 0, 500, 250);

context.beginPath(); //The next 5 lines of code render the Hour Arc
context.arc(150, 125, 75, 1.5 * Math.PI, ((((hours*(25/3))/50)+1.5) + ((minutes*(1/720)))) * Math.PI, false);
context.lineWidth=16;
context.strokeStyle="#999999";
context.stroke();

context.beginPath(); //The next 5 lines of code render the Minute Arc
context.arc(150, 125, 59, 1.5 * Math.PI, ((((minutes*(5/3))/50)+1.5) + ((seconds*(1/1800)))) * Math.PI, false);
context.lineWidth=16;
context.strokeStyle="#CCCCCC";
context.stroke();

context.beginPath(); //The next 5 lines of code render the Second Arc
context.arc(150, 125, 43, 1.5 * Math.PI, ((((seconds*(5/3))/50)+1.5) + ((milliseconds*(1/30000)))) * Math.PI, false);
context.lineWidth=16;
context.strokeStyle="#000000";
context.stroke();

context.shadowOffsetX=0; //The next 4 lines of code render the Shadow
context.shadowOffsetY=0;
context.shadowBlur=5;
context.shadowColor="rgba(108,151,255,1)";

context.font = "20pt Calibri"; //The next 3 lines of code render the Time Text
context.fillStyle = "#CCCCCC";
context.fillText(hours + ":" + minutes + ":" + seconds + " " + meridiem, 300, 125);

setTimeout(jsdeclock,25);
}
</script>
</head>
<body onload="jsdeclock()">
<canvas id="Canvas" width="500" height="250"></canvas>
</body>
</html>


It's a little different from other clocks as it uses Arcs instead of Hands. The thing to take note is that you don't need Javascript Date Engine to run this clock. It is a stand-alone code (I thought it would be more convenient that way). Because the Clock runs within a function, it won't mess up if you are already using Javascript Date Engine; the vars are local.
The clock is fairly easy to customize. I was able to make it look like Captain America's shield. It refreshes itself each 25th millisecond so you'll be getting ~40FPS.

Because it uses Canvas, you're going to need a modern browser. It seems to work on Mozilla Firefox, Google Chrome, Opera, Apple Safari, and even IE9.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum