javascript - ForEach 循环内的倒数计时器 PHP

Question

我试图在 Foreach 循环内为 PHP Codeigniter 框架中的每条记录显示一个倒计时器，它基本上显示当前日期和 mysql 数据库日期值之间的 Datediff 作为剩余天数，下面是我的代码。问题是仅显示单个记录的倒计时器，而不是我需要的每条记录

 <?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>
   

我做错了什么以及如何显示每条记录的计时器

Answer 1

您的函数名称和调用也应该是唯一的。

编辑

你还搞乱了代码日志。我已经注释了 foreach 循环 并添加了我自己的 for 循环。相应修改

试试这个。

<?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; ?>

编辑:这是您的代码

<?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; ?>