Click here to Skip to main content
13,353,322 members (63,100 online)
Click here to Skip to main content
Add your own
alternative version


19 bookmarked
Posted 5 Jul 2007

Digital Clock using Silverlight and JavaScript

, 5 Jul 2007
Rate this:
Please Sign up or sign in to vote.
Digital Clock using Silverlight and JavaScript
Screenshot - DigiClock.gif


This article will explain how we can use Silverlight using JavaScript.


This digital clock has been developed using Silverlight and JavaScript. We have four different files here. The XAML file will have code to display the numbers using different shapes like rectangle and polygon. If you know VML, then this XAML file will have the same syntax.

Using the Code

Here, we will see a different file separately. Before you start using Silverlight, you have to download the Silverlight Plugin.

1. DigiClock.htm

This file will be executed by the browser to show the digital clock. First, add the JavaScript references to this page. Then, declare a container where the Silverlight control will be loaded. Below this, get the Container object and call the function createMySilverlightDigiClock();

<script src="Silverlight.js"></script>
<script src="my-script.js"></script>
<!-- Container-->
<div id="DigiClock">
<script type="text/javascript">
// Create Container Object.
var parentElement = document.getElementById("DigiClock");
// This function creates the Silverlight control.

2. Silverlight.js

This file has to be downloaded from the Internet. This file will contain the methods to create a Silverlight control and other helper methods.

3. My-Script.js

This file will contain my custom JavaScript functions to show the digital display.

  • createMySilverlightDigiClock() - This method will be called from the DigiClock.htm file which will create a Silverlight control, where you have to specify the XAML file name, your container name, width and height of the Silverlight control.
  • ShowNumber(sender,num,strTime) - This method will show the number in the display depending on the parameters passed.
    • sender - Silverlight control object
    • num - Number to show in the display
    • strTime - Variable containing the place where this number has to be shown on the display board
  • OnLoad() - This method will be called on load of the page where the Silverlight control will be stored in a global variable called Canvas and ClearDisplay() will be called to clear the previously displayed number. Then, call the ShowCurrentTime() to show the present time in the display.
  • ClearDisplay() - This method will clear the number in the display. This is done by changing the Opacity of the Polygon. This property (Opacity) will take the value from 0 to 1. where 0 will not show the object and 1 will show the object with full color.
  • ShowCurrentTime() - This method will be used to update the display with the current time. Current time will be taken using the JavaScript and it will update the display with the current time and this function will be called at regular intervals to update the display.

4. digiclock.xaml

This file is the most important file where you have to define all the shapes you are going to use in your application. Here, I have created a single digit with seven polygons and each polygon's Opacity will be changed depending on the time.

Note: I have also added my name at the bottom using PolyLine and Path Elements.

Points of Interest

I am working with .NET for the past 4 years. My areas of interest include .NET, AJAX and other new upcoming technologies.


  • 5th July, 2007: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Web Developer
India India
I am working as a Senior Associate.

You may also be interested in...


Comments and Discussions

GeneralMy vote of 4 Pin
Jack_32124-Dec-11 1:44
memberJack_32124-Dec-11 1:44 
I find the code really helpful for those who wants to build silver light based enterprise app with help traditional java script.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.180111.1 | Last Updated 5 Jul 2007
Article Copyright 2007 by Anandraj
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid