two countdowns in a single html [duplicated]

Question

two countdowns in a single html [duplicated]

Navigation

#1 by (0 votes)

0

I have a countdown running in my html , but I need that right after finishing, start a new countdown with a different time in the same countdown , this is the js

$(function (){

function countdown() {

var now = new Date();
var eventDate = new Date('Nov 03, 2017 10:18:40');
var currentTime = now.getTime();
var evenTime = eventDate.getTime();

if(eventDate<=currentTime){
    clearInterval(setTimeout);
    document.getElementById("countdown").innerHTML = "EXPIRED";

}

var remTime = evenTime - currentTime;

var sec = Math.floor(remTime / 1000);
var min = Math.floor(sec / 60);
var hur = Math.floor(min / 60);
var day = Math.floor(hur / 24);

 hur %= 24;
 min %= 60;
 sec %= 60;

hur = (hur < 10) ? "0" + hur : hur;
min = (min < 10) ? "0" + min : min;
sec = (sec < 10) ? "0" + sec : sec;

$('.seconds').text(sec);
$('.minutes').text(min);
$('.hours').text(hur);
$('.days').text(day);

setTimeout(countdown, 1000);
}

countdown({elapse: true});



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countdown-section col-xs-12 col-sm-6">
                    <div id="countdown">
                        <ul class="countdown">
                        <h2 class="countheader">Round Starts in</h2>
                        <li> <span class="days">00</span>
                        <p class="days_ref">days</p>
                        </li>
                        <li class="seperator">.</li>
                        <li> <span class="hours">00</span>
                        <p class="hours_ref">hours</p>
                        </li>
                        <li class="seperator">:</li>
                        <li> <span class="minutes">00</span>
                        <p class="minutes_ref">minutes</p>
                        </li>
                        <li class="seperator">:</li>
                        <li> <span class="seconds">00</span>
                        <p class="seconds_ref">seconds</p>
                        </li>
                        </ul>
                    </div>
                </div>

javascript jquery html5 css3

asked by Rene Limon 03.11.2017 в 16:29

source

1 answer

Browse the server directory from the web application to get the directory path Filter records with dropdownlist

score 0 · Accepted Answer

I understand that you are looking for the second counter to start automatically.

You can change the eventDate variable to an Array type to store multiple dates and traverse them with a variable x = 0 (outside the function) that adds +1 each time that detects that the date has already expired.

Take into account that the Array will be traversed in the order you declared it and will not search for the closest date to expire.

var eventDate = [
            new Date('Nov 04, 2017 16:15:00'),
            new Date('Nov 04, 2017 16:20:00'),
            new Date('Nov 04, 2017 16:25:00')
        ];

The code would look like this:

$(function (){
    var x = 0;
    function countdown() {            
        var now = new Date();
        var currentTime = now.getTime();

        var eventDate = [
            new Date('Nov 04, 2017 16:15:00'),
            new Date('Nov 04, 2017 16:20:00'),
            new Date('Nov 04, 2017 16:25:00')
        ];

        if(eventDate[x].getTime() <= currentTime){
            if ( x < eventDate.length - 1) {
                x++;
                countdown();
            } else{
                document.getElementById("countdown").innerHTML = "EXPIRED";
            }
        } else{
            var remTime = eventDate[x].getTime() - currentTime;

            var sec = Math.floor(remTime / 1000);
            var min = Math.floor(sec / 60);
            var hur = Math.floor(min / 60);
            var day = Math.floor(hur / 24);

            hur %= 24;
            min %= 60;
            sec %= 60;

            hur = (hur < 10) ? "0" + hur : hur;
            min = (min < 10) ? "0" + min : min;
            sec = (sec < 10) ? "0" + sec : sec;

            $('.seconds').text(sec);
            $('.minutes').text(min);
            $('.hours').text(hur);
            $('.days').text(day);

            setTimeout(countdown, 1000);
        }
    }
    countdown();
});