Как я могу переключиться с секунд на минуты и часы в подсчете jQuery

#jquery

Вопрос:

Ниже у меня есть таймер подсчета, который показывает часы, минуты и секунды, но я бы хотел, чтобы это показывало только более высокое значение, которое не равно 0, а затем добавляло соответствующее имя, т. Е.

  • Если отсчет идет между 00:00:00 и 00:00:59, я бы хотел, чтобы он показывал, т. е. 49 секунд
  • Когда между 00:01:00 и 00:59:59 я бы хотел, чтобы он отображался, т. е. 26 минут
  • Когда между 00:59:59 и 23:59:59 я бы хотел, чтобы он отображался, т. е. 13 часов

(Если это возможно, я бы даже хотел, чтобы он показывал дни, но в этом нет необходимости)

Возможно ли это вообще, и если да, то как я могу этого достичь?

Мой первоначальный сценарий:

 function startCount() {  setInterval(function() {  $(".count").text(function() {  var val =  $(this).data("secs");  $(this).data("secs",  val);  return new Date(val * 1000).toISOString().substr(11, 8);  })  }, 1000); } startCount() 
 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt;   lt;div class="count" data-secs="89895"gt;lt;/divgt; 

Комментарии:

1. «возможно ли это вообще» — Да. «и если да, то как я могу этого достичь?» — С помощью математики и s if

2. Стоит отметить, что если вы «даже хотели бы, чтобы он показывал дни», интервал JS не особенно надежен (когда дело доходит до точного времени), интервал 1000 мс составляет примерно 1000 мс, поэтому вы обычно будете иметь сложные ошибки, если оставите его включенным на значительное время.

3. Спасибо @Andreas за математику, о которой я знал, моя проблема в том, что этот тип jQuery намного превосходит мои навыки работы с jQuery .. Я попытался поискать в Google, чтобы узнать, смогу ли я каким-то образом найти документацию о том, как форматировать выходные данные, учитывая мой первоначальный сценарий, и как можно поменять подстроку в зависимости от значения, но до этого момента я нашел только некоторые старые документы, с которыми я не смог работать. Я понимаю основы jQuery, но все еще новичок в jQuery.

4. хорошая мысль @DBS, но я не думаю, что это будет проблемой, так как пользователь может находиться на одной странице не более пары часов, и когда они снова войдут, она будет обновлена .. это не для отображения 24/7.

Ответ №1:

Математическая задача, надеюсь, это желаемый результат.

 function startCount() {  $('.count').data('initial', new Date().getTime() - ($('.count').data('secs') || 0) * 1000);  setInterval(function() {  $(".count").text(function() {  const diff = new Date().getTime() - $(this).data('initial');  if (Math.floor(diff / (24 * 3600000)) gt; 0) {  return Math.floor(diff / (24 * 3600000))   'd'; // more than 1 day  } else if (Math.floor(diff / 3600000) gt; 0) {  return Math.floor(diff / 3600000)   'h'; // more than 1 hour  } else if (Math.floor(diff / 60000) gt; 0) {  return Math.floor(diff / 60000)   'm'; // more than 1 minute  } else {  return Math.floor(diff / 1000)   's';  }  })  }, 1000); } startCount() 
 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt;   lt;div class="count" data-secs="0"gt;lt;/divgt; 

Комментарии:

1. БОЛЬШОЕ ВАМ спасибо @PROGU_ !! Это определенно то, что я искал! .. Спасибо вам за вашу любезную помощь 🙂