Таймер обратного отсчета в Vanilla Javascript без использования функции - PullRequest
Новая
       25

Таймер обратного отсчета в Vanilla Javascript без использования функции

0 голосов
/ 12 июня 2019

У меня есть проект, где мне нужно сделать таймер обратного отсчета, однако никакая функция не может быть использована.Я знаю, что это можно сделать с помощью setInterval, однако большая часть документации, которую я нашел, показывает функцию, используемую совместно.У W3schools есть отличный пример, но он использовал функцию.Я знаю, как бы я это сделал с

. Я уже написал некоторый код и смог отобразить минуты и секунды, однако не смог заставить его фактически отсчитывать время.Есть ли способ сделать это без функции?

const timeSpan = document.getElementById('timer');

// Get Time Now
var timeMinutes = 10;
var currentTime = Date.parse(new Date());
var deadline = new Date(currentTime + timeMinutes * 60 * 1000);
var distance = deadline - currentTime;
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

timeSpan.innerHTML = minutes + 's' + seconds;

Показывает минуты и секунды, но без setInterval или setTimeOut он не будет вести обратный отсчет, как обычный таймер обратного отсчета.Для проекта необходимо отсчитать от десяти минут и в конце предупредить пользователя, у которого истек срок действия и что ему нужно будет обновить страницу.

Ответы [ 2 ]

1 голос
/ 12 июня 2019

Вам нужно убрать некоторые вещи из функции, так как вы сбрасываете таймер на каждом интервале. Вам также следует избегать сохранения своего времени в качестве объектов Date, поскольку вам нужны только временные метки. 

const timeSpan = document.getElementById('timer');

const mins = 10;
const now = new Date().getTime();
const deadline = mins * 60 * 1000 + now;


setInterval(() => {
  var currentTime = new Date().getTime();
  var distance = deadline - currentTime;
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  timeSpan.innerHTML = minutes + 's' + seconds;
}, 500)
<span id=timer></span>
0 голосов
/ 12 июня 2019

Вот версия без слова function: 

const timeSpan = document.getElementById('timer');
var timeMinutes = 10;
var deadline = new Date(new Date().getTime() + timeMinutes * 60 * 1000);

setInterval(()=>{
    var currentTime = new Date();
    var distance = deadline - currentTime;
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    timeSpan.innerHTML = minutes + 's' + seconds;
},500)

Это то, что вы ищете?

...