How to Make an Analog Clock for Your Website

First you will need to make sure you have Java installed on your computer. If you don't you can download it from http://www.java.sun.com.

1. Open a text editor. Any simple editor will work, Notepad, TextEdit, whatever. Just make sure when you save, to save it as Plain Text, not Rich Text Format. Save this file as "Clock.java" on your Desktop in a folder called "Clock".

2. Let's set up an applet. For this tutorial, we will use a JApplet, from Java's Swing library. Type the following code into your text editor (new additions will appear in bold):

import javax.swing.JApplet;

public class Clock extends JApplet {

public void init() {

}
}

3. That’s all we need to create a “bare bones” applet. The import statement at the top tells Java that we will need the JApplet class from the javax.swing library. The next line creates a new Class called Clock, which will be a JApplet (a program that is run within a browser window). The init() method is what the program will do when the program is started.

Now let’s set this applet up with a Thread. A Thread is a way to perform a set of actions over and over without freezing the rest of the program (in this case, updating the time).

import javax.swing.JApplet;
import java.awt.*;

public class Clock extends JApplet implements Runnable {
public void init() {

}

public void run() {
while (true) {
try {
Thread.sleep(1000);
} catch (Exception e) {
}
}
}
}

4. Let’s look at this code. First we imported the java.awt package (the .* extension tell the program to include all of the classes in the library). Next we added “implements Runnable” to the class declaration, which means that the class will be running a Thread.

The next section is the run method. When a Thread is started, this method will be executed. Right now, our run method will loop until the program is exited (while true is equal to true) and each time through the loop it will pause the Thread for 1 second (1000 milliseconds).

Now we should set up a Thread. I called my Thread “counter”, but you can name it whatever you want. These commands are fairly self-explanatory.

import javax.swing.JApplet;
import java.awt.*;

public class Clock extends JApplet implements Runnable {
Thread counter = new Thread(this);

public void init() {
counter.start();
}

public void run() {
while (true) {
try {
Thread.sleep(1000);
} catch (Exception e) {
}
}
}
}

5. Now we can get to the actual point of our program, to tell time. First we’ll get the GregorianCalendar class and use it to find out the current time in EST. I added variables to the program for hours, minutes, and seconds, to be stored as integers, which are called “int” in Java. Finally, in our while loop, we will add a long section to increment the time variables. If you don’t understand this section it’s OK for now.

import javax.swing.JApplet;
import java.awt.*;
import java.util.*;

public class Clock extends JApplet implements Runnable {
int hours, minutes, seconds;
Thread counter = new Thread(this);

public void init() {
Calendar calendar = new GregorianCalendar(TimeZone.getTimeZone("EST"));
hours = calendar.get(Calendar.HOUR);
minutes = calendar.get(Calendar.MINUTE);
seconds = calendar.get(Calendar.SECOND);
counter.start();
}

public void run() {
while (true) {
if (seconds < 60)
seconds++;
else {
seconds = 0;
if (minutes < 60)
minutes++;
else {
minutes = 0;
if (hours < 12)
hours++;
else
hours = 1;
}
}
repaint();
try {
Thread.sleep(1000);
} catch (Exception e) {
}
}
}
}
6. Now we have our time program essentially all done. All that needs to be done now is to draw the clock itself. Go to the bottom of your text file and just above the final ‘}’, type in this code:

public void paint(Graphics g) {
Graphics2D g2 = (Graphics2D) g;
g2.setColor(Color.white);
g2.fillRect(0, 0, getWidth(), getHeight());
g2.setColor(Color.darkGray);
g2.fillOval(0, 0, getWidth(), getHeight());
g2.setColor(Color.black);
for (int i = 1; i <= 12; i++) {
g.drawString("" + i, getWidth() / 2 + (int)(Math.cos(i * (Math.PI / 6) - Math.PI / 2) * (getWidth() / 2 - 15)), getHeight() / 2 + (int)(Math.sin(i * (Math.PI / 6) - Math.PI / 2) * (getHeight() / 2 - 15)));
}
int radius = getWidth() / 2 - 10;
double divideBy = (30 / Math.PI);
g2.drawLine(getWidth() / 2 + (int)(Math.cos(seconds / divideBy - Math.PI / 2) * radius), getHeight() / 2 + (int)(Math.sin(seconds / divideBy - Math.PI / 2) * radius), getWidth() / 2, getHeight() / 2);
BasicStroke stroke = new BasicStroke(4);
g2.setStroke(stroke);
radius = getWidth() / 2 - 50;
g2.drawLine(getWidth() / 2 + (int)(Math.cos(minutes / divideBy - Math.PI / 2) * radius), getHeight() / 2 + (int)(Math.sin(minutes / divideBy - Math.PI / 2) * radius), getWidth() / 2, getHeight() / 2);
stroke = new BasicStroke(8);
g2.setStroke(stroke);
divideBy = (6 / Math.PI);
radius = getWidth() / 2 - 80;
g2.drawLine(getWidth() / 2 + (int)(Math.cos(hours / divideBy - Math.PI / 2) * radius), getHeight() / 2 + (int)(Math.sin(hours / divideBy - Math.PI / 2) * radius), getWidth() / 2, getHeight() / 2);
g2.fillOval(getWidth() / 2 - 10, getHeight() / 2 - 10, 20, 20);
g2.drawOval(0, 0, getWidth(), getHeight());
}

Now you need to compile the program. Open your command line (Command Prompt on Windows, Terminal on Mac). Type "cd Desktop/Clock" and hit enter. Note, this is the Mac command; if you are using Windows, switch the '/' to a ''. Next type "javac Clock.java". If your code is copied correctly, it will just go back to prompting for input and there will be a new file in the folder called "Clock.class". Now upload this .class file to wherever your website is, and to embed it in one of your pages, use this code:

There you go. You have a clock applet for your site!