Code2night
  • Home
  • Blogs
  • Tutorial
  • Post Blog
  • Tools
    • Json Beautifier
    • Html Beautifier
  • Members
    • Register
    • Login
  1. Home
  2. Blogpost
17 Sep
2022

Countown Timer in Javascript

by Shubham Batra

758


So , for creating a countdown timer  we have to add one div or span for showing the timer. So you can add this in the html


<div class="jumbotron">
    <h1>Jquery Countdown Timer</h1>
    
</div>


<div id="timer" style="font-size:30px">
    5:00
</div>

Now we have to add the javascript code for countdown timer. So you can add the following script in your page 

setTimeout(startTimer, 1000);

    var ResetTimer = function () {
         document.getElementById('timer').innerHTML =  "5 : 00";
    }

    function startTimer() {

        var presentTime = document.getElementById('timer').innerHTML;
        var timeArray = presentTime.split(/[:]+/);
        var m = timeArray[0];
        var s = checkSecond((timeArray[1] - 1));
        if (s == 59) { m = m - 1 }
        if (m < 0) {
            return
        }

        document.getElementById('timer').innerHTML =
            m + ":" + s;

        if (parseInt(m) == 0 && parseInt(s) == 0) {
            ResetTimer();

        }
        console.log(m)
        setTimeout(startTimer, 1000);

    }

    function checkSecond(sec) {
        if (sec < 10 && sec >= 0) { sec = "0" + sec }; // add zero in front of numbers < 10
        if (sec < 0) { sec = "59" };
        return sec;
    }

Here , you can see that we have added the timer for 5:00 minutes by default and then the countdown will work from that.When the timer will reach to zero we have down ResetTimer which we again set the value to initial value and timer will keep going.

You can check the output in the image

So this is how we can implement countdown timer in javascript.

  • |
  • countdown timer , Timer in js

Comments

Follow Us On Social Media - Like Us On Facebook

Best Sellers

product 1

Hand Hug Bracelet For Women Men Cuff Bangle Adjustable Lover Couple Bracelets

Can be given as a gift to your family, relatives, or friends

Buy $15.99
product 1

Teddy bear hug bear plush toy bear cub

Can be given as a gift to your family, relatives, or friends


Buy $49.99

Tags

LinkedinLogin
LinkedinProfile
GetLinkedinProfile
C#
Aspnet
MVC
Linkedin
ITextSharp
Export to Pdf
AspNet Core
AspNet
View to Pdf in Aspnet
Model Validation In ASPNET Core MVC 60
Model Validation
Model Validation In ASPNET Core MVC
Model Validation In ASPNET
Image Compression in AspNet
Compress Image in c#
AspNet MVC
Thank you for Downloading....!

Subscribe for more tutorials

Support our team

Continue with Downloading

Welcome To Code2night, A common place for sharing your programming knowledge,Blogs and Videos

  • Panipat
  • info@Code2night.com

Links

  • Home
  • Blogs
  • Tutorial
  • Post Blog

Popular Tags

Copyright © 2023 by Code2night. All Rights Reserved

  • Home
  • Blog
  • Login
  • SignUp
  • Contact
  • Terms & Conditions
  • Refund Policy
  • About Us
  • Privacy Policy
  • Json Beautifier