Membuat Animasi Timer Menggunakan Jquery

Hallo teman-teman Dumet School, pada kesempatan kali ini saya akan Membuat Animasi Timer Menggunakan Jquery. Dimana animasi timer ini akan saya tampilkan berupa cahrt pie atau bentuk pie untuk timer yang sedang berjalan.

Langkah pertama untuk dapat membuat Membuat Animasi Timer Menggunakan Jquery kita buat terlebih dahulu untuk struktur htmlnya seperti di bawah ini.

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <title></title>
        <style>
            body {
                text-align: center;
            }
            .pieChart {
                background-color: salmon;
                width: 250px;
                height: 250px;
                display: block;
                border-radius: 50%;
                margin: auto;
            }
        </style>
    </head>
    <body>

    <div class="container">
        <div class="row">
            <div class="col-12 my-2">
                <h1>Membuat Animasi Timer Menggunakan Jquery</h1>
                <h3 id="display">25:00</h3>
                <button id="more" class="btn btn-sm btn-info px-3"> + </button>
                <button id="less" class="btn btn-sm btn-info px-3"> - </button>  
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div id="timer" class="pieChart slice"></div>
                <button id="go" class="btn btn-sm btn-success my-2">Start/Resume</button>
                <button id="pause" class="btn btn-sm btn-secondary my-2">Pause</button>
                <button id="reset" class="btn btn-sm btn-danger my-2">Stop/Reset</button>
            </div>
        </div>
    </div>

</body>

</html>

Jika sudah selesai maka langkah selanjutnya saya akan membuat script untuk membuat animasi timer dalam bentuk chartnya seperti script di bawah ini.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
    <script>
        var tf;
        var start;
        var length;
        var end;
        var x;
        var now;
        var remaining;
        var minutes;
        var seconds;
        var d;
        var i;
        var left;
        var right;
        var line=[];
        var slice;
        var pauseTime;
        var pauseLength;

        //menampilkan nilai default ketika halaman pertama load
        $(document).ready(function (){
            tf = 25;
        $('#display').html('25:00');});


        function display () {
            $('#display').empty().html(tf + ':00');
        }

        //event tambah menit utk timer
        $('#more').on('click',function() {
            tf = tf + 1 ;
            display();
        });

        //event kurangi menit utk timer
        $('#less').on('click',function() {
            if (tf > 1) {
                tf = tf - 1;
                display();
            }
        });

        // fungsi timer hitung mundur
        function a () {
            x = setInterval(function () {
                now = $.now();
                remaining = end - now;
                minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
                seconds = Math.round((remaining % (1000 * 60)) / 1000);
                if (seconds == 60) {
                    document.getElementById("display").innerHTML = "1:00";
                }else if (seconds < 10) {
                    document.getElementById("display").innerHTML = minutes + ":0" + seconds;
                }else document.getElementById("display").innerHTML = minutes + ":" + seconds;

                if (remaining < 0) {
                    clearInterval(x);
                    document.getElementById("display").innerHTML = "END";
                }

                //animasi pie timer
                d = 360 / length;
                i = length - remaining;
                right = -90 + d * i;
                left = -90 + d * i - 180;

                //rotates pie, menampilkan warna merah untuk timer yang sudah jalan
                if (right < 90) {
                    line = ['linear-gradient(' + right + 'deg, salmon 50%, transparent 50%)',
                        'linear-gradient(-90deg, red 50%, transparent 50%)'];
                }else {
                    line = ['linear-gradient(' + left + 'deg, red 50%, transparent 50%)',
                        'linear-gradient(-90deg, red 50%, transparent 50%)'];
                }
                slice = $('#timer').css({
                    'background-image': line.join(',')
                });
            }, 1000);
        }

        //event start timer
        $('#go').on('click', function () {
            if (isNaN(pauseTime)) {
                start = $.now();
                length = tf * 60 * 1000;
                end = start + length;
                a();
            }else {
                start = $.now();
                end = start + pauseLength;
                a();
            }
        });

        //event pause timer
        $('#pause').on('click', function () {
            pauseTime = $.now();
            pauseLength = end - pauseTime;
            clearInterval(x);
        });

        //event reset timer
        $('#reset').on('click',function() {
            clearInterval(x);
            slice = $('#timer').css({
                'background-image': 'linear-gradient(-90deg, #ffaed2 50%, transparent 50%)'
            });
            tf = 25;
            display();
            pauseTime = NaN;
        });
    </script>

Nah jika teman-teman buka di halaman browser maka akan seperti pada gambar di bawah ini untuk tampilan animasi timernya.

Demikian artikel tentang Membuat Animasi Timer Menggunakan Jquery. Semoga dapat bermanfaat dan selamat mencoba.

21 Oktober 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat