Multifunctional jQuery Countdown / Stopwatch Plugin - Timer.js

File Size: 10.4 KB
Views Total: 12878
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Multifunctional jQuery Countdown / Stopwatch Plugin - Timer.js

timer.js is a multifunctional jQuery timer plugin which helps you create countdown timers and stopwatches, as well as dynamically switch between a set of elements at a given timeout.

How to use it:

1. Load the JavaScript file timer.js after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.timer.js"></script>

2. Create a stopwatch with play/pause/reset controls that allow to count up towards a given time. jQuery Timer doesn't natively act like a stopwatch, it only aids in building one. You need to keep track of the current time in a variable and increment it manually.  Then on each incrementation, update the page. The increment time for jQuery Timer is in milliseconds. So an input time of 1000 would equal 1 time per second.  In this example we use an increment time of 70 which is roughly 14 times per second.  You can adjust your timer if you wish. The update function converts the current time to minutes, seconds and hundredths of a second.  It then outputs that to the stopwatch element, $stopwatch, and then increments. Since the current time is stored in hundredths of a second so the increment time must be divided by ten.

<span id="stopwatch">00:00:00</span>
<p>
  <input type='button' value='Play/Pause' onclick='Example1.Timer.toggle();' />
  <input type='button' value='Stop/Reset' onclick='Example1.resetStopwatch();' />
</p>
var Example1 = new (function() {
    var $stopwatch, // Stopwatch element on the page
        incrementTime = 70, // Timer speed in milliseconds
        currentTime = 0, // Current time in hundredths of a second
        updateTimer = function() {
            $stopwatch.html(formatTime(currentTime));
            currentTime += incrementTime / 10;
        },
        init = function() {
            $stopwatch = $('#stopwatch');
            Example1.Timer = $.timer(updateTimer, incrementTime, true);
        };
    this.resetStopwatch = function() {
        currentTime = 0;
        this.Timer.stop().once();
    };
    $(init);
});

3. Create a countdown timer with play/pause/stop/reset controls that allows to countdown from a given time. The biggest difference besides counting up is the ability to reset the timer to a specific time. To do this, there is an input text field in a form.

<span id="countdown">05:00:00</span>
<form id="example2form">
  <input type='button' value='Play/Pause' onclick='Example2.Timer.toggle();' />
  <input type='button' value='Stop/Reset' onclick='Example2.resetCountdown();' />
  <input type='text' name='startTime' value='300' style='width:30px;' />
</form>
var Example2 = new (function() {
    var $countdown,
        $form, // Form used to change the countdown time
        incrementTime = 70,
        currentTime = 30000,
        updateTimer = function() {
            $countdown.html(formatTime(currentTime));
            if (currentTime == 0) {
                Example2.Timer.stop();
                timerComplete();
                Example2.resetCountdown();
                return;
            }
            currentTime -= incrementTime / 10;
            if (currentTime < 0) currentTime = 0;
        },
        timerComplete = function() {
            alert('Example 2: Countdown timer complete!');
        },
        init = function() {
            $countdown = $('#countdown');
            Example2.Timer = $.timer(updateTimer, incrementTime, true);
            $form = $('#example2form');
            $form.bind('submit', function() {
                Example2.resetCountdown();
                return false;
            });
        };
    this.resetCountdown = function() {
        var newTime = parseInt($form.find('input[type=text]').val()) * 100;
        if (newTime > 0) {currentTime = newTime;}
        this.Timer.stop().once();
    };
    $(init);
});

4. Create an image slideshow that has the ability to preserve time remaining when paused.

<div class="galleryImages">
  <img src='1.jpg' alt='' />
  <img src='2.jpg' alt='' />
  <img src='3.jpg' alt='' />
</div>
var Example3 = new (function() {
    var $galleryImages, // An array of image elements
        $timeRemaining, // Usually hidden element to display time when paused
        imageId = 0, // Which image is being shown
        incrementTime = 2500,
        updateTimer = function() {
            $galleryImages.eq(imageId).stop(true,true).fadeOut(500);
            imageId++;
            if (imageId > $galleryImages.length) {
                imageId = 0;
            }
            $galleryImages.eq(imageId).stop(true,false).fadeIn(500);
        },
        init = function() {
            $galleryImages = $('.galleryImages img');
            $timeRemaining = $('#timeRemaining');
            Example3.Timer = $.timer(updateTimer, incrementTime, true).once();
        };
    this.toggleGallery = function() {
        if (this.Timer.isActive) {
            this.Timer.pause();
            var remaining = this.Timer.remaining / 1000;
            $timeRemaining.html(remaining + " seconds remaining.");
        }
        else {
            this.Timer.play();
            $timeRemaining.html("<br/>");
        }
    };
    $(init);
});

This awesome jQuery plugin is developed by jchavannes. For more Advanced Usages, please check the demo page or visit the official website.