Javascript to add timer in the page using SharePoint content editor webpart

Posted: May 4, 2011 in Content editor web part, javascript

The below code adds and displays a timer in your page. Just add this script to your content editor webpart. Time will be displayed in format MM:SS

To change the time set the variable start in seconds. In the two if loops, 1st one is used to display a message when a particular time is reached, 2nd is used to closed the window when the time is over. You can also add custom actions by validating the current time using the variable seconds.

<div id=”countdown”></div>
<div id=”notifier”></div>

<script type=”text/javascript”>

var start = 600;
Number.prototype.toMinutesAndSeconds = function()
{
    var nbr = Math.floor(this / 60);
    return (nbr+”:”)+(((nbr=(this-(nbr*60)))<10)?”0″+nbr:nbr);
}

function display(seconds, output)
{
    output.innerHTML = “<b><font size=’3′>Time left for you to submit the form </font></b><font size=’5′ color=’Green’>” + (–seconds).toMinutesAndSeconds()     + “</font>”;

    if(seconds > 0)
    {
            window.setTimeout(function(){display(seconds, output)}, 1000);
    }

    if(seconds < 121)
    {
            document.getElementById(“notifier”).innerHTML = “&nbsp;<font size=’2′ color=’Red’>Less than 2 minutes  available. Please submit the form.”;
    }

    if (seconds == 1)
    {
        window.alert(‘Sorry!! Time is over.’);
        window.open(”, ‘_self’, ”);
        window.close();
    }
}

display(start, document.getElementById(“countdown”));

</script>

Advertisements
Comments
  1. Hi just wanted to give you a brief heads up and let you know a few of the images aren’t loading properly. I’m not sure
    why but I think its a linking issue. I’ve tried it in two different web browsers and both show the same outcome.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s