Как я могу преобразовать входящие секунды в часы в JS?

В моем проекте Laravel 8 у меня есть страница для создателей контента. Эти страницы содержат общую информацию о производителях контента. Я хотел получить данные производителей контента из Алголии и сделал ссылку Алголии на свой проект. На странице есть раздел, который показывает, сколько часов и сколько минут есть у производителей контента, но эти данные хранятся в Algolia в секундах. Вот почему я хочу показать данные, поступающие на основе этой секунды в виде часов и минут на экране.

Данные из Алголии таковы. Данные о секундах также поступают из: "length"

{
  "id": 99,
  "user_id": 613,
  "isLearnBite": 0,
  "name": "Write the Brand Strategy of Your Business",
  "cover": "https://omnicoursewebsites.s3.eu-west-2.amazonaws.com/courses/99/images/cover/513230_1642578467.jpg",
  "color": "#fefefe",
  "description": "Many solopreneurs struggle to clarify their business strategy and marketing goals because they can't define who they are and what they offer as a brand. With this mini-course, you will be able to understand the basics of branding and write yourself a brand strategy document which will help you make a solid start and stay on your track for long years.",
  "short_description": "A solid, strategic start for your small business or start-up.",
  "length": 6783,
  "order": 0,
  "status_id": 1,
  "created_at": "2022-01-18T07:14:42.000000Z",
  "updated_at": "2022-01-19T12:48:29.000000Z",
  "custom_fields": {
    "dynamic_link": "https://omnicourse.page.link/cC8bZNQ6WhU1ahGS9"
  },
  "lectures_count": 27,
  "lecturer_name": "Nil Yalcinkaya",
  "lecturer_username": "nile_brand_academy",
  "lecturer_avatar": "https://omnicoursewebsites.s3.eu-west-2.amazonaws.com/creator_thumbnail/613/2022-03-29/thumbnail_400X400_985347_1638513165.jpg",
  "tags": [
    30,
    43,
    150,
    206
  ],
  "categories": [
    2
  ],
  "last_listened_data": null,
  "user_rating": 0,
  "isFavorited": false,
  "isBookMarked": false,
  "isCompleted": false,
  "creator_profile": {
    "name": "Nil Yalcinkaya",
    "username": "nile_brand_academy",
    "avatar": "https://omnicoursewebsites.s3.eu-west-2.amazonaws.com/creator_thumbnail/613/2022-03-29/thumbnail_400X400_985347_1638513165.jpg",
    "about": "Hi! \r\nI write brand strategies for digital start-ups of the future and design their visual brand identities. \r\nSee My Services: Nile Brand Design\r\nFollow & Join Our Community to Learn More about Branding: Nile Brand Academy",
    "custom_fields": {
      "email_octopus_id": "bc6ec095-69ec-11ec-96e5-06b4694bee2a",
      "email_octopus_last_update": "2022-03-26 00:48:58",
      "avatar_thumb_400*400": "https://omnicoursewebsites.s3.eu-west-2.amazonaws.com/creator_thumbnail/613/2022-03-29/thumbnail_400X400_985347_1638513165.jpg",
      "linkedin": "https://www.linkedin.com/in/nilyalcinkaya/",
      "instagram": "https://www.instagram.com/nile.brand.design/",
      "twitter": "https://twitter.com/nilsyalcinkaya",
      "website": "https://www.nilebrand.design/"
    }
  },
  "_tags": [
    "App\\Course::99"
  ],
  "objectID": "App\\Course::99"
}

Я показываю данные этого времени здесь. - показать.blade.php

@if(isset($content['length']))
    <div class="flex items-center space-x-6">
        <div class="flex items-center">
            <img src="/assets/images/icon-clock-black.svg" alt="">
            <span  class="text-sm md:text-base leading-6 font-normal ml-1">{{ $content['length'] }} hrs</span>
            <a href="{{ $content['length'] }}" target="_blank"><img src="/assets/images/icon-clock-black.svg" alt=""></a>
        </div>
        <div class="flex items-center">
            <img src="/assets/images/icon-list-black.svg" alt="">
            <span  class="text-sm md:text-base leading-6 font-normal ml-1">{{ $content['lectures_count'] }} Lessons</span>
        </div>
    </div>
@endif

Я думаю, мне нужно сделать это в JS, но я хотел спросить вас, потому что я не знаю, как это сделать.

поскольку эти данные отображаются из шаблона блейда.. возможно, лучшим подходом было бы просто выполнить требуемую арифметику там, прежде чем отображать значение: {{ $content['length'] / 3600 }} (если вам не нужно приводить к номеру перед операцией и без дальнейшего обработка для лучшего форматирования номера)

Diego D 21.11.2022 13:39

Это: stackoverflow.com/questions/6312993/…

Silent observer 21.11.2022 13:45

название вопроса совершенно не связано с самим вопросом ... и все ответы идут в этом фальшивом направлении

Diego D 21.11.2022 13:45
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
учебник по Javascript
учебник по Javascript
JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Принцип единой ответственности (SRP): класс должен иметь только одну причину для изменения. Другими словами, у него должна быть только одна...
JavaScript - For Loop
JavaScript - For Loop
Наиболее используемая компактная форма оператора цикла.
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
0
3
60
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно извлечь количество часов с помощью JS.

Самый простой способ сделать это — использовать Date Объект и toISOString() Метод.

const time = document.querySelector("#time");

const seconds = 6783;
let date = new Date(null);
date.setSeconds(seconds);

const [hours, minutes, sec] = date.toISOString().substr(11, 8).split(":");
time.textContent = `${hours} Hour(s), ${minutes} Minutes & ${sec} Seconds`;
<div id="time"></div>

на самом деле это не касается контекста вопроса. который.

Diego D 21.11.2022 13:45

@DiegoD В вопросе ясно сказано, что это нужно сделать в JS, и он не знает, как это сделать. Даже в заголовке спрашивается, как это сделать на JS, а не на PHP. Поэтому, пожалуйста, прочитайте вопрос полностью, прежде чем комментировать.

Shivangam Soni 21.11.2022 13:48

@ShivangamSoni Я очень хорошо знаю, о чем был задан вопрос, и поэтому я зашел достаточно глубоко, чтобы увидеть содержимое кода и понять, что ответ был просто адресован заголовку. Во всяком случае, если тот, кто спросил, доволен тем, кто я, чтобы сказать обратное. В этот момент я задаюсь вопросом, почему вопрос вообще нуждался во всем теле, поскольку для этого было достаточно самого заголовка.

Diego D 21.11.2022 14:08

Другие вопросы по теме