Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы » Как подсчитать значение из нескольких input полей и перевести в часы?

Как подсчитать значение из нескольких input полей и перевести в часы?


     11.02.2020    jquery, javascript, input    Общие вопросы, jQuery    745

вопрос
Добрый день!
Есть четыре input, в которых указываю время готовки блюда, и есть поле, где должно выводиться уже общее время.
Поля для ввода разбиты на часы и минуты, также один input куда и должно выводиться общее время.
Те самые поля:

<!-- Время подготовки -->
<input class="hour" type="text" name="clock_hour" value="">
<input class="minut" type="text" name="clock_minut" value="">
<!-- Время приготовления -->
<input class="hour" type="text" name="clock_hour1" value="">
<input class="minut" type="text" name="clock_minut1" value="">
<!-- Общее время готовки -->
<input class="itog_time" type="text" name="itog_time" value="">

Как сделать, чтобы всё это заработало должным образом?
Набросок кода:

var totalSeconds = document.getElementsByTagName("clock_hour")[0].value() * 3600 +
      document.getElementsByTagName("clock_minut")[0].value()  * 60 + 
      document.getElementsByTagName("clock_hour1")[0].value() * 3600 + 
      document.getElementsByTagName("clock_minut1")[0].value()   * 60;

Заранее спасибо!

Ответил: monach


Разметка:

<div class="inputs-wrapper">
        <div class="cooking">
            <p>Время готовки:</p>
        <input class="hour cooking-hours" type="text" name="clock_hour" value="0">
        <input class="minut cooking-mins" type="text" name="clock_minut" value="0">
        </div>
        <div class="prep">
            <p>Время подготовки:</p>
            <input class="hour prep-hours" type="text" name="clock_hour1" value="0">
            <input class="minut prep-mins" type="text" name="clock_minut1" value="0">
        </div>
    </div>
    <div class="output-wrapper">
        <p>
            Общее время: 
            <span class="total-hours">00</span>:
            <span class="total-mins">00</span>
        </p>
    </div>

Сам JS:

        document.addEventListener('DOMContentLoaded', function(){
            let inputs = document.getElementsByTagName('input');
            for(let i = 0; i < inputs.length; i++){
                let input = inputs[i];
                input.addEventListener('change', function(e){
                    let timeInSeconds = valuesToSeconds();
                    sec2time(timeInSeconds);
                });
            }
        });

        function valuesToSeconds(){
            let totalSeconds = document.getElementsByClassName("cooking-hours")[0].value * 3600 +
                document.getElementsByClassName("cooking-mins")[0].value  * 60 + 
                document.getElementsByClassName("prep-hours")[0].value * 3600 + 
                document.getElementsByClassName("prep-mins")[0].value   * 60;
            return totalSeconds;
        }

        function sec2time(timeInSeconds) {
            var pad = function(num, size) { return ('000' + num).slice(size * -1); },
            time = parseFloat(timeInSeconds).toFixed(3),
            hours = Math.floor(time / 60 / 60),
            minutes = Math.floor(time / 60) % 60,
            seconds = Math.floor(time - minutes * 60),
            milliseconds = time.slice(-3);
            setOutput(pad(hours, 2), pad(minutes, 2));
        }

        function setOutput(hours, minutes) {
            document.getElementsByClassName("total-hours")[0].innerText = hours;
            document.getElementsByClassName("total-mins")[0].innerText = minutes;
        }


Если нужно выводит результат именно в input, поменяйте в JS в самом конце строк innerText на value

7 комментариев

LazyDev
PHP-developer

LazyDev - 11 февраля 2020 09:37 -

Вы можете использовать тип time вместо text, так будет проще

Мой блог: LazyDev.pro

Помогаю с решением проблем на платной основе.

monach
Юзер

monach - 11 февраля 2020 09:40 -

Согласен с вами. Как альтернатива,да. Но как теперь сделать подсчет в отдельное поле?

monach
Юзер

monach - 11 февраля 2020 09:58 -

Или как альтернативу использовать type="time".
Если использовать type="time", нужно чтобы часовые нули не показывались, допустим, у меня время задано лишь в минутах без часов (подготовка -- : 10) - (приготовление -- : 35), в таком случае на выходе получаем просто 45 без лишних знаков.

LazyDev
PHP-developer

LazyDev - 11 февраля 2020 10:15 -

это можно отфильтровать в js

Мой блог: LazyDev.pro

Помогаю с решением проблем на платной основе.

monach
Юзер

monach - 11 февраля 2020 10:19 -

Если бы я знал как это все реализовать, я бы сделал.
Я на первом этапе изучения js.

monach
Юзер

monach - 11 февраля 2020 11:11 -


Помогите, пожалуйста, решить один маленький нюанс.
Как сделать так, чтобы ноль не появлялся в начале часов, только в минутах был.
Чтобы на выходе было 3:40, а не 03:40.
Что нужно поправить в коде?

monach
Юзер

monach - 11 февраля 2020 10:55 -

Сам задал вопрос, сам и отвечу на него.
Может кому-то понадобиться такая штука, ответ выше.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх