Category Archives: Javascript - Page 3

Create a countdown timer using setInterval

Posted by on April 7, 2011 No 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).

Niklas Tech Blog
Powered by  GDPR Cookie Compliance
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.