Free Online Time Clock - Record Your Project or Client Hours

Use our free online time clock to keep track of your time. You can create different time logs for different jobs and save your recorded times for your next session. Your time logs will remain recorded here until you delete your browser cookies, or remain forever if you register with a password in the box on the left. After registering you may also email a copy of your time logs to yourself! Either way, the timer will keep running even when your browser is closed.

• Do you want to invoice clients for the exact time spent on their job?
• Do you need staff, employees or contractors to clock on and off online via the internet?
• Have you ever wanted to know how much time you spend doing homework or chores?

Professionals use our free online time clock to track their time spent with clients or on specific jobs. Web developers, graphic designers, architects, solicitors and other service professionals must be experts at time management, and a digital record of time spent is the first step to being better organised. Read more about time management for ideas on making better use of your time.

Automated solutions for time management allow you to solve multiple problems at once. For job costing that connects directly to your accounting software or to manage a small or large number of employees and automate payroll based on recorded times, then use our time clocks selection wizard to find whats right for you. We are more than happy to talk through your needs and help you find a time clock that will both manage your time and assist you to charge for your time accurately and easily.

This online time clock was built as an example project of the three classic web development tools: PHP, MySql and Javascript. It combines some graphic ingenuity which both simplifies and enhances the user experience.

Visitor id's are created randomly and stored locally via PHP cookies, after which they can be retrieved and connected to existing MySql records even if the visitor has not logged in, as long as cookies have not been deleted. Log in details are also recorded in MySql database records. The random id key means security for user data - so log times cannot be deleted or altered via unauthorised users.

The timer is a simple Javascript interval run every second. Increasing the efficiency and accuracy of this method, the digits you see on the clock face are actually HTML characters, not images. This also provides the lightest possible loading time for the online time clock.

The animation of the time clock number fipping over is a carefully constructed PNG image with a semi-transparent top section (the start of the perceived flip motion), and a fully blacked bottom section (the end of the perceived flip motion). The mid sections are intentionally ambiguous top pieces of a white digit, meaning that the same flip image could be used for any digit of the clock face. The fact that all four phases of the percieved flip motion are contained in the one image means the same image is used and no actual animation is necessary. This is controlled by a simple Javascript timeout setting the PNG to appear for around 80 milliseconds. The perception is a very quick number flip at precisely the same time the HTML digit is replaced with the new one.

This is the single image used to give the impression of the time clock number flipping over: