Javascript Countdown specific date/time and repeat

user_13545347 0
Viewed 246

so for a while I ve been trying to implement a script that prints me the remaining time (countdown) to an specific day of the week (Sunday) at 16 h (4PM), my server date timezone is set to America/New_York (GMT-5).. so far I have this code, it is not working well, only when countdown remaining time is less/under than 1 day, script start showing negative values (like, -1 hour..) any help here? cheers

https://jsfiddle.net/v4wjbtus/


        function plural(s, i) {
        return i + ' ' + (i > 1 ? s + 's' : s);
        }
    
        function sundayDelta(offset) {
        // offset is in hours, so convert to miliseconds
        offset = offset ? offset * 60 * 60 * 1000 : 0;
        var now = new Date(new Date().getTime() + offset);
        var days = 7 - now.getDay() || 7;
        var hours = 21 - now.getHours() || 24;
        var minutes = 60 - now.getMinutes();
        var seconds = 60 - now.getSeconds();
        
        return [plural('day', days),
              plural('hour', hours),
              plural('minute', minutes), 
              plural('second', seconds)].join(' ');
        }
    
        // Save reference to the DIV
        $refresh = jQuery('#refresh');
    
        $refresh.text('News in ' + sundayDelta());
    
        // Update DIV contents every second
        setInterval(function() {
        $refresh.text('News in ' + sundayDelta());
        }, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="refresh" class="text-success" style="position: absolute;bottom: 0;"></div>

countdown jquery javascript
1 Answers

Since there are already examples of converting milliseconds duration to human-readable form, I instead created a mashup with your code and what I found.

For my tastes, I would further update this to not show a segment if the segment equals zero, so that it reads better.

    // seed date, (ANY past sunday at 16:00)
    var seed = new Date(2020, 11, 6, 16);
    var target;

    // pluralize/singularize
    function plural(s, i) {
        return i + ' ' + (i > 1 ? s + 's' : s);
    }
    
    // miliseconds to the next upcoming sunday 16:00
    function timeToTarget() { 
        while (seed < new Date()) {
        seed.setDate(seed.getDate()+7)
      }          
      target = seed;
        return Math.abs(seed - new Date());    
    }
    
    // convert miliseconds duration to human readable
    function msReadableDuration() {
    var duration = timeToTarget();
    var seconds = Math.floor((duration / 1000) % 60),
        minutes = Math.floor((duration / (1000 * 60)) % 60),
        hours = Math.floor((duration / (1000 * 60 * 60)) % 24),
        days = Math.floor((duration / (24 * 60 * 60 * 1000) % 7));

      hours = (hours < 10) ? "0" + hours : hours;
      minutes = (minutes < 10) ? "0" + minutes : minutes;
      seconds = (seconds < 10) ? "0" + seconds : seconds;
      
      return [plural('day', days),
          plural('hour', hours),
          plural('minute', minutes), 
          plural('second', seconds)].join(', ');
    }
    
        
    // show seed date
    $seed = jQuery('#seed');
    $seed.text(seed.toString());

    // Save reference to the DIV
    $refresh = jQuery('#refresh');
    $refresh.text('News in ' + msReadableDuration());

    // Update DIV contents every second
    setInterval(function() {
    $refresh.text('News in ' + msReadableDuration());
    }, 1000);
    
    // show seed date  (target is computed after timeToTarget executes)
    $target = jQuery('#target');
    $target.text(target.toString());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="seed"></div>
<div id="target"></div>
<p id="refresh"></p>

And instead of using a seed date, you can further refine my snippet to have a function that simply looks for the next up-coming Sunday via something similar to this: https://codereview.stackexchange.com/a/33648

user_11881970
Related