javascript - Looping foreach, grabbing data from db and insert into JS -
javascript - Looping foreach, grabbing data from db and insert into JS -
i have js display countdown timer, showing 1 item on page , need used in php foreach loop have. code below within foreach loop.
<div class="countdown-timer"> <strong>time left - </strong> <span id="countdown"></span> </div> <script type="text/javascript" charset="utf-8"> // set date we're counting downwards var target_date = new date("<?php echo $listing->ends; ?>").gettime(); // echo homecoming 2014-07-15 // variables time units var days, hours, minutes, seconds; // tag element var countdown = document.getelementbyid("countdown"); // update tag id "countdown" every 1 sec setinterval(function () { // find amount of "seconds" between , target var current_date = new date().gettime(); var seconds_left = (target_date - current_date) / 1000; // time calculations days = parseint(seconds_left / 86400); seconds_left = seconds_left % 86400; hours = parseint(seconds_left / 3600); seconds_left = seconds_left % 3600; minutes = parseint(seconds_left / 60); seconds = parseint(seconds_left % 60); // format countdown string + set tag value countdown.innerhtml = days + " days " + hours + " hrs " + minutes + " min " + seconds + " secs "; }, 1000); </script>
you'll need create unique id each element, way can reference each element individually.
in addition, you'd wise take javascript block out of php foreach
loop. instead, create array of each element's id, utilize array setinterval
on each item via javascript. way, don't repeat bunch of js code.
rough example:
<!-- php code here loop , create these html elements --> <div class="countdown-timer"> <strong> time left - </strong> <span id="countdown-insert_id_from_php_here"></span> </div> <!--end php code create html --> <script type="text/javascript"> var createcountdown = function(id, date) { var target_date = new date(date).gettime(); var days, hours, minutes, seconds; var countdown = document.getelementbyid(id); setinterval(function() { var current_date = new date().gettime(); var seconds_left = (target_date - current_date) / 1000; days = parseint(seconds_left / 86400); seconds_left = seconds_left % 86400; hours = parseint(seconds_left / 3600); seconds_left = seconds_left % 3600; minutes = parseint(seconds_left / 60); seconds = parseint(seconds_left % 60); // format countdown string + set tag value countdown.innerhtml = days + " days " + hours + " hrs " + minutes + " min " + seconds + " secs "; }, 1000); }; // utilize php create array // populate objects // { id: "countdown-6", date: "2014-07-01" } var allcounters = [ { id: "countdown-6", date: "2014-07-01" } ]; allcounters.foreach(function(counter) { createcountdown(counter.id, counter.date); }); </script>
javascript php
Comments
Post a Comment