Question

我想在两个不同的按钮上设置倒计时器，这些按钮将在5分钟后永久禁用，即使刷新它也将保持禁用状态。我怎样才能在javascript或jquery或ajax中创建它？我似乎无法为我的code.Cancel按钮在加载5分钟后禁用

<table cellspacing="0" cellpadding="0" border="0" class="tbl_repeat">

    <tr>
        <th>Table No</th>
        <th class="ta_r">Date</th>
        <th class="ta_r col_15">Status</th>
        <th class="ta_r col_15">Total</th>
    </tr>


        <tr>
            <td><?php echo $row['Table_id']; ?></td>
            <td class="ta_r"><?php echo Helper::setDate(1, $row['date']); ?></td>
            <td class="ta_r">
                <?php 
                    $status = $objOrder->getStatus($row['status']);
                    echo $status['name']; 
                ?>
            </td>
            <td class="ta_r">
                &#8360;<?php echo number_format($row['subtotal'], 2); ?>
            </td>
        </tr>
            <th class="ta_r col_15">Cancel Order</th>
            <th class="ta_r col_15">Order Timer</th>
            <tr>
            <td>

                <a href="/pages/delshow/delete.php?delete_id=<?php echo $row['id'];?>" id='abcd'>
                <button class="acount-btn" id="abcd">Cancel</button>
                </a>
            </td>

            <td>
                <a href="pages/countdown.php?timer=<?php echo $row['response'];?>" ><img src="pages/order-images/clock-circle.png"/>
                </a>
            </td>

        </tr>
        <br/><br/><br/>
    <?php } 
    else
    {

    }

    }
    ?>

</table>

Answer 1

使用setTimeout，解释here在元素上设置计时器。

function disableElement(){
  $('#elementId').prop('disabled', true);
}

setTimeout(disableElement, 5*60*1000);

然而，要解决＆＃34;坚持刷新＆＃34;另外，您可以在服务器端存储状态更改详细信息，或使用localStorage或$.cookie。根据您的申请要求。

基于localStorage的工作实施：

<html>
<head>
<script   src="https://code.jquery.com/jquery-2.2.3.js"   
    integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4="   
    crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
   var limit = 5*60*1000; // the time limit (in milliseconds) for the disable function
   var timer = setTimeout(disableMyButton, limit);

   function disableMyButton(){
      $('#myButton').prop('disabled', true);
      $("#statusMsg").text("Disabling before page refresh");
      localStorage.setItem("isMyButtonDisabled", "true");
   }

   if(localStorage.getItem("isMyButtonDisabled") == "true"){
     $("#statusMsg").text("Disabling after page refresh");
     $('#myButton').prop('disabled', true);
     window.clearTimeout(timer);
   }
});
</script>
</head>
<input type = "button" id= "myButton" value= "Click me" />
<p id="statusMsg" >  </p>
</html>

注意：

如this页面所述，我们需要将timer变量声明为全局变量，以使clearTimeout正常工作。

Answer 2

以Sarath的良好答案为基础（+1）。。

由于您已使用PHP和AJAX标记了问题，因此您也可以使用PHP $_SESSION变量执行此操作。

PHP $_SESSION变量存储在服务器上，并且特定于一个访问者（cookie存储在访问者的计算机上，与服务器上的变量匹配，从而创建个性化的，持久的{{1 }}）。

<强> AJAX：

SESSION

<强> ajax.php

var timerOn = true;
$(function(){ //same as $(document).ready(function(){
    checkDisabledElement();
    if (timerOn) var timerDisableElement = setTimeout(disableElement, 5*60*1000);

});


function checkDisabledElement(){
    //This check can be done in PHP while building the page, but for educational purposes let's do it here
    $.ajax({
        type: 'post',
         url: 'ajax.php',
        data: 'request=is_button_disabled',
        success: function(d){
            if (d = 1){
                $('#elementId').prop('disabled', true);
                timerOn = false;
            }else{
            }
        }
    });
}

function disableElement(){
    $.ajax({
        type: 'post',
         url: 'ajax.php',
        data: 'request=disable_button',
        success: function(d){
            if (d = 1){
                $('#elementId').prop('disabled', true);
                timerOn = false;
                clearTimeout(disableTimer);
            }
        }
    });
}

重要说明：<?php session_start(); //must be first instruction in PHP if ($_POST['request'] == 'is_button_disabled'){ if (isset($_SESSION['button_state']) && $_SESSION['button_state']=='disabled') echo 1; }else if ($_POST['request'] == 'disable_button'){ $_SESSION['button_state'] = "disabled"; echo 1; }变量不会永久存在。浏览器关闭后，该会话就会消失。要“永远”保存会话（或者至少通过弹跳浏览器），请使用MySQL表。你在MySQL数据库中存储了什么？您可以存储访问者的IP，但这并不是万无一失的，因为它们会随着时间的推移而改变......但您现在已经非常接近拥有用户登录系统。

请注意，使用SESSION时存在类似问题。这篇文章可能会有所帮助：

When is localStorage cleared?

Answer 3

我首先要存储您要禁用本地存储中按钮的时间，设置计时器并在后续重新加载时检查该时间。

var disableElement = function(){
    // Whatever you wanted to do on the timeout
    $('#elementId').prop('disabled', true);
};

$(document).ready(function(){
    if ( localStorage.getItem("disableTime") ) {
        var currentTime = new Date(),
            disableTime = new Date(localStorage.getItem("disableTime");

        if ( currentTime.getTime() < disableTime.getTime() ) {
           window.setTimeout(disableElement, disableTime.getTime() - currentTime.getTime());
        } else {
           disableElement();
        }
    } else {
        var disableTime = new Date(),
            minutes = 5*60*1000;
        localStorage.setItem("disableTime", new Date().getTime() + minutes);
        window.setTimeout(disableElement, minutes);
    }
})

制作按钮倒数计时器，即使在页面刷新5分钟后也会永久禁用，它应保持禁用状态

3 个答案: