Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1

Thread: JsDE Clock

  1. #1
    New Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile JsDE Clock

    I decided to program a clock to work with the Javascript Date Engine (JsDE). Below is the code of what I came up with...

    Code:
    <!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.
    Attached Thumbnails Attached Thumbnails JsDE Clock-clock.png  


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •