Javascript Dijital Saat

<div id="clock"></div>

<script>
    setInterval(showTime, 1000);
   
    function showTime() {
        
        let time = new Date();
        let hour = time.getHours();
        let min = time.getMinutes();
        let sec = time.getSeconds();

        hour = hour < 10 ? "0" + hour : hour;
        min = min < 10 ? "0" + min : min;
        sec = sec < 10 ? "0" + sec : sec;

        let currentTime = hour + ':' + min + ':' + sec;

        document.getElementById("clock")
            .innerHTML = currentTime;
    }
   
    showTime();
</script>

<style>
    body {
        background: linear-gradient(to bottom right, #265f54, #61322b);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #clock {
        text-align: center;
        margin-bottom: 35px;
    }
    .digit {
        display: inline-block;
        margin: 5px 10px;
    }

    .box1,
    .box2 {
        width: 20px;
        height: 17px;
        border: 3px solid aqua;
        border-radius: 10px;
        border-width: 10px;
    }
    .box2 {
        border-top-color: transparent;
    }
    .zero .box1 {
        border-bottom-color: transparent;
    }
    .zero .box2 {
        border-top-color: transparent;
    }
    .one .box1,
    .one .box2,
    .four .box2,
    .seven .box2 {
        border-color: transparent;
        border-right-color: aqua;
    }
    .dot .box1,
    .dot .box2 {
        background: aqua;
        border: none;
        margin-top: 25px;
    }
    .dot .box2 {
        margin-bottom: 7px;
    }
    .two .box1,
    .three .box1 {
        border-left-color: transparent;
    }
    .two .box2 {
        border-right-color: transparent;
    }
    .three .box2,
    .five .box2,
    .nine .box2 {
        border-left-color: transparent;
    }

    .four .box1 {
        border-top-color: transparent;
    }
    .six .box1,
    .five .box1 {
        border-right-color: transparent;
    }
    .seven .box1 {
        border-left-color: transparent;
        border-bottom-color: transparent;
    }

</style>
    


<div id="clock"></div>

<script>
    setInterval(showTime, 1000);

    function showTime() {
        let time = new Date();
        let hour = time.getHours();
        let min = time.getMinutes();
        let sec = time.getSeconds();

        hour = hour < 10 ? "0" + hour : hour;
        min = min < 10 ? "0" + min : min;
        sec = sec < 10 ? "0" + sec : sec;

        hour = getDigit(hour);
        min = getDigit(min);
        sec = getDigit(sec);
        let currentTime = hour + getDot() + min + getDot() + sec;

        document.getElementById("clock").innerHTML = currentTime;
    }
    function getDot() {
        return '<div class="one dot digit"><div class="box1"></div><div class="box2"></div></div>';
    }

    function getDigit(num) {
        html = "";
        num = num.toString();
        for (var i = 0; i < num.length; i++) {
            html += '<div class="' + getNumberText(num[i]) + ' digit"><div class="box1"></div><div class="box2"></div></div>';
        }
        return html;
    }

    function getNumberText(num) {
        if (num == "0") {
            return "zero";
        } else if (num == "1") {
            return "one";
        } else if (num == "2") {
            return "two";
        } else if (num == "3") {
            return "three";
        } else if (num == "4") {
            return "four";
        } else if (num == "5") {
            return "five";
        } else if (num == "6") {
            return "six";
        } else if (num == "7") {
            return "seven";
        } else if (num == "8") {
            return "eight";
        } else if (num == "9") {
            return "nine";
        }
    }

    showTime();

</script>