Cara menggunakan countdown php codeigniter

2

New! Save questions or answers and organize your favorite content.
Learn more.

I am trying to Show a Countdown Timer Inside Foreach loop for every record in PHP Codeigniter Framework, It is basically showing Datediff between current date and mysql database date value as how many days left, Below is my code.Problem is it is showing countdown timer for single record only not for every record i need

 <?php foreach ($my_courses as $my_course):
     $course_details = $this->crud_model->get_course_by_id($my_course['course_id'])->row_array();
 
     <!-- countdown timer-->
                             
     <?php if ($course_details['is_onlineclass']==='Yes'): ?>
     <span style="display:inline-block;font-size:12px;font-color:crimson;"><?php 
     $t=$course_details['live_class_schedule_time'];
                                   
     //time difference in seconds for coundown timer
     $date = new DateTime();
     $date2 = new DateTime(date("yy-m-d h:i:s a", $t));  
     $diff = $date->getTimestamp() - $date2->getTimestamp() ;
     echo $diff;                                      
     ?></span>
                                  
     <span  id="<?echo $my_course['course_id']?>" class="timer" style="font-size:smaller;color:crimson;"></span>                                     
     <?php endif; ?>
                                 
     <script>
         var initialTime = <?echo $diff?>;

         var seconds = initialTime;
         function timer() {
         var days        = Math.floor(seconds/24/60/60);
         var hoursLeft   = Math.floor((seconds) - (days*86400));
         var hours       = Math.floor(hoursLeft/3600);
         var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
         var minutes     = Math.floor(minutesLeft/60);
         var remainingSeconds = seconds % 60;
         if (remainingSeconds < 10) {
         remainingSeconds = "0" + remainingSeconds; 
         }
         document.getElementById('<?echo $my_course['course_id']?>').innerHTML = days + "days " + hours + "hours " + minutes + "min " + remainingSeconds+ "sec left";
         if (seconds == 0) {
              learInterval(countdownTimer);
              document.getElementById('<?echo $my_course['course_id']?>').innerHTML = "Completed";
         } else {
           seconds--;
                }
         }
            var countdownTimer = setInterval('timer()', 1000);
                                      
         </script>
   

What is the wrong I am doing and How to show the timer for every record

asked Aug 17, 2020 at 3:47

MithuMithu

6651 gold badge7 silver badges34 bronze badges

5

Your function name and call should also be unique.

EDIT

Also you messed up a log of code. I have commented the foreach loop and put my own for loop. Modify accordingly

Try this.

<?php 


$my_course['course_id'] = 0;

for($i = 0; $i <= 2; $i++):
// foreach ($my_courses as $my_course):
// $course_details = $this->crud_model->get_course_by_id($my_course['course_id'])->row_array();

// You need to comment this out when you put your code live
$course_details['is_onlineclass'] = "Yes"; 
$course_details['live_class_schedule_time'] = time() + rand(0, 300); 
$my_course['course_id'] += 1;
// remove till here

if ($course_details['is_onlineclass']==='Yes'):
?>
    <span style="display:inline-block;font-size:12px;font-color:crimson;">
    <?php 
        $t=$course_details['live_class_schedule_time'];
                                    
        //time difference in seconds for coundown timer
        $date = new DateTime();
        $date2 = new DateTime(date("yy-m-d h:i:s a", $t));  
        $diff = $date->getTimestamp() - $date2->getTimestamp() ;
    ?>
    </span>
                                
    <span  id="<?php echo $my_course['course_id']; ?>" class="timer" style="font-size:smaller;color:crimson;"></span>                                     
<?php endif; ?>
                            
<script>
    var initialTime = <?php echo $diff; ?>

    var seconds = initialTime;
    function timer<?php echo $my_course['course_id'];?>() {
        var days        = Math.floor(seconds/24/60/60);
        var hoursLeft   = Math.floor((seconds) - (days*86400));
        var hours       = Math.floor(hoursLeft/3600);
        var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
        var minutes     = Math.floor(minutesLeft/60);
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds; 
        }
        document.getElementById('<?php echo $my_course['course_id']?>').innerHTML = days + "days " + hours + "hours " + minutes + "min " + remainingSeconds+ "sec left";
        if (seconds == 0) {
            learInterval(countdownTimer);
            document.getElementById('<?php echo $my_course['course_id']?>').innerHTML = "Completed";
        } else {
            seconds--;
        }
    }
    var countdownTimer = setInterval('timer<?php echo $my_course["course_id"];?>()', 1000);
                                
    </script>
<?php endfor; ?>

EDIT: Here is your code

<?php 

foreach ($my_courses as $my_course):
$course_details = $this->crud_model->get_course_by_id($my_course['course_id'])->row_array();


if ($course_details['is_onlineclass']==='Yes'):
?>
    <span style="display:inline-block;font-size:12px;font-color:crimson;">
    <?php 
        $t=$course_details['live_class_schedule_time'];
                                    
        //time difference in seconds for coundown timer
        $date = new DateTime();
        $date2 = new DateTime(date("yy-m-d h:i:s a", $t));  
        $diff = $date->getTimestamp() - $date2->getTimestamp() ;
    ?>
    </span>
                                
    <span  id="<?php echo $my_course['course_id']; ?>" class="timer" style="font-size:smaller;color:crimson;"></span>                                     
<?php endif; ?>
                            
<script>
    var initialTime = <?php echo $diff; ?>

    var seconds = initialTime;
    function timer<?php echo $my_course['course_id'];?>() {
        var days        = Math.floor(seconds/24/60/60);
        var hoursLeft   = Math.floor((seconds) - (days*86400));
        var hours       = Math.floor(hoursLeft/3600);
        var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
        var minutes     = Math.floor(minutesLeft/60);
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds; 
        }
        document.getElementById('<?php echo $my_course['course_id']?>').innerHTML = days + "days " + hours + "hours " + minutes + "min " + remainingSeconds+ "sec left";
        if (seconds == 0) {
            learInterval(countdownTimer);
            document.getElementById('<?php echo $my_course['course_id']?>').innerHTML = "Completed";
        } else {
            seconds--;
        }
    }
    var countdownTimer = setInterval('timer<?php echo $my_course["course_id"];?>()', 1000);
                                
    </script>
<?php endforeach; ?>

answered Aug 17, 2020 at 5:11

ChilaraiChilarai

1,8342 gold badges13 silver badges27 bronze badges

14