为每个表行jsp添加倒数计时器

Question

我有一张看似喜欢的桌子

我想为包含任何时间的每一行添加倒计时，如果订单时间列包含20比计时器应该从20:00到00:00倒计时并发出哔哔声，一个很大的帮助真的很明显

  

注意：我的潜水表每2秒后自动刷新一次，所以当倒计时时，它会被重置。记住这一点，请回答我的回答

这就是我的jsp代码看起来像

   <table class="table table-striped">
                        <thead>
                            <tr>
                               <th>Id</th>
                                <th>Order Name</th>
                                <th>Order Price</th>
                                <th>Order Time</th>
                                <th>Order Quantity</th>
                                <th>Special Instruction</th>
                                <th>Table No</th>
                                <th>Waiter Name</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                       <tbody>
                    <%@ page import="java.sql.Connection" %>
                    <%@ page import="java.sql.DriverManager" %>
                    <%@ page import="java.sql.SQLException" %>
                    <%@ page import="java.sql.Statement" %>
                    <%@ page import="java.sql.ResultSet" %>

                    <%

                    Connection con = null;
                    Statement stmt = null;
                    final String uname = "root";
                    final String pass = "";
                    final String url =         "jdbc:mysql://localhost:3306/ermanager";

                    Class.forName("com.mysql.jdbc.Driver");
                     con = DriverManager.getConnection(url, uname, pass);

                     stmt = con.createStatement();

                     String query="SELECT * from currentorders";
                    ResultSet rs = stmt.executeQuery(query);


                    while(rs.next())
                    {


                    %>
                     <tr class="active">
                     <td><%=rs.getString(1)%> </td>
                     <td><%=rs.getString(2)%> </td>
                     <td><%=rs.getString(3)%> </td>
                     <td><%=rs.getString(4)%> </td>
                     <td><%=rs.getString(5)%> </td>
                     <td><%=rs.getString(6)%> </td>
                     <td><%=rs.getString(7)%> </td>
                     <td><%=rs.getString(8)%> </td>
                     <td><a href="DeleteMess?id=<%=rs.getString(1)%>"><span class="glyphicon glyphicon-trash"></span></a></td>
                     <td><a href="UpdateMess.jsp?id=<%=rs.getString("Id")%>"><span class="glyphicon glyphicon-pencil"></span></a></td>
                     </tr>   
                     <%
                 }
   %>
               </tbody>
           </table>

Answer 1

在<th>Order Time</th>后面添加一个新列以显示倒计时

 <table class="table table-striped" id=orderTable>
                    <thead>
                        <tr>
                           <th>Id</th>
                            <th>Order Name</th>
                            <th>Order Price</th>
                            <th>Order Time</th>
                            <th>Countdown</th>
                            <th>Order Quantity</th>
                            <th>Special Instruction</th>
                            <th>Table No</th>
                            <th>Waiter Name</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                   <tbody>
                <%@ page import="java.sql.Connection" %>
                <%@ page import="java.sql.DriverManager" %>
                <%@ page import="java.sql.SQLException" %>
                <%@ page import="java.sql.Statement" %>
                <%@ page import="java.sql.ResultSet" %>

                <%

                Connection con = null;
                Statement stmt = null;
                final String uname = "root";
                final String pass = "";
                final String url =         "jdbc:mysql://localhost:3306/ermanager";

                Class.forName("com.mysql.jdbc.Driver");
                 con = DriverManager.getConnection(url, uname, pass);

                 stmt = con.createStatement();

                 String query="SELECT * from currentorders";
                ResultSet rs = stmt.executeQuery(query);


                while(rs.next())
                {


                %>
                 <tr class="active">
                 <td><%=rs.getString(1)%> </td>
                 <td><%=rs.getString(2)%> </td>
                 <td><%=rs.getString(3)%> </td>
                 <td><%=rs.getString(4)%> </td>
                 <td> </td>
                 <td><%=rs.getString(5)%> </td>
                 <td><%=rs.getString(6)%> </td>
                 <td><%=rs.getString(7)%> </td>
                 <td><%=rs.getString(8)%> </td>
                 <td><a href="DeleteMess?id=<%=rs.getString(1)%>"><span class="glyphicon glyphicon-trash"></span></a></td>
                 <td><a href="UpdateMess.jsp?id=<%=rs.getString("Id")%>"><span class="glyphicon glyphicon-pencil"></span></a></td>
                 </tr>   
                 <%
             }
 %>
           </tbody>
       </table>


 <embed src="success.wav" autostart="false" width="0" height="0" id="sound1"
    enablejavascript="true">

并使用此javscript填充倒数计时器

 <script>
 var table = document.getElementById("orderTable");
 for (var i = 1, row; row = table.rows[i]; i++) {
//iterate through rows
//rows would be accessed using the "row" variable assigned in the for loop

var orderTime= row.cells[3];
countDownTime = new Date(orderTime.innerHTML.replace(/-/g, "/")).getTime();
var countDown = row.cells[4];
// Update the count down every 1 second

var x = setInterval(
function () {
    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an 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);


    // Display the result in the element
    countDown.innerHTML = (days + "d " + hours + "h "
        + minutes + "m " + seconds + "s ");

     //If the count down is finished, write some text 
    if (distance < 0) {
        clearInterval(x);
        countDown.innerHTML = "Finish";
        PlaySound("sound1");
    }
  }, 1000);
 }
   function PlaySound(soundObj) {
   var sound = document.getElementById(soundObj);
   sound.Play();
 }
  </script>

查看类似的实施Here