How To Auto Increase The Value Of Counter In JQuery

Posted By Bajarangi soft , Posted On 15-01-2021

In Jquery we can create counter which counts automatically on click of button .So today we discuss how to do it using jquery

How To Auto Increase The Counter Of Counter In JQuery

Lets Start
Step 1:Create index.php and implement below code in it.

<div class="container">
       <div class="well">
           <div class="row">
               <div class="col-md-12">
                   <h4 class="counter_data"></h4>
               </div>
           </div>
       </div>
    <button class="btn btn-success" id="submit">Save</button>
</div>

Step 2:Now Create Jquery to increase counter value automatically on click of button.

<script>
    $(document).ready(function () {
        $('.progress-bar').show();
        $("#submit").click(function () {
            var progressBar = $('.progress-bar');
            var percentVal = 0;

            window.setInterval(function(){
                percentVal += 1;
                $('.counter_data').append(percentVal);
                if(percentVal == 20){
                    percentVal = 0;
                }
            }, 500);
    });
    });
</script>

Complete Code For Automatically increasing the value of counter using jquery.

<!doctype html>
<html lang="en">
<head>
    <title>How To Auto Increase The Value Of Counter In JQuery</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" href="index.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
    body{
        background: lightblue;
    }
</style>
</head>
<body>
<div class="container">
   <div class="text-center">
       <br> <br> <br> <br> <br> <br>
       <h4>How To Auto Increase The Value Of Counter In JQuery</h4>
   </div>
    <br> <br> <br> <br> <br> <br>
       <div class="well">
           <div class="row">
               <div class="col-md-12">
                   <h4 class="counter_data"></h4>
               </div>
           </div>
       </div>

    <br> <br>
    <button class="btn btn-success" id="submit">Save</button>
</div>
</body>
</html>
<script>
    $(document).ready(function () {
        $('.progress-bar').show();
        $("#submit").click(function () {
            var progressBar = $('.progress-bar');
            var percentVal = 0;

            window.setInterval(function(){
                percentVal += 1;
                $('.counter_data').append(percentVal);
                if(percentVal == 20){
                    percentVal = 0;
                }
            }, 500);
    });
    });

</script>