jquery-final-countdown icon indicating copy to clipboard operation
jquery-final-countdown copied to clipboard

How to set the time?

Open febdao opened this issue 9 years ago • 2 comments

Hi guy! Your countdown is very good, I like it and I want to use it for the website about my wedding event. But I have a problem with the time, can you explain how can I set the time? I need to countdown to November 01, 2015. This is my code but it doesn't work correctly

  var end = new Date("11/01/2015").getTime(); 
  var start = new Date("10/05/2015").getTime(); 
  var now = new Date().getTime();
    $('.countdown').final_countdown({
        'start': start,
        'end': end,
        'now': now
    });

Please help me now! Thanks!

febdao avatar Oct 07 '15 04:10 febdao

Ok! I got it from older issues!

   ```
    var end = Math.floor((new Date("11/01/2015")).getTime()/1000); 
    var start =  Math.floor((new Date("10/05/2015")).getTime()/1000); 
    var now =  Math.floor((new Date).getTime()/1000);
    $('.countdown').final_countdown({
        'start': start,
        'end': end,
        'now': now
    });

Thanks a lot! :dancer:

febdao avatar Oct 07 '15 04:10 febdao

Hi @febdao , I have added data attributes so we can manage easily from html code.

// circle countdown
$('.countdown').each(function() {
    var end = Math.floor(new Date($(this).data('end')).getTime() / 1000)
    var start = Math.floor(new Date($(this).data('start')).getTime() / 1000)
    var now = Math.floor(new Date().getTime() / 1000)
    $(this).final_countdown({
        start: start,
        end: end,
        now: now,
    })
})

HTML code

<div class="countdown countdown-container container  divider-bottom pab-14" data-start="11/05/2016" data-end="11/01/2019" data-border-color="rgba(0, 0, 0, .8)">
    <div class="clock row maxw-550 mx-auto">
        <!-- Single clock box -->
        <div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3">
            <div class="wrap">
                <div class="inner">
                    <div id="canvas-days" class="clock-canvas"></div>
                    <div class="time-text">
                        <p class="val">100</p>
                        <p class="type-days type-time">DAYS</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- Single clock box -->
        <div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3">
            <div class="wrap">
                <div class="inner">
                    <div id="canvas-hours" class="clock-canvas"></div>
                    <div class="time-text">
                        <p class="val">0</p>
                        <p class="type-hours type-time">HOURS</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- Single clock box -->
        <div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3">
            <div class="wrap">
                <div class="inner">
                    <div id="canvas-minutes" class="clock-canvas"></div>
                    <div class="time-text">
                        <p class="val">0</p>
                        <p class="type-minutes type-time">MINUTES</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- Single clock box -->
        <div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3">
            <div class="wrap">
                <div class="inner">
                    <div id="canvas-seconds" class="clock-canvas"></div>
                    <div class="time-text">
                        <p class="val">0</p>
                        <p class="type-seconds type-time">SECONDS</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /.countdown-wrapper -->

devenamulhaque avatar Mar 29 '19 05:03 devenamulhaque