Я хочу сделать таймер обратного отсчета на двух разных кнопках, которые будут отключены навсегда через 5 минут, даже при обновлении он останется отключенным. Как я могу сделать это в javascript или jquery или ajax? Я просто не могу сделать это для моего кода. Кнопка отправки должна быть отключена через 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"> ₨<?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> Используйте setTimeout , объясненный здесь, чтобы установить таймер на элементе.
function disableElement(){ $('#elementId').prop('disabled', true); } setTimeout(disableElement, 5*60*1000);
Тем не менее, чтобы решить часть «persist on refresh», вы можете сохранить данные об изменении статуса на стороне сервера или использовать 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>
Заметка:
Как упоминалось на этой странице, нам нужно объявить переменную timer глобальной переменной, чтобы clearTimeout работал правильно.
Основываясь на хорошем ответе Сарата (+1). , ,
Поскольку вы отметили свой вопрос с помощью PHP и AJAX, вы также можете сделать это, используя переменную PHP $_SESSION .
Переменные PHP $_SESSION хранятся на сервере и специфичны для одного посетителя (cookie хранится на компьютере посетителя, который совпадает с переменной на сервере, что создает индивидуальную, постоянную SESSION ).
AJAX:
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); } } }); }
ajax.php
<?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; }
Важное примечание: переменные SESSION не сохраняются навсегда. Когда браузер закрыт, сеанс исчезнет. Чтобы сохранить сеансы «навсегда» (или, по крайней мере, отскакивая от браузера), используйте таблицу MySQL. Что вы храните в базе данных MySQL? Вы можете хранить IP-адрес посетителя, но это не является надежным, поскольку они со временем меняются … но теперь вы очень близки к системе входа пользователя.
Обратите внимание, что есть проблемы с использованием localstorage . Это сообщение может быть полезно:
Когда localStorage очищается?
Я начну с сохранения времени, в которое вы собираетесь отключить кнопки в локальном хранилище, установите таймер и проверьте это время при последующих перезагрузках.
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); } })