Как отключить кнопку отправки в javascript после истечения срока - PullRequest
Новая
       29

Как отключить кнопку отправки в javascript после истечения срока

0 голосов
/ 08 апреля 2020

Как отключить кнопку отправки в JavaScript после истечения срока.

Пожалуйста, мне нужно отправить кнопку, которую нужно забрать после истечения срока, или вернуть уведомление о том, что срок истек.

Спасибо 

<body>
  <h2>Welcome! </h2>
  <p>Please find below your responsibilities for the month</p>

  <div class=t ask> Task 1 </div>
  <p>Please Submit your report in the space below</p>
  <h3 style="color: red"> DEADLINE: 20/04/2020</h3>
  <form>
    <textarea>
    </textarea> <br> <br>
    <button>Submit</button>
  </form>
</body>

1 Ответ

0 голосов
/ 08 апреля 2020

Вы можете использовать вызов windows.setTimeout, чтобы вызвать событие, чтобы скрыть кнопку отправки. Чтобы вычислить количество миллисекунд в будущем, когда это событие должно произойти, вы создаете объект Date с датой 4/20/2020 и второй объект Date с текущей датой. Затем вы вызываете getTime() для обоих этих объектов. Эта функция определяется следующим образом: 

Returns the numeric value of the specified date as the number of milliseconds since January 1, 1970, 00:00:00 UTC.

Разница между этими двумя значениями заключается в количестве миллисекунд в будущем 4/20/2020 12:00:00 AM и должна быть аргументом для вызова window.setTimeout. Для следующей демонстрации, после того, как этот расчет сделан, вычисленное значение переопределяется на 10000 мс. для демонстрационных целей: 

document.addEventListener('DOMContentLoaded', function(event) {
  let deadline = new Date(2020, 4, 20); // at 12:00 AM
  let now = new Date(); // current date and time
  let milliseconds = deadline.getTime() - now.getTime();
  milliseconds = 10000; // set to 10 seconds for testing purposes
  let submit = document.getElementById('submit');
  if (milliseconds > 0) {
    window.setTimeout(function() {
      submit.style.display = 'none';
    }, milliseconds);
  }
  else {
    submit.style.display = 'none';
  } 
});
<body>
  <h2>Welcome! </h2>
  <p>Please find below your responsibilities for the month</p>

  <div class=t ask> Task 1 </div>
  <p>Please Submit your report in the space below</p>
  <h3 style="color: red"> DEADLINE: 20/04/2020</h3>
  <form>
    <textarea>
    </textarea> <br> <br>
    <button id="submit">Submit</button>
  </form>
</body>

Комментарий, опубликованный developer , следует воспринимать всерьез. У вас также должна быть проверка на стороне сервера, чтобы проверить, была ли форма отправлена ​​в или после 4/20/2020 12:00:00 AM с использованием соответствующего часового пояса. На стороне клиента мы использовали местный часовой пояс, но разница в миллисекундах между двумя датами должна быть несколько независимой от часового пояса, хотя могут быть небольшие различия.

Если вы хотите чтобы быть точным в расчете количества миллисекунд до истечения, вы можете использовать: 

let deadline = new Date(2020, 4, 20).toLocaleString("en-US", {timeZone: "America/New_York"});
deadline = new Date(deadline);
let now = new Date().toLocaleString("en-US", {timeZone: "America/New_York"});
now = new Date(now);

Конечно, вы будете использовать любой часовой пояс, подходящий для вашего приложения. Обратите внимание, что после присвоения deadline = new Date(2020, 4, 20).toLocaleString("en-US", {timeZone: "America/New_York"}); вы получите объект Date, у которого нет функции getTime, и, следовательно, вам необходимо создать новый объект Date из этого.

...