javascript

How to create start/stop timer using jQuery

How to create start/stop timer using jQuery

In this post, we are going to see how to create a start/stop timer using jQuery.It becomes useful when you want to allow users to show some time duration before performing some task or show timer for some quiz like application and many more cases.

Steps by Step Guide to Create start/stop timer using Jquery:

If you are new to Jquery or want to learn some basics before starting this tutorial, I must recommend to please checkout learn-javascript-from-scratch and jquery-step-by-step-tutorial-for-beginners

So, here I am going to show how this can be done by using Jquery. we will use a third-party library to achieve this feature with jquery

So let’s start.

STEP-1:

First of all, you have to add the jquery library to your page:

<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

STEP-2:

Create a Blank HTML file and put the following code:

<body>

    <div class="container">

        <div class="card" style="width: 40rem;margin-top: 20vh;margin-left: 40vh;">

            <div class="card-body">
                <h5 id="timer1" class="card-title"></h5>
                <p class="card-text text-note" style="display: none;">Refresh the page to start timer again.</p>

                <button type="button" id="pause" class="btn btn-primary">Pause</button>
                <button type="button" id="resume" class="btn btn-secondary">Resume</button>

                <button type="button" id="remove" class="btn btn-danger">Remove</button>
            </div>
        </div>

    </div>
</body>

STEP-3:

Add third-party jQuery-timer-plugin after jquery script.

<script src="https://cdnjs.cloudflare.com/ajax/libs/timer.jquery/0.7.0/timer.jquery.js"></script>

STEP-4:

After ending the HTML tag add some Javascript code including with script tag as follow:

<script>
        $(document).ready(function () {

            //start a timer
            $("#timer1").timer();

            //pause the timer
            $('#pause').on('click', function () {
                $('#timer1').timer('pause');
            })

            //resume the timer
            $('#resume').on('click', function () {
                $('#timer1').timer('resume');
            })

            //remove the timer
            $('#remove').on('click', function () {
                $('#timer1').timer('remove').hide();
                $('#pause,#resume,#remove').hide();
                $('.text-note').show();
            })
        });
    </script>

Now you are done. If you find any issue checkout the complete source code given below:

Complete source code:

Index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Jquery Timer Demo</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
</head>

<body>

    <div class="container">

        <div class="card" style="width: 40rem;margin-top: 20vh;margin-left: 40vh;">

            <div class="card-body">
                <h5 id="timer1" class="card-title"></h5>
                <p class="card-text text-note" style="display: none;">Refresh the page to start timer again.</p>

                <button type="button" id="pause" class="btn btn-primary">Pause</button>
                <button type="button" id="resume" class="btn btn-secondary">Resume</button>

                <button type="button" id="remove" class="btn btn-danger">Remove</button>
            </div>
        </div>

    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/timer.jquery/0.7.0/timer.jquery.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>

    <script>
        $(document).ready(function () {

            //start a timer
            $("#timer1").timer();

            //pause the timer
            $('#pause').on('click', function () {
                $('#timer1').timer('pause');

            })

            //resume the timer
            $('#resume').on('click', function () {
                $('#timer1').timer('resume');

            })

            //remove the timer
            $('#remove').on('click', function () {
                $('#timer1').timer('remove').hide();
                $('#pause,#resume,#remove').hide();
                $('.text-note').show();

            })

        });
    </script>
</body>

</html>

Download Source Code

View Demo

Conclusion:

Thanks for reading.

Do let me know If you face any difficulties please feel free to comment below we love to help you.if you have any feedback suggestion then please inform us by commenting.

Don’t forget to share this tutorial with your friends on Facebook and Twitter

If You Appreciate What We Do Here On TutsCoder, You Should Consider:

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Support Us

We are thankful for your never ending support.

Leave a Comment