Question

......... Javascript函数

 function myFunc(Ldate,Bdate){
// Set the date we're counting down to
//var countDownDate = Ldate.getTime();
var countDownDate = Ldate;

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  //var now = Bdate.getTime();
   var now = Bdate; 
  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  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);

  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
}

我的代码

 while($row = mysqli_fetch_assoc($WltQRslt)){ $Ldate = $row['LastDate']; $Bdate = $row['DateBought'];echo "
<tr ><td class='center'><i class='fa fa-database fa-3x' aria-hidden='true'></i>&nbsp;&nbsp;&nbsp;&nbsp;{$row['Server']}</td>
<td><i class='fa fa-line-chart fa-3x'></i>&nbsp;&nbsp;&nbsp;&nbsp;{$row['Profit']}</td>
<td><i class='fa fa-refresh fa-spin fa-3x fa-fw'></i>&nbsp;&nbsp;&nbsp;&nbsp;<script>myFunc($Ldate,$Bdate);</script></td>
</tr>";
}

我想通过传递来自数据库的日期作为参数来调用此函数。我无法做到这一点，请帮帮我。

Answer 1

我在这里使用数据属性

使用$ Ldate和$ Bdate更改日期开始和日期结束

但是我们需要今天的日期吗？

var x = setInterval(function() {
  [...document.querySelectorAll(".date")].forEach(el => {
    var diff = new Date(el.getAttribute("date-end")).getTime() - new Date().getTime(); // or date-end?
  
    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(diff / (1000 * 60 * 60 * 24));
    var hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((diff % (1000 * 60)) / 1000);

    el.innerHTML = diff < 0 ? "EXPIRED" : days + "d " + hours + "h " +
      minutes + "m " + seconds + "s ";
  })
}, 1000);

<table>
  <tbody>
    <tr>
      <td class='center'><i class='fa fa-database fa-3x' aria-hidden='true'></i>Server row 1</td>
      <td><i class='fa fa-line-chart fa-3x'></i>Profit row 1</td>
      <td><i class='fa fa-refresh fa-spin fa-3x fa-fw'></i><span class="date" date-start="2019-11-13 10:00:00" date-end="2020-01-01 10:00:00"></span></td>
    </tr>
    <tr>
      <td class='center'><i class='fa fa-database fa-3x' aria-hidden='true'></i>Server row 2</td>
      <td><i class='fa fa-line-chart fa-3x'></i>Profit row 2</td>
      <td><i class='fa fa-refresh fa-spin fa-3x fa-fw'></i><span class="date" date-start="2019-11-11 10:00:00" date-end="2019-12-01 10:00:00"></span></td>
    </tr>
  </tbody>
</table>

Answer 2

我假设倒计时的显示应与正在呈现的HTML表中的行相关联，因此，如果您分配了dataset装饰符，该装饰符引用了要用作输出的元素，则可以通过javascript轻松定位。通过分配将两个相关日期组合在一起的属性，您可以在功能主体中随意设置这些属性，以设置开始/结束日期-为方便起见，在此循环之后分配。

<?php

    while($row = mysqli_fetch_assoc($WltQRslt)){
        $Ldate = $row['LastDate'];
        $Bdate = $row['DateBought'];
        $id=sprintf('%s_%s',$Ldate,$Bdate);

        echo "
        <tr>
            <td class='center'>
                <i class='fa fa-database fa-3x' aria-hidden='true'></i>&nbsp;&nbsp;&nbsp;&nbsp;{$row['Server']}
            </td>
            <td>
                <i class='fa fa-line-chart fa-3x'></i>&nbsp;&nbsp;&nbsp;&nbsp;{$row['Profit']}
            </td>
            <td>
            <i class='fa fa-refresh fa-spin fa-3x fa-fw'></i>&nbsp;&nbsp;&nbsp;&nbsp;
                <div class='countdown' data-id='{$id}'></div>
            </td>
        </tr>";
    }

?>

<script>
    const countdown=function( id ){
        const INTERVAL=1000;
        const difference=function(n){
            let d=Math.floor( n / ( 1000 * 60 * 60 * 24 ) );
            let h=Math.floor( ( n % ( 1000 * 60 * 60 * 24 ) ) / ( 1000 * 60 * 60 ) );
            let m=Math.floor( ( n % ( 1000 * 60 * 60 ) ) / ( 1000 * 60 ) );
            let s=Math.floor( ( n % ( 1000 * 60 ) ) / 1000 );
            return d + "d " + h + "h " + m + "m " + s + "s";
        };

        let ldate=new Date( id.split('_')[0] ).getTime();
        let bdate=new Date( id.split('_')[1] ).getTime();

        let tx=setInterval( ()=>{
            bdate -= INTERVAL;
            let distance=ldate - bdate;

            let node=document.querySelector( 'div[ data-id="'+id+'" ]' );
                node.textContent=difference( distance );

            if( distance < 0 ){
                clearInterval( tx );
                node.textContent='EXPIRED';
            }
        },INTERVAL );
    }


    Array.from( document.querySelectorAll('div.countdown') ).forEach( div=>{
        countdown( div.dataset.id )
    });
</script>

JavaScript函数调用

2 个答案: