Okuduğunuz konu hakkında proje yaptırmak isterseniz benimle buradan iletişime geçebilirsiniz. İletişim
Ana Sayfa
HTML
JavaScript

Html Geri Sayım Sayacı

HTML geri sayım sayacı ve JavaScript kullanan Bir Örnektir

Örnek Kodlar

Bu örnekte, geri sayım sayacı belirli bir tarih ve saate ( ) ayarlanmıştır July 4, 2023 00:00:00. Zamanlayıcı, geçerli tarih ve saati geri sayım tarih ve saatinden çıkararak her saniye güncellenir. Saatler, dakikalar ve saniyeler daha sonra hesaplanır ve timerdiv öğesinde görüntülenir. Geri sayım sıfıra ulaştığında "Süresi Doldu" mesajı görüntülenir.

countDownDate Kodun JavaScript bölümündeki değişkeni değiştirerek geri sayım tarihini ve saatini özelleştirebilirsiniz .

.Html
 <DOCTYPE html>
<html><head>
  <title>Geri sayım saati </title>
  <style>
    #timer {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      margin-top: 50px;
    }
  <style>
<head>
<body>
  <div id="timer">00:00:00 </div>

  <script>
    // Set the countdown date and time
    var countDownDate = new Date("July 4, 2025 00:00:00").getTime();

    // Update the countdown every second
    var countdown = setInterval(function() {

      // Get the current date and time
      var now = new Date().getTime();

      // Find the distance between now and the countdown date
      var distance = countDownDate - now;

      // Calculate the hours, minutes, and seconds
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);

      // Display the result in the element with id="timer"
      document.getElementById("timer").innerHTML = hours.toString().padStart(2, '0') + ":" +
                                                    minutes.toString().padStart(2, '0') + ":" +
                                                    seconds.toString().padStart(2, '0');

      // If the countdown is finished, display "Expired" and clear the interval
      if (distance  0) {
        clearInterval(countdown);
        document.getElementById("timer").innerHTML = "Expired";
      }
    }, 1000);
  </script>
</body>
</html>

Demo Görünüm

Countdown Timer
00:00:00

Html Geri Sayım Sayacı İle resim

Bu örnekte, "timer" içeren öğenin hemen arkasına "countdown-image" içeren bir etiket ekledim . Niteliği, geri sayım için kullanmak istediğiniz resmin yolu veya URL'si ile değiştirmeniz gerekir .id

id"image.jpg"src

Görüntünün ( #countdown-image) CSS stilleri, görüntüyü yatay olarak ortalar ve ona maksimum 300 piksellik bir genişlik verir. Bu stilleri gereksinimlerinize uyacak şekilde ayarlamaktan çekinmeyin.

image.jpgGerçek resim dosyasını ( ) HTML dosyanızla aynı dizine yerleştirmeyi veya resim başka bir yerde bulunuyorsa doğru yolu sağlamayı unutmayın .

Geri sayım sayacıyla ilgili bir resim eklemek için HTML etiketini kullanabilirsiniz . Bir resim eklemek için önceki kodu nasıl değiştirebileceğinize bir örnek:

.Html
<!DOCTYPE html>
<html>
<head>
  <title>Resimli Geri Sayım Sayacı</title>
  <style>
    #timer {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      margin-top: 50px;
    }

    #countdown-image {
      display: block;
      margin: 0 auto;
      max-width: 300px;
    }
  </style>
</head>
<body>
  <div id="timer">00:00:00</div>
  <img id="countdown-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbx1SFodAs2GM3URzw19kmb_Eb3EcL14tOBJqBrKCT4JyKdYrJsMtFlt0qtFmfXSbqHYNKh-fK51_qfosaDgqXoJrQeeSMr1JDNWckqhJZad13wKn9_cXoXE70env9lbAIubzCjvKL5zxR5FRAy8hYCi7T5nWT68ShTwbxLdj-2JIr-gY90YHCj0EZ_zx3/s320/google-developers-logo-F8BF3155AC-seeklogo.com.png" alt="Countdown Image">

  <script>
    // Set the countdown date and time
    var countDownDate = new Date("July 4, 2023 00:00:00").getTime();

    // Update the countdown every second
    var countdown = setInterval(function() {
      // Remaining code for the countdown timer
      // ...

      // If the countdown is finished, display "Expired" and clear the interval
      if (distance < 0) {
        clearInterval(countdown);
        document.getElementById("timer").innerHTML = "Expired";
      }
    }, 1000);
  </script>
</body>
</html>

Demo Görünüm

Countdown Timer with Image
00:00:00
Countdown Image

Kafanıza takılan yerler için yorumlar kısmından bana ulaşabilir ve sorularınızı sorabilirsiniz ve iletişim için burdan iletişim sayfasından iletişime geçebilirsiniz.

Yorum Gönder