Estoy tratando de agregar la cuenta regresiva de JavaScript en una tabla, que esta tabla se encuentra en php foreach
Mi código php es así:

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

Esta es mi salida anterior para el código php anterior:

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    

Así que estoy tratando de agregar un temporizador de cuenta regresiva a ambas filas en la columna "Temporizador"
y este es mi código de temporizador de cuenta atrás de script 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>

¿Cómo agrego este temporizador de cuenta regresiva de JavaScript a la tabla?

0
Lennon Goh 24 jun. 2020 a las 11:40

2 respuestas

Prueba esto:

createCountDown("demo", <?= "'{$date_after}'"; ?>)
0
Araz Jafaripur 24 jun. 2020 a las 08:43

Rápidamente elaboré una demostración para mostrar cómo podrías lograr tu objetivo sin usar los atributos de ID. ¿Supuse que cada fila de la tabla debería mostrar un temporizador de cuenta regresiva? El sql, por cierto, parece un candidato adecuado para un join, lo que significaría usar una sola consulta, pero eso es algo completamente diferente ~ solo pensé en mencionarlo.

Si copia / ejecuta esto, debería ver cómo funciona: las tablas que se generan contienen datos ficticios.

<!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>
0
Professor Abronsius 24 jun. 2020 a las 11:14