Show (Display) timer between two dates using jQuery

SajidHussa
 
on Aug 30, 2021 03:45 AM
Sample_109282.zip
544 Views

show timer between two dates using jquery 

if i have two dates 

start date is 10/08/2021 10:00AM

end date is 15/08/2021 10:00 PM

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Aug 30, 2021 03:48 AM
SajidHussa says:
show timer jquery 

Do you want to display count down timer between two dates?

SajidHussa
 
on Aug 30, 2021 06:30 AM
on Aug 30, 2021 06:30 AM

yes sir

dharmendr
 
on Aug 30, 2021 07:10 AM

Hi SajidHussa,

Refer below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var endDate = "08-31-2021 10:00:00";
            var lblTimer = $("[id*=lblTimer]");
            var countDownDate = new Date(endDate).getTime();
            var x = setInterval(function () {
                var now = new Date().getTime();
                var distance = countDownDate - now;
                var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                $(lblTimer).html(days + "d " + hours + "h " + minutes + "m " + seconds + "s");
                if (distance < 0) {
                    clearInterval(x);
                    $(lblTimer).html("EXPIRED");
                }
            }, 1000);
        });
    </script>
    <span id="lblTimer"></span>
</body>
</html>

Demo