IT/JAVASCRIPT

[JAVASCRIPT] 시(hour)분(minute)초(second) 를 "초"로 포맷 변경

윤재웅 2020. 4. 20. 16:48

여러 정보를 찾아보았지만 제가 원하는 포스팅 로직이 없어서 추가하였습니다. 시(hour)분(minute)초(second) 입력 시 합산된 초(second)가 나타납니다. 반대로 "초를" 시(hour)분(minute)초(second) 변경하는 로직도 같이 처리 하였습니다.

<html>
    <div>
        <label >시(hour)분(minute)초(second) 초로</label>
        <div>
            <input type="number" maxlength="2" max="24" onKeyup="this.value=this.value.replace(/[^0-9]/g,'');
                inpuTimeHours(this);" name="timeHours" placeholder="시"/>
        </div>
        <div>
            <input type="number" maxlength="2" max="60" onKeyup="this.value=this.value.replace(/[^0-9]/g,'');
                inpuTimeMinute(this);" name="timeMinute" placeholder="분"/>
        </div>
        <div>
            <input type="number" maxlength="2" max="60" onKeyup="this.value=this.value.replace(/[^0-9]/g,'');
                inpuTimeSeconds(this);" name="timeSeconds" placeholder="초"/>
        </div>
        <div>
            <input type="number" class="form-control" readonly name="playTime" />
        </div>
    </div>

    <br>
    <div> 
        <label >초를 시(hour)분(minute)초(second)</label><br>
        <input type="text" id="seconds" value="7322"> 
        <input type="text" id="timeHours" > 
        <input type="text" id="timeMinute" > 
        <input type="text" id="timeSeconds" > 
    </div>
<html>

script 로직 입니다.

    <script src="https://code.jquery.com/jquery-3.5.0.min.js" 
        integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        //시(hour)분(minute)초(second) 초로
        var timeSet=0, minuteSet=0, secondSet=0;
        function inpuTimeHours(hours) {
            timeSet =  hours.value*3600;
            dataSetTimeJone(timeSet+minuteSet+secondSet);
        }
        function inpuTimeMinute(minute) {
            minuteSet =  minute.value*60;
            dataSetTimeJone(timeSet+minuteSet+secondSet);
        }
        function inpuTimeSeconds(seconds) {
            secondSet =  seconds.value*1;
            dataSetTimeJone(timeSet+minuteSet+secondSet);
        }
        function dataSetTimeJone(setTime){
            $(":input[name=playTime]").val(setTime);
        }

        //초를 시(hour)분(minute)초(second)
        var seconds = $('#seconds').val();
        var hour = parseInt(seconds/3600);
        var min = parseInt((seconds%3600)/60);
        var sec = seconds%60;

        $("#timeHours").val(hour);
        $("#timeMinute").val(min);
        $("#timeSeconds").val(sec);
    </script>