Lompat ke konten Lompat ke sidebar Lompat ke footer
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

Surya
Surya Seorang mahasiswa yang senang membagikan informasi yang sudah saya dapatkan. Informasi yang saya tulis blog ini, sesuai pengalaman saya dari pertama blog.

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