Labels

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:

<!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':


// 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;
}



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!!!
Labels:

Comments

  1. AnonymousDecember 4, 2022 at 8:19 PM

    Gambling remained the same after that until controlled gambling environments, also known as|also called|also referred to as} casinos, had been invented within the 1600s. People would gamble in these environments quite than within the privateness of someone’s 온라인카지노 house, back alleys, or consuming institutions. Nevertheless, all gambling websites must be compliant with any laws that they're subject to, to ensure gambling websites are operated lawfully, ethically, and are protected.

    ReplyDelete

Post a Comment

Popular Posts