1일차 TL

미니프로젝트 1일차

프론트엔드

<script>
    var Target = document.getElementById("clock");
    var Target_apm = document.getElementById("apm");
    function clock() {
        var time = new Date();
        var hours = time.getHours();
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();
        var AmPm ="AM";
        if(hours > 12){
            var AmPm ="PM";
            hours %= 12;
        }

        Target.innerText =
        `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;

        Target_apm.innerText = `${AmPm}`;

    }
    clock();
    setInterval(clock, 1000); // 1초마다 실행
</script>

현재시각을 알려주는 시계 script

<div style="text-align: left">
<span id="clock" style="color:white; font-size: 50px;">clock</span>
<span id="apm" style="color:white; font-size: 50px;"  >ampm</span>
</div>

화면으로 구현

 

<style>
    body {
        height: auto;
        width: auto;
    }

    .wrap {
        height: 100vh;
        display: flex;
        flex-direction: row;

    }

    .l-page {
        width: 100%;
        height: 100vh;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .r-page {
        width: 100%;
        height: 100vh;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .form {
        width: auto;
        height:auto;;
    }

    .form-input {
        margin-top: 30px;
    }

화면 비율과 크기설정시 짤리는 부분등 xxpx:에서 auto로 변경하여 축소해도 비율대로 유지하도록 변경