10 Dakikada bir tıklanabilen buton | Cevap #11259

Merhaba, 1 Kullanıcı ve 1 İlan tablom var. Kullanıcılar ilanlarını ekleyip, yayına alabiliyor. İstek üzerine "Üste taşıma" butonu eklemeye karar verdim fakat butonu aktif olarak bırakmak istemiyorum.

Yaklaşık 2 saattir nasıl bir mantık kurabilirim diye düşünüyorum ama saatten mi yoksa bilgimin yetersiz olduğundan mı bilemiyorum ama kodu tam yazmaya başlarken "o iş öyle olmaz ki" diye beynim uyarıp duruyor.

Google'da çeşitli forumlarda yapmak istediğim konuyu aradım fakat herkes mantığı anlatıp, bırakıp gitmiş. çoğu mantıksız bir mantık anlatıp bir daha cevap bile vermemiş neredeyse.

Yapmak istediğim şey tam olarak şu;

İlanlar listesinde her kullanıcının kendi ilanında görebileceği "Yukarı Taşı" butonunun olması ve bu butona tıklandığı zaman işlem sayfasında tarihe +10 ekleyip, 10 dakika boyunca bu butona tekrar tıklanmamasını sağlamak.

Aslında gayet açık ve net okuduğum zaman kendime anlatabiliyorum ama iş kod yazmaya geldiği zaman tarihe nasıl + 10 ekleyip, o butonu 10 dakika sonra aktif veya pasif edeceğim kısmını kendime anlatamıyorum. Bu konu için bana yardım edebilir misiniz? şimdiden cevaplar için teşekkür ederim.

PHP Kodu:

<!-- 
    1. PHP ile 10 dakikada bir tıklanabilen buton oluştur
    2. kalan süreyi saat dakika saniye olarak bir div içerisinde göster
    3. süre bittiğinde butonu tekrar tıklanabilir hale getir
-->

<?php
$lastTime = time();                                     // 1. butonun son tıklanma zamanını al
$lastTime = $lastTime + 600;                            // 1. butonun son tıklanma zamanına 10 dakika ekle
$lastTime = date("Y-m-d H:i:s", $lastTime);             // 1. butonun son tıklanma zamanını tarih formatına çevir

$now = time();                                          // 2. şu anki zamanı al
$end = strtotime($lastTime);                            // 2. butonun son tıklanma zamanını tarih formatından çıkar
$diff = $end - $now;                                    // 2. butonun son tıklanma zamanından şu anki zamanı çıkar
// $hours = floor($diff / 3600);                        // 2. kalan süreyi saat olarak al
$mins = floor($diff / 60 % 60);                         // 2. kalan süreyi dakika olarak al
$secs = floor($diff % 60);                              // 2. kalan süreyi saniye olarak al
// echo $hours . " saat " . $mins . " dakika " . $secs . " saniye";
// echo $mins . " dakika " . $secs . " saniye";
?>

HTML Kodu:

<div id="time"></div>                                   <!-- 2. kalan süreyi saat dakika saniye olarak bir div içerisinde göster -->
<button id="btn">Tıkla</button>                         <!-- 1. butonu oluştur -->

<script>                                                
    let btn = document.getElementById("btn");           // 1. butonu seç
    let time = document.getElementById("time");         // 2. kalan süreyi saat dakika saniye olarak bir div içerisinde göster
    let mins = <?php echo $mins; ?>;                    // 2. dakika olarak al
    let secs = <?php echo $secs; ?>;                    // 2. saniye olarak al
    btn.addEventListener("click", () => {               // 1. butona tıklandığında
        btn.disabled = true;                            // 1. butonu tıklanamaz hale getir
        let timer = setInterval(() => {                 // 2. süre bittiğinde butonu tekrar tıklanabilir hale getir
            if (mins == 0 && secs == 0) {               
                btn.disabled = false;                   // 2. butonu tekrar tıklanabilir hale getir
                clearInterval(timer);                   // 2. süre bittiğinde butonu tekrar tıklanabilir hale getir
            } else {                                    
                if (secs == 0) {                        // 2. saniye 0 ise
                    mins--;                             // 2. dakikayı 1 azalt
                    secs = 59;                          // 2. saniyeyi 59 yap
                } else {                                
                    secs--;                             // 2. saniyeyi 1 azalt
                }
                time.innerHTML = mins + " dakika " + secs + " saniye";  // 2. kalan süreyi saat dakika saniye olarak bir div içerisinde göster
            }
        }, 1000);                                       // 2. süre bittiğinde butonu tekrar tıklanabilir hale getir
    });
</script>

Umarım yardımı dokunur