Ученик
Местоположение
Россия

Лучшие ответы пользователя

Все ответы (4)
  • Как сложить значение всех input type=time?

    @Monachdg Автор вопроса
    Большая благодарность за решение Comsequent!
    <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>
    
        <script>
            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;
            }
        </script>
    Ответ написан

Лучшие вопросы пользователя

Все вопросы (9)