jQuery根据时间对div进行动画处理

Question

I am displaying Prayer time in div tag and i want to animate this particular div if is 15 - 20 minutes close to prayer time.

<div class="pt-time"><b>Fajr</b><br> <span id="ContentPlaceHolder1_lblFajrTime">04:48</span></div>                  </div>
<div class="pt-circle"><div class="pt-time"><b>Dhur</b><br><span id="ContentPlaceHolder1_lblDhurTime">12:19</span></div></div>
<div class="pt-circle"><div class="pt-time"><b>Asr</b><br><span id="ContentPlaceHolder1_lblAsrTime">15:43</span></div></div>
<div class="pt-circle"><div class="pt-time"><b>Magrib</b><br><span id="ContentPlaceHolder1_lblMagribTime">18:19</span></div></div>
<div class="pt-circle"><div class="pt-time"><b>Isha</b><br><span id="ContentPlaceHolder1_lblIshaTime">19:49</span></div></div>

Let us say I want to animate the border of the second circle from 12:00 - 12:19 .

Just to mention prayer time changes every day by at-least 1 minutes.

Fiddle link

Answer 1

I made a small fork from your pen: http://codepen.io/Saar/pen/YyWVpW?editors=101

basically this is the code (for 20 min or less, it runs every 5 min):

var interval = setInterval(function(){
  var currentTime = Date.now();
  $(".pt-time>span").each(function(idx){
    var prayerTimeString = $(this).text();
    var prayerTime = new Date();
    var times = prayerTimeString.split(":");
    prayerTime.setHours(times[0]);
    prayerTime.setMinutes(times[1]);
    var timeOfPrayerInMs = prayerTime.getTime();
    var timeDif = timeOfPrayerInMs- currentTime; 
    if(timeDif <= 20*1000*60 && timeDif > 0){
      $(this).closest(".pt-circle").addClass("closePrayerTime");
    }
    else{
      $(this).closest(".pt-circle").removeClass("closePrayerTime");
    }
  });
},1000*60*5);