我正在开发一个简单的POS餐厅点餐系统。在这里，用户可以将商品添加到购物车中，并轻松结账。我试图实现用户在特定时间只能点击一次结账按钮，当时间结束时，按钮再次启用。
到目前为止，我已经禁用了特定时间的按钮，但这不是一个好的解决方案，因为当页面刷新时，按钮会再次启用。
演示：可以在这里找到。
Html:
<body>
<div>
<button>checkout</button>
</div>
</body>
Jquery：
$.fn.disableFor = function(mins, secs) {
var i = [],
play = [];
this.click(function() {
var selector = $(this),
inDex = $(selector).index(),
prevText = $(selector).text();
i[inDex] = 0;
var inSeconds = mins * 60 + secs;
$(selector).prop("disabled", "disabled");
play[inDex] = setInterval(function() {
if(inSeconds > 60){
inSeconds = inSeconds - 1;
var minutes = Math.floor(inSeconds / 60);
var seconds = inSeconds % 60;
if(minutes >= 1){
if(seconds.toString().length > 1){
$(selector).text(minutes + ":" + seconds + " minutes left");
}else{
$(selector).text(minutes + ":" + "0" + seconds + " minutes left");
}
}else{
$(selector).text(seconds + " seconds left");
}
}else{
if(inSeconds > 1){
inSeconds = inSeconds - 1;
if(inSeconds.toString().length > 1){
$(selector).text(inSeconds + " seconds left");
}else{
$(selector).text("0" + inSeconds + " seconds left");
}
}else{
$(selector).prop("disabled", "");
clearInterval(play[inDex]);
$(selector).text(prevText);
}
}
}, 1000);
});
};
$(function() {
$("button").disableFor(2,0); // First parameter stands for minutes and the second for the seconds.
});
您需要使用浏览器localStorage来存储秒。
一旦您点击结账按钮，我们将setItem时间作为seconds-在setIterval中，我们将不断更新按钮中的剩余时间，一旦时间达到结束限制，我们将使用removeItem从browser中删除localStorage。
如果用户刷新结账页面(这就是您的问题所在(-我们单击结账按钮，我们将检查localStorage中是否还有我们之前设置的密钥的剩余时间。
如果没有剩余时间，我们将使用1 minutes and 15 seconds启动时钟，否则我们将在剩余时间使用localStorage中的getItem启动start。
我已经测试了这个代码，它运行得很好。
演示：(您需要在自己的浏览器中尝试此操作-此代码段不支持localStorage。(
$.fn.disableFor = function(mins, secs) {
var i = [],
play = [];
this.click(function() {
var selector = $(this),
inDex = $(selector).index(),
prevText = $(selector).text();
i[inDex] = 0;
//Store seconds
var inSeconds = mins * 60 + secs;
//Get the previous stored seconds - check local storage
var retrievedObject = localStorage.getItem('time');
if (retrievedObject) {
inSeconds = retrievedObject
}
//Disable button
$(selector).prop("disabled", "disabled");
play[inDex] = setInterval(function() {
if (inSeconds > 60) {
localStorage.setItem('time', inSeconds); //Set time again
inSeconds = inSeconds - 1;
var minutes = Math.floor(inSeconds / 60);
var seconds = inSeconds % 60;
if (minutes >= 1) {
if (seconds.toString().length > 1) {
$(selector).text(minutes + ":" + seconds + " minutes left");
} else {
$(selector).text(minutes + ":" + "0" + seconds + " minutes left");
}
} else {
$(selector).text(seconds + " seconds left");
}
} else {
localStorage.setItem('time', inSeconds); //Set time again
if (inSeconds > 1) {
inSeconds = inSeconds - 1;
if (inSeconds.toString().length > 1) {
$(selector).text(inSeconds + " seconds left");
} else {
$(selector).text("0" + inSeconds + " seconds left");
}
} else {
localStorage.removeItem('time');
$(selector).prop("disabled", "");
clearInterval(play[inDex]);
$(selector).text(prevText);
}
}
}, 1000);
});
};
$(function() {
$("button").disableFor(1, 15); // First parameter stands for minutes and the second for the seconds.
});div {
margin: 0 auto;
padding: 10px;
vertical-align: middle;
background-image: -moz-linear-gradient(bottom, white 0%, #CCC 100%);
background-image: -o-linear-gradient(bottom, white 0%, #CCC 100%);
background-image: -webkit-linear-gradient(bottom, white 0%, #CCC 100%);
background-image: -ms-linear-gradient(bottom, white 0%, #CCC 100%);
background-image: linear-gradient(bottom, white 0%, #CCC 100%);
}
button {
color: #2b2b2b;
text-shadow: 0 1px 0 #999;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
margin: 0 5px;
border-radius: 12px;
-moz-box-shadow: 4px 4px 4px #CCC;
-o-box-shadow: 4px 4px 4px #CCC;
-ms-box-shadow: 4px 4px 4px #CCC;
-webkit-box-shadow: 4px 4px 4px #CCC;
box-shadow: 4px 4px 4px #CCC;
}
button:hover {
color: #3c3c3c;
background-image: -moz-linear-gradient(top, #CCC 0%, white 20%, #666 100%);
background-image: -o-linear-gradient(top, #CCC 0%, white 20%, #666 100%);
background-image: -ms-linear-gradient(top, #CCC 0%, white 20%, #666 100%);
background-image: -webkit-linear-gradient(top, #CCC 0%, white 20%, #666 100%);
background-image: linear-gradient(top, #CCC 0%, white 20%, #666 100%);
}
button:disabled {
color: #999;
cursor: default;
background: #CCC;
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div>
<button>checkout</button>
</div>
</body>我认为这段代码非常不言自明。如果有什么不清楚的地方，请告诉我。
我使用了localStorage(就像AlwaysHelping在他的回答中一样(，不幸的是，它在StackOverflow的沙箱中不起作用。你可以将其保存为一个html文件，并在本地打开它进行测试
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div>
<button>checkout</button>
</div>
</body>
<script>
const button = $('button');
const pauseTime = 8 * 1000; // 8 seconds
let cache = retrieveDisableTime();
let disabledTime;
let currentTime;
let interval;
button.on('click', function(){
disabledTime = + new Date();
cache = {time: disabledTime};
saveDisableTime(cache);
button.prop("disabled", "disabled");
setTimer();
});
if(shouldButtonBeOff()) {
button.prop("disabled", "disabled");
setTimer();
}
function shouldButtonBeOff() {
disabledTime = cache ? cache.time : false;
currentTime = + new Date();
return disabledTime && disabledTime + pauseTime > currentTime;
}
function setTimer() {
interval = setInterval(function() {
console.log('Not yet ready');
if(!shouldButtonBeOff()) {
console.log('READY');
button.prop("disabled", false);
clearInterval(interval);
}
}, 1000);
}
function saveDisableTime(obj) {
localStorage.setItem('disableButton', JSON.stringify(obj));
}
function retrieveDisableTime() {
return JSON.parse(localStorage.getItem('disableButton'));
}
</script>试试这个：
//start cookies functions
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function removeCookie(cname) {
document.cookie = cname+"=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}
//end cookies functions
var cookieCheckout = getCookie('checkouttime');
var secondsTimeout = 0;
var delayTime = 2*60;
if (cookieCheckout && cookieCheckout != "") {// if we have cookie then set cookie seconds, when load page
secondsTimeout = delayTime - Math.round((Date.now() - parseInt(cookieCheckout)) / 1000);
if (secondsTimeout > delayTime) {
removeCookie('checkouttime');
//make checkout button enable
} else {
//make checkout button disable
}
}
setCookie('checkouttime', Date.now(), 30);// set timestamp, when you click on enable checkout
if (secondsTimeout > delayTime) { //if time more then need limit then refresh timer, inside interval
removeCookie('checkouttime');
//make checkout button enable
}