javascript - jQuery to animate div based on time -


i displaying prayer time in div tag , want animate particular div if 15 - 20 minutes close 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 want animate border of second circle 12:00 - 12:19.

just mention prayer time changes every day at-least 1 minutes.

fiddle link

i made small fork pen: http://codepen.io/saar/pen/yywvpw?editors=101

basically code (for 20 min or less, 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); 

Comments

Popular posts from this blog

java - Date formats difference between yyyy-MM-dd'T'HH:mm:ss and yyyy-MM-dd'T'HH:mm:ssXXX -

c# - Get rid of xmlns attribute when adding node to existing xml -