Beranda / CSS / HTML / Javascript

Cara Membuat Jam Digital (HTML&CSS&Javascript)

Oleh Surya Posting Komentar
cara membuat jam digital mudah dengan html, css dan javascript - cocok sekali anda meletakkannya di blog maupun website buatan anda sendiri. berguna untuk mengatur lama anda bermain game atau mengatur lama anda membaca suatu artikel.


<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>page</title>
    <link rel="stylesheet" type="text/css" href="1.page.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
</head>
<body>

    <div id="box">
        <div id="counter"></div>
        <div id="start" onclick="kron.start();">
            <p>START</p>
        </div>
        <div id="stop" onclick="kron.stop();">
            <p>STOP</p>
        </div>
    </div>
    <script>

        function kron(Id, Second) {
            this.realSecond = Second || 0;
            this.second = Second || 0;
            this.interval;

            this.start = function () {
                this.counterElem = document.getElementById(Id);
                if (!this.interval) {
                    this.counter();
                    this.interval = setInterval(this.counter.bind(this), 1000);
                }
            };
            this.counter = function () {
                var totalSecond = this.second;
                var hour = parseInt(totalSecond / 3600) % 24;
                var minute = parseInt(totalSecond / 60) % 60;
                var second = totalSecond % 60;

                this.counterElem.innerHTML = (hour < 10 ? "0" + hour : hour) + ":" +
                    (minute < 10 ? +"0" + minute : minute) + ":" +
                    (second < 10 ? "0" + second : second);

                this.second += 1;
            };
            this.stop = function () {
                clearInterval(this.interval);
                this.interval = null;
            };
        }
        var kron = new kron("counter")
    </script>
</body>
</html>

body {
    background: #262626;
    padding: 0;
    margin: 0;
}

#box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 400px;
    height: 150px;
    border: 8px solid #808080;
    background: #000;
    border-radius: 15px;
    box-shadow: 0px 0px 175px 50px #000
}

#start {
    position: absolute;
    top: -15%;
    left: 20%;
    width: 100px;
    height: 15px;
    background: #808080;
    border-bottom: 2px solid #000;
    border-radius: 10px 10px 0px 0px;
    cursor: pointer;
}

    #start p {
        width: 20px;
        height: 20px;
        background: transparent;
        margin-top: -25px;
        margin-left: 25px;
        font-family: Verdana;
        font-size: 16px;
        color: #00ff21;
    }

#stop {
    position: absolute;
    top: -15%;
    right: 20%;
    width: 100px;
    height: 15px;
    background: #808080;
    border-bottom: 2px solid #000;
    border-radius: 10px 10px 0px 0px;
    cursor: pointer;
}

    #stop p {
        width: 20px;
        height: 20px;
        background: transparent;
        margin-top: -25px;
        margin-left: 25px;
        font-family: Verdana;
        font-size: 16px;
        color: #ff0000;
    }

#counter {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #3b8800;
    font-size: 95px;
    font-family: 'AR DARLING'
}

Demo

Posting Komentar untuk "Cara Membuat Jam Digital (HTML&CSS&Javascript)"