堆栈内存溢出
  繁体   English   中英

将数据从 php foreach 循环传递到 javascript

[英]Pass data from php foreach loop to javascript

 原文  2020-06-24 08:40:33  0   2    javascript/ php/ foreach/ html-table/ countdowntimer

问题描述

我试图将 javascript 倒计时添加到一个表中，该表位于 php foreach
我的 php 代码如下所示：

<?php
    global $wpdb, $indeed_db;
    $user = wp_get_current_user();
    $userid = $user->ID; 
    $woo_orders = $wpdb->get_results("SELECT * FROM wp8u_wc_order_product_lookup");
    foreach ($woo_orders as $print ){
        $order_id = $print->order_id; 
        $woo_customer_id = $print->customer_id;  
        $woo_customer = $wpdb->get_results("SELECT * FROM wp8u_wc_customer_lookup where customer_id=$woo_customer_id");
        foreach($woo_customer as $print2){
            $current_user_uid = $print2->user_id;
        }
        $date1 = strtotime($print->date_created);
        $date2 = strtotime("+1 months", $date1);
        $date_created = date('Y-m-d H:i:s', $date1);                                    
        $date_after = date('Y-m-d H:i:s', $date2);                                   
        $amount = $print->product_net_revenue;                                                                      
        if($userid == $current_user_uid){                                               
                ?><table>
                    <tr>
                        <th>Order ID</th>
                        <th>My ID</th>
                        <th>My Customer ID</th>
                        <th>Create Date</th>
                        <th>Date After 1 Month</th><
                        <th>Amount</th>
                    </tr>
                    <tr>
                        <td><?php echo "$order_id";?></td>
                        <td><?php echo "$current_user_uid";?></td>
                        <td><?php echo "$woo_customer_id";?></td>
                        <td><?php echo "$date_created";?></td>
                        <td><?php echo "$date_after";?></td>
                        <td><?php echo "$amount";?></td>
                        <td id="demo2"></td>
                    </tr>
                </table><?php
             }
}
 ?>

这是我的 output 之前的上述 php 代码：

Order ID |  My ID | My Customer ID |    Create Date         |   After 1 month       |   Amount   |   Timer  |
126         37          9               2020-06-24 13:45:35     2020-07-24 13:45:35     3000
Order ID |  My ID | My Customer ID |    Create Date         |   After 1 month       |   Amount   |   Timer  |
123         37          9               2020-06-22 12:01:14     2020-07-22 12:01:14     1000

所以我试图在“计时器”列下的两行添加倒数计时器
这是我的 java 脚本倒计时计时器代码：

<script>
    function createCountDown(elementId, date){
        var countDownDate = new Date(date).getTime();
        var x = setInterval(function(){
            var now = new Date().getTime();
            var distance = (countDownDate) - (now);
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
            document.getElementById(elementId).innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
            if (distance < 0)
            {
              clearInterval(x);
              document.getElementById(elementId).innerHTML = "SUCCESS";
            }
        }, 1000);
    }createCountDown("demo", <?php echo "$date_after"; ?>)
</script>

如何将此 javascript 倒数计时器添加到表中？

2 个解决方案

解决方案1
 0  2020-06-24 08:43:21

尝试这个：

createCountDown("demo", <?= "'{$date_after}'"; ?>)

解决方案2
 0 已采纳  2020-06-24 11:14:59

我快速拼凑了一个演示来展示如何在不使用 ID 属性的情况下实现目标。 我假设表中的每一行都应该显示一个倒数计时器？，sql，顺便说一句，看起来像是一个合适的join候选者——这意味着使用单个查询，但这完全是另一回事~只是想我会提一下。

如果您复制/运行它，您应该会看到它是如何工作的——生成的表包含虚拟数据。

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <style>
            body{font-family:monospace}
            table{margin:0 auto 3rem auto;width:60%;float:none;border:1px solid gray;}
            th{background:gray;color:white}
            .timer{color:red}
        </style>
        <script>
            /*
                The function now accepts a DOM element as the first argument
                rather than a string to represent the ID of a DOM element.
                The original element has had it's ID replaced with a className
                and, to make DOM navigation easier, the table-cell that holds
                the date used in the countdown also has a className assigned.
            */
            function createCountDown(n, date){
                var countDownDate = new Date( date ).getTime();
                var x = setInterval( function(){
                    var now = new Date().getTime();
                    var distance = countDownDate - now;
                    
                    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                    
                    n.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
                    
                    if( distance < 0 ) {
                        if( !isNaN( x ) )clearInterval( x );
                        n.innerHTML = "SUCCESS";
                    }
                }, 1000 );
            }
            
            /*
                Using the `.timer` className find a collection of all table-cells
                that will display a countdown.
                
                Iterate through that nodelist collection, find the sibling row 
                with the date and assign the countdown.
            */
            document.addEventListener( 'DOMContentLoaded',()=>{
                Array.from( document.querySelectorAll( 'td.timer' ) ).forEach( td=>{
                    /*
                        find the sibling table-cell according to it's assigned className
                        and thus obtain the cell contents. Supply both as arguments to the
                        `createCountDown` function
                    */
                    let expiry_date=td.parentNode.querySelector( '.expiry' ).textContent;
                    createCountDown( td, expiry_date );
                });
            });
        </script>
    </head>
    <body>
        <?php
            for( $i=1; $i <= 5; $i++ ){
            
                $h=mt_rand(8,18);
                $m=mt_rand(1,59);
                $s=mt_rand(1,59);
                $month=date('m');
                $day=mt_rand(1,29);
                $year=2020;
                
                $created=date('Y-m-d H:i:s',mktime($h,$m,$s,$month,$day,$year));
                $expires=date('Y-m-d H:i:s',mktime($h,$m,$s,$month+1,$day,$year));
                
                printf(
                    '
                    <table>
                        <tr>
                            <th>Order ID</th>
                            <th>My ID</th>
                            <th>My Customer ID</th>
                            <th>Create Date</th>
                            <th>Date After 1 Month</th>
                            <th>Amount</th>
                            <th>Countdown</th>
                        </tr>
                        <tr>
                            <td>$order_id</td>
                            <td>$current_user_uid</td>
                            <td>$woo_customer_id</td>
                            <td>%s</td>
                            <td class="expiry">%s</td>
                            <td>$amount</td>
                            <td class="timer"></td>
                        </tr>
                    </table>
                    ',
                    $created,
                    $expires
                );
            }
        ?>
    </body>
</html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 来自PHP foreach循环的Javascript getElementById JavaScript中的PHP foreach循环 从 laravel balde 获取 foreach 循环的值并将其传递给 javascript 函数 来自PHP中的foreach的Javascript数据。 将数据从 javascript forEach 循环中的 php 数组发送到 Z2705A83A5A06659CCE34Z5839 的 url 调用 如何将当前变量从PHP Blade foreach传递给javascript？ 在php foreach结果中循环javascript PHP中的foreach循环以构造javascript PHP，HTML，Javascript-从foreach循环创建交互式下拉菜单 如何使用javascript从PHP Foreach循环中获取隐藏输入的值
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM