A simple javascript timer (using Web Workers in HTML5)
A Web Worker is a JavaScript that runs in the background without affecting the performance of the page you are visiting. In this post, we will show how to implement a simple timer, using Web Workers in HTML5. Without any further introduction, let's jump in the code. The results (and the source code) can be seen at frenetic.be/tricks/simple-timer.php
Let's start with a standard HTML5 document:
Let's add a title and a few css definitions to make it all look good:
// Should the timer start or not (has it been started already?)
Check out frenetic.be/tricks/simple-timer.php to see it in action. Enjoy!!!
Let's start with a standard HTML5 document:
<!DOCTYPE html>
<html lang="en">
Let's add a title and a few css definitions to make it all look good:
<head>
<meta charset="utf-8" />
<title>Timer</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,300,400' rel='stylesheet' type='text/css'>
<style type="text/css">
.header
{
width:280px;
margin-left:auto;
margin-right: auto;
margin-top: 50px;
font-family: 'Open Sans', sans-serif, Palatino;
font-size: 24px;
font-weight: 300;
text-align: left;
text-decoration: none;
letter-spacing: 1px;
color: gray;
}
.timer
{
width:200px;
margin-left:auto;
margin-right: auto;
margin-top: 10px;
padding: 40px;
border:1px dotted gray;
font-family: 'Open Sans', sans-serif, Palatino;
font-size: 32px;
font-weight: 300;
text-align: center;
text-decoration: none;
letter-spacing: 1px;
color: gray;
}
.buttons
{
width:280px;
margin-left:auto;
margin-right: auto;
margin-top: 20px;
}
button
{
width:100px;
font-family: 'Open Sans', sans-serif, Palatino;
font-size: 18px;
font-weight: 300;
text-align: center;
text-decoration: none;
letter-spacing: 1px;
color: gray;
}
#button1
{
float:left;
margin-left: 25px;
}
#button2
{
float:right;
margin-right:25px;
}
</style>
</head>
The body of the page is simple: a title, the timer, a start and a stop button:
<body>
<div class="header">A simple timer:</div>
<div class="timer" id="timer">00:00</div>
<div class="buttons">
<button onclick="startTimer()" id="button1">Start</button>
<button onclick="stopTimer()" id = "button2">Stop</button>
</div>
</body>
And then let's create the Web Worker:
<script>
var w = null;
// initialize variable
// function to start the timer
function startTimer()
{
// First check whether Web Workers are supported if (typeof(Worker)!=="undefined"){
// Check whether Web Worker has been created. If not, create a new Web Worker based on the Javascript file simpletimer.js if (w==null){
w = new Worker("simpletimer.js");
}
// Update timer div with output from Web Worker w.onmessage = function (event) {
document.getElementById("timer").innerHTML = event.data;
};
} else {
// Web workers are not supported by your browser document.getElementById("timer").innerHTML = "Sorry, your browser does not support Web Workers ...";
}
}
// function to stop the timer
function stopTimer()
{
w.terminate();
timerStart = true;
w = null;
}
</script>
</html>
Finally, one piece is missing: the script run by the Web Worker. In this case, 'simpletimer.js':
var timerStart = true;
function myTimer(d0)
{
// get current time
var d=(new Date()).valueOf();
// calculate time difference between now and initial time
var diff = d-d0;
// calculate number of minutes
var minutes = Math.floor(diff/1000/60);
// calculate number of seconds
var seconds = Math.floor(diff/1000)-minutes*60;
var myVar = null;
// if number of minutes less than 10, add a leading "0"
minutes = minutes.toString();
if (minutes.length == 1){
minutes = "0"+minutes;
}
// if number of seconds less than 10, add a leading "0"
seconds = seconds.toString();
if (seconds.length == 1){
seconds = "0"+seconds;
}
// return output to Web Worker
postMessage(minutes+":"+seconds);
}
if (timerStart){
// get current time
var d0=(new Date()).valueOf();
// repeat myTimer(d0) every 100 ms
myVar=setInterval(function(){myTimer(d0)},100);
// timer should not start anymore since it has been started
timerStart = false;
}
In summary, there should be two files:
1) simpletimer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Timer</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,300,400' rel='stylesheet' type='text/css'>
<style type="text/css">
.header
{
width:280px;
margin-left:auto;
margin-right: auto;
margin-top: 50px;
font-family: 'Open Sans', sans-serif, Palatino;
font-size: 24px;
font-weight: 300;
text-align: left;
text-decoration: none;
letter-spacing: 1px;
color: gray;
}
.timer
{
width:200px;
margin-left:auto;
margin-right: auto;
margin-top: 10px;
padding: 40px;
border:1px dotted gray;
font-family: 'Open Sans', sans-serif, Palatino;
font-size: 32px;
font-weight: 300;
text-align: center;
text-decoration: none;
letter-spacing: 1px;
color: gray;
}
.buttons
{
width:280px;
margin-left:auto;
margin-right: auto;
margin-top: 20px;
}
button
{
width:100px;
font-family: 'Open Sans', sans-serif, Palatino;
font-size: 18px;
font-weight: 300;
text-align: center;
text-decoration: none;
letter-spacing: 1px;
color: gray;
}
#button1
{
float:left;
margin-left: 25px;
}
#button2
{
float:right;
margin-right:25px;
}
</style>
</head>
<body>
<div class="header">A simple timer:</div>
<div class="timer" id="timer">00:00</div>
<div class="buttons">
<button onclick="startTimer()" id="button1">Start</button>
<button onclick="stopTimer()" id = "button2">Stop</button>
</div>
</body>
<script>
var w = null; // initialize variable
// function to start the timer
function startTimer()
{
// First check whether Web Workers are supported
if (typeof(Worker)!=="undefined"){
// Check whether Web Worker has been created. If not, create a new Web Worker based on the Javascript file simpletimer.js
if (w==null){
w = new Worker("simpletimer.js");
}
// Update timer div with output from Web Worker
w.onmessage = function (event) {
document.getElementById("timer").innerHTML = event.data;
};
} else {
// Web workers are not supported by your browser
document.getElementById("timer").innerHTML = "Sorry, your browser does not support Web Workers ...";
}
}
// function to stop the timer
function stopTimer()
{
w.terminate();
timerStart = true;
w = null;
}
</script>
</html>
2) simpletimer.js
// Should the timer start or not (has it been started already?)
var timerStart = true;
function myTimer(d0)
{
// get current time
var d=(new Date()).valueOf();
// calculate time difference between now and initial time
var diff = d-d0;
// calculate number of minutes
var minutes = Math.floor(diff/1000/60);
// calculate number of seconds
var seconds = Math.floor(diff/1000)-minutes*60;
var myVar = null;
// if number of minutes less than 10, add a leading "0"
minutes = minutes.toString();
if (minutes.length == 1){
minutes = "0"+minutes;
}
// if number of seconds less than 10, add a leading "0"
seconds = seconds.toString();
if (seconds.length == 1){
seconds = "0"+seconds;
}
// return output to Web Worker
postMessage(minutes+":"+seconds);
}
if (timerStart){
// get current time
var d0=(new Date()).valueOf();
// repeat myTimer(d0) every 100 ms
myVar=setInterval(function(){myTimer(d0)},100);
// timer should not start anymore since it has been started
timerStart = false;
}
Check out frenetic.be/tricks/simple-timer.php to see it in action. Enjoy!!!
Comments
Post a Comment