Hari

Tanggal

Jam

HTML

Javascript

<!DOCTYPE html>
<html lang="id">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
    p {
        text-align: center;
        font-size: 3em;
        margin: 0;
    }
    div {margin-bottom: 8px;}
    input, select, button {margin: 0 8px; padding: 2px 4px;}
    option {padding: 2px 4px;}
</style>
</head>
<body>
    <div>
        <p>Hari <span id="tampilanhari"></span></p>
        <p>Tanggal <span id="tampilantgl"></span></p>
        <p>Jam <span id="tampilanjam"></span></p>
    </div>
    <div>
        <select id="Pilih">
            <option value="0" selected hidden></option>
            <option value="1">Menit</option>
            <option value="2">Jam</option>
            <option value="3">Hari</option>
        </select>
        <input type="number" id="Nmr">
        <button id="btn1">RUN</button>
    </div>
    <div><p id="demo1"></p></div>
    <div>
        <input type="date" id="Tgl">
        <input type="time" id="Jam">
        <button id="btn2">RUN</button>
    </div>
    <div><p id="demo2"></p></div>
    <div>
        <button id="btnStart">Start</button>
        <button id="btnStop">Stop</button>
        <button id="btnReset">Reset</button>
    </div>
    <div><p id="demo3"></p></div>
</body>
</html>

const nmbulan = ["Januari", "Februari", "Maret", "April", "Mai", "Juni", "Juli", "Augustus", "September", "Oktober", "Nopember", "Desember"]; 
    const nmhari = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jum\'at", "Sabtu"];
    function LifeTime(){
        var waktu = new Date();

var jam = waktu.getHours() + "";
        var menit = waktu.getMinutes() + "";
        var detik = waktu.getSeconds() + "";
        $("#tampilanjam").html((jam.length==1?"0"+jam:jam) + ":" + (menit.length==1?"0"+menit:menit) + ":" + (detik.length==1?"0"+detik:detik));

var tgl = waktu.getDate() + "";
        var bulan = nmbulan[waktu.getMonth()];
        var tahun = waktu.getFullYear() + "";
        $("#tampilantgl").html((tgl.length==1?"0"+tgl:tgl) + " " + bulan + " " + tahun);

var hari = nmhari[waktu.getDay()];
        $("#tampilanhari").html(hari);

setTimeout(LifeTime, 1000);
    }
    $(document).ready(function(){
        LifeTime();
    });

var Sisa, x, y ;
    $('#btn1').click(function(){
        var Nmr = parseInt(document.getElementById("Nmr").value) || 0 ;
        var Pilih = parseInt(document.getElementById("Pilih").value) || 0 ;

if (Nmr <1 || Pilih <1) return ;

switch(Pilih) {
            case 1:
                Sisa = Nmr*60*1000;
                break;
            case 2:
                Sisa = Nmr*60*60*1000;
                break;
            case 3:
                Sisa = Nmr*24*60*60*1000;
        }

clearInterval(x);
        x = setInterval(function() {
            var now = new Date().getTime();
            Sisa -= 1000;
            var D = Math.floor(Sisa / (1000 * 60 * 60 * 24));
            var H = Math.floor((Sisa % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var M = Math.floor((Sisa % (1000 * 60 * 60)) / (1000 * 60));
            var S = Math.floor((Sisa % (1000 * 60)) / 1000);

$("#demo1").html((D==0?"":D+ "h ") + (H==0?"":(H<10?"0"+H:H)+ "j ") + (M==0?"":(M<10?"0"+M:M)+ "m ")  + (S<10?"0"+S:S) + "d");

if (Sisa < 0) {
                clearInterval(x);
                $("#demo1").html("EXPIRED");
            }
        }, 1000);
    });

$('#btn2').click(function(){
        var Tgl = document.getElementById("Tgl").value ;
        var Jam = document.getElementById("Jam").value ;

if (Nmr.length <1 || Jam.length <1) return ;
        var Akhir = new Date(Tgl+"T"+Jam).getTime();

clearInterval(y);
        y = setInterval(function() {
            var Skrg = new Date().getTime();
            var Sisa2 = Akhir - Skrg;
            
            var D = Math.floor(Sisa2 / (1000 * 60 * 60 * 24));
            var H = Math.floor((Sisa2 % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var M = Math.floor((Sisa2 % (1000 * 60 * 60)) / (1000 * 60));
            var S = Math.floor((Sisa2 % (1000 * 60)) / 1000);

$("#demo2").html((D==0?"":D+ "h ") + (H==0?"":(H<10?"0"+H:H)+ "j ") + (M==0?"":(M<10?"0"+M:M)+ "m ")  + (S<10?"0"+S:S) + "d");
            if (Sisa2 < 0) {
                clearInterval(y);
                $("#demo2").html("EXPIRED");
            }
        }, 1000);
    })

var [ milseconds, seconds, minutes, hours, days ] = [0,59,58,23,0];
    var display = $('#demo3');
    var stopwatch = null;

const start = $('#btnStart');
    const pause = $('#btnStop');
    const reset = $('#btnReset');

start.click(function() {
        if(stopwatch!==null){
            clearInterval(stopwatch);
        }
        stopwatch = setInterval(startButton, 10);
    })

pause.click(function() {
        clearInterval(stopwatch);
    })

reset.click(function() {
        [ seconds, minutes, hours, days ] = [0, 0, 0, 0]
        display.html('00 : 00 : 00 : 00 : 00');
        clearInterval(stopwatch)
    })

function startButton(){
        milseconds +=1;
        if (milseconds == 100) {
            milseconds = 0;
            seconds++;

if(seconds == 60){
                seconds = 0;
                minutes++;
        
                if(minutes == 60){
                    minutes = 0;
                    hours++;
                    
                    if (hours == 24){
                        hours = 0;
                        days++;
                    }
                }
            }
        }

var d = days < 10 ? "0" + days : days ;
        var h = hours < 10 ? "0" + hours : hours ;
        var m = minutes < 10 ? "0" + minutes : minutes ;
        var s = seconds < 10 ? "0" + seconds : seconds ;
        var ms = milseconds < 10 ? "0" + milseconds : milseconds ;

display.html( d +' : '+ h +' : '+ m +' : '+ s +' : '+ ms);
    }

Silahkan share untuk menambah manfaat.

Learn on my own

Minggu, 03 September 2023

Time Life, Countdown, Stopwatch (HTML, JQuery, Javascript)

Semoga bermanfaat,

Tidak ada komentar:

Posting Komentar

Baru Tayang