jqueryhtml5-canvasjquery-countdown

jQuery - Countdown360 plugin on every Monday with specific time


I am using "Countdown360" jQuery plugin for scheduled events.

And it has been set to 100seconds from the page opens.

How can I configure the same in such a way that, This timer should run every Monday from 9am to 9:01am?

Demo.

Is there any better plugin for this purpose?

$("#countdown").countdown360({
  radius      : 80,
  seconds     : 60,
  fontColor   : '#FFFFFF',
  autostart   : false,
  onComplete  : function () { console.log('done') }
}).start()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://www.jqueryscript.net/demo/Simple-jQuery-Html5-Based-360-Degree-Countdown-Timer-countdown360/src/jquery.countdown360.js"></script>

<div id="countdown"></div>


Solution

  • If you can't execute your script at the specific time, you've to check the time each second...

    Here an example with parametrable day and time

    day number 1 => Monday

    function checkTime(dayok,hoursok,minuteok,secondsok)
    {
      var date=new Date();
      var day = date.getDay();
      var hours  = date.getHours();
      var min = date.getMinutes();
      var seconds = date.getSeconds();
      console.log(day+ " - "+hours+":"+min+":"+seconds);
      if(day==dayok && hours==hoursok && minute==minuteok && seconds==secondsok)
        return true;
      else
        return false;
    }
    
    function goCountDown()
    {
      if(checkTime(1,9,0,0))
      {
        $("#countdown").countdown360({
          radius      : 80,
          seconds     : 60,
          fontColor   : '#FFFFFF',
          autostart   : false,
          onComplete  : function () { console.log('done') }
        }).start()
      }
    }
    
    setInterval(function(){ goCountDown() }, 1000);
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <script src="https://www.jqueryscript.net/demo/Simple-jQuery-Html5-Based-360-Degree-Countdown-Timer-countdown360/src/jquery.countdown360.js"></script>
    
    <div id="countdown"></div>