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
Post a Comment