Javascript 正则表达式 一位十进制

Question

......... Javascript function

  function isNumberKey(evt)
       {
          var charCode = (evt.which) ? evt.which : evt.keyCode;
          if (charCode != 46 && charCode > 31 
            && (charCode < 48 || charCode > 57))
             return false;

          return true;
       }

this works well with numbers but for decimal it allows multiple decimals. i just want one decimal. thanks in advance

Answer 1

I use data-attributes here

Change date-start and date-end with $Ldate and $Bdate

But we need today's date somewhere no?

 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

I made an assumption that the display for the countdown should be associated to the row in the HTML table that is being rendered so if you assign a dataset attibute that refers to the element to be used as output one can easily target it via javascript. By assigning an attribute that combines the two relevant dates you can fudge around with those to set the start/end dates within the function body - assigned after the loop for convenience here.

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