设置一个按钮倒数计时器，该计时器将在5分钟后永久禁用，即使在刷新页面时也应保持禁用状态 [英] Make a button countdown timer which will be permanently disabled after 5 minutes even on page refresh it should remain disabled
问题描述
我想在两个不同的按钮上设置一个倒数计时器，该按钮将在5分钟后永久禁用，即使刷新也将保持禁用状态.我如何在javascript或jquery或ajax中实现它?我似乎无法为我的代码做到这一点.取消按钮应在加载后的5分钟内被禁用
I want to make a count down timer on a two different buttons which will be permanently disabled after 5 minutes even on refresh it will remain disabled. How can i make it in javascript or jquery or ajax ? I just cant seem to make it for my code.Cancel button should be disabled in 5 minutes on load here
<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">
₨<?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>
推荐答案
Use setTimeout, explained here to set a timer on the element.
function disableElement(){
$('#elementId').prop('disabled', true);
}
setTimeout(disableElement, 5*60*1000);
但是，要解决持久刷新"部分，可以将状态更改详细信息存储在服务器端，或使用localStorage或$.cookie.根据您的应用要求.
However, to solve the "persist on refresh" part, you could store the status change details on the server side or use localStorage or $.cookie. according to your application requirement.
基于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>
注意:
如此页面中所述，我们需要将timer变量声明为一个使clearTimeout正常工作的全局变量.
As mentioned in this page, we need to declare the timer variable as a global variable for the clearTimeout to work properly.
这篇关于设置一个按钮倒数计时器，该计时器将在5分钟后永久禁用，即使在刷新页面时也应保持禁用状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
