Category Archives: Javascript - Page 3

Create a countdown timer using setInterval

Posted by on April 7, 2011 6 comments

SetInterval is a very usefull function when making webpages that should look ‘alive’. I am here going to make a countdown timer using the setInterval and clearInterval functions:

First we need two variables:

var clock = 10; //Start value of counter
var countdownId = 0; // Id of counter

Now we need the countdown function to call every interval:

function countdown() {
    if(clock > 0) {
        clock = clock - 1;
        document.getElementById('cdDiv').innerHTML = clock;
    }
    else {
        // Stop timer
        clearInterval(countdownId);
    }
}

Now we need a div to show the timer in:

<div id="cdDiv">10</div>

Now we put it all togheter:

<html>
  <head>
    <title>My little countdown timer</title>
    <script type="text/javascript">
        var clock = 10;
        var countdownId = 0;

        function start() {
            //Start clock
            countdownId = setInterval("countdown()", 1000);
        }

        function countdown(){
            if(clock > 0){
                clock = clock - 1;
                document.getElementById('cdDiv').innerHTML = clock;
            }
            else {
                //Stop clock
                clearInterval(countdownId);
            }
        }
    </script>
  </head>
  <body onload="start()">
      <div id="cdDiv">10</div>
  </body>
</html>

This small example is mostly so I remember the clearInterval function name which keeps escaping me 🙂

Swap HTML elements randomly using Javascript

Posted by on January 7, 2011 No comments

I once need to swap a bunch of P elements around randomly in a HMTL page. This is how I did it.

This is my example HTML:

<html>
  <head>
    <title>Swapping HTML elements randomly in Javascript</title>
  </head>
  <body>
      <p>First P element</p>
      <p>Second P element</p>
      <p>Third P element</p>
  </body>
</html>

First we need to grap all the elements we want to swap around. In this case we grab all P elements

var elements = document.getElementsByTagName("p");

Then we add a nifty function to the Javascript Node object (this function is not needed in IE since IE already has this function built in):

Node.prototype.swapElements = function(element) {
        element.parentNode.replaceChild(this, element);
        this.parentNode.insertBefore(element, this.nextSibling);
}

Now we also need a function that will give us some random numbers

function rand(n) {
        return (Math.floor(Math.random() * n));
}

And finally we put it all togheter and add a for-loop 

Node.prototype.swapElements = function(element) {
        element.parentNode.replaceChild(this, element);
        this.parentNode.insertBefore(element, this.nextSibling);
}
function rand(n) {
        return (Math.floor(Math.random() * n));
}
function shuffle() {
        var elements = document.getElementsByTagName("p");
        var length = elements.length;

        for (var i = 0; i < length; i++){
            elements[i].swapElements(elements[rand(length)]);
        }
}

Now all you need to do is to call shuffle() anytime you want to shuffle the P elements. NOTE: The function does NOT guarantee that the elements will change positions each time.

Tested in Firefox 4, Chrome 10 and IE 8 (without Node.prototype.swapElements function).