Connect with us

JavaScript

JavaScript İle Sayfa Offline Olduğunda Kullanıcıyı uyarma

Yayınlanan

İcerisinde

JavaScript İle Sayfa Offline Olduğunda Kullanıcıyı uyarma – diveebi.com

Bu yazımda JavaScript Kodu Kullanarak sayfamızdaki kullanıcının internet bağlantısı gittiği vakit, kullanıcıyı bilgilendirme amaçlı uyarı kutusu oluşturduk.

Projemizi geçmeden önce bir HTML sayfası oluşturun veya Divebi Önizle (kod önizleme) web sayfasını kullanabilirsiniz. Aşağıda vermiş olduğum kodları kullanabilirsiniz veya kopyala yapıştır yaparak kodları test edebilirsiniz.

Proje Kodları:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-width=1.0">
        <title>Mustafa Salman YT</title>
    </head>
    <body>
        <style>
            body {
              display: flex;
              justify-content: center;
              font-family: "Roboto", sans-serif;
              margin: 0;
              padding: 0;
            }
            #internet-offline {
              max-width: 80%;
              width: 450px;
              margin-top: 40px;
              padding: 10px 15px 10px 50px;
              border: 1px solid #414141;
              border-radius: 10px;
              background: url(resim.png) no-repeat 12px 8px #f1f1f1; /* uyarı img url uyarı resminizi veya logo ekleyebilirsiniz */
              background-size: 50px;
              box-shadow: 0 0 4px #838383;
              display: none; /* Sayfa yüklendiğinde uyarı mesajı gözukmemesi için display: none */
            }
            #internet-offline p:nth-child(1) {
              margin: 4px 0;
              font-size: 16px;
            }
            #internet-offline p:nth-child(2) {
              margin: 4px 0;
              font-size: 12px; 
            }
        </style>
        <center>
            <div id="internet-offline">
                <p>
                    <strong>
                        AĞ BAĞLANTI HATASI
                    </strong>
                </p>
                <p>
                    İnternet gitti lütfen bağlantınızı kontrol edin.
                </p>
            </div>
        </center>
        <script>
            const div = document.getElementById("internet-offline")
            // İnternet online olunca internet-offline displlay: none;
            window.addEventListener('online', () => { 
              div.style.display="none" })
            // İnternet offline olunca internet-offline displlay: block;
            window.addEventListener('offline', () => { 
              div.style.display="block"})
        </script>
    </body>
</html>

Merhaba! Ben, Osmaniye'nin Bahçe ilçesinde doğmuş, şu anda 18 yaşında bir Full Stack Web Geliştiriciyim. Eğitimlerim ve uzmanlık alanlarım arasında web uygulamalarının oluşturulması, SEO stratejileri, Photoshop, Python, HTML, CSS, JavaScript, PHP ve grafik tasarım gibi konular yer almaktadır. Diveebi.com adlı web sitem ve YouTube kanalımda, bu alanlarla ilgili içerikler üretmeye ve paylaşmaya büyük bir tutku ile devam ediyorum.

Yorum yapmak için tıklayın

Cevap bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

JavaScript

JavaScript Rastgele Background Rengi Değiştirme

Yayınlanan

İcerisinde

Tarafından

JavaScript

Bu rehberde, JavaScript kullanarak HTML sayfasının rastgele arka plan rengini değiştirdik.

Proje Kodları

<body onload="renkInterval()">
    <script>
    setInterval(() =>{
        bodyColor()
    }, 100);
     
    function bodyColor() {
        var renk1 = Math.floor(255*Math.random());
        var renk2 = Math.floor(255*Math.random());
        var renk3 = Math.floor(255*Math.random());
        document.body.style.backgroundColor="rgb("+renk1+","+renk2+","+renk3+")";
        console.log("Random Color: " + renk1);
    }
    </script>
</body>

Okumaya devam et
win 10 diveebi.com win 10 diveebi.com
Blog2 ay ago

Windows etkinleştirme yazısını kaldırmak İçin 3 Yöntem

Windows Etkinleştirme Yazısı Neden Çıkar? Windows etkinleştirme yazısı, Windows işletim sisteminin lisansının onaylanmadığını veya etkinleştirilmediğini gösterir. Bu yazı genellikle siyah...

NodeJS NodeJS
Blog2 ay ago

NodeJS VS PHP, Node.js mi PHP mi?

PHP ve Node.js, modern web geliştirme dünyasında popüler olan iki farklı teknolojidir. Her ikisi de web tabanlı uygulamalar geliştirmek için...

FTP - diveebi.com FTP - diveebi.com
Blog3 ay ago

Domain Nedir ve Nasıl Kullanılır?

İnternet çağında yaşadığımız bu günlerde, “domain” terimi sıkça duyulan ve kullanılan bir kavram haline geldi. Ancak, pek çok kişi için...

Python Python
Python Dersleri6 ay ago

Python ile Vize Final Ortalaması Hesaplama

Bu projemizde, python ile kullanıcıdan vize ve final notlarını alarak sene sonu ortalamasını hesaplar. Ortalama, vize notunun %40‘ı ile final...

Python Python
Python Dersleri6 ay ago

Python’da Dosya İşlemleri

Python programlama dilinde dosya işlemleri, veri okuma, yazma ve manipülasyonu gibi önemli görevleri gerçekleştirmenin temel bir parçasını oluşturur. Bu makalede,...

FTP - diveebi.com FTP - diveebi.com
FTP8 ay ago

FTP Nedir? Ücretsiz FTP Programları nelerdir?

FTP Nedir? FTP Nedir?, FTP (File Transfer Protocol), bilgisayarlar arasında dosya transferini sağlamak için kullanılan bir iletişim protokolüdür. İnternetin ilk...

Kali Linux Kali Linux
Kali Linux10 ay ago

Kali Linux Dirbuster Aracı Nasıl Kullanılır?

Kali Linux ve Dirbuster Nasıl Kullanılır? Günümüzün dijital dünyasında, siber güvenlik önemli bir konu haline gelmiştir. Güvenlik uzmanları, siber saldırıları...

Apache Diveebi Apache Diveebi
apache server11 ay ago

.htaccess Dosyası Nedir ve Nasıl Kullanılır?

Bu rehberde, .htaccess Dosyası Nedir ve Nasıl Kullanılır? sorularına cevap bulacaksınız. .htaccess dosyası, Apache web sunucusu üzerinde kullanılan ve web...

win 10 diveebi.com win 10 diveebi.com
Blog11 ay ago

Windows 10’da WiFi Gözükmüyor Sorunu ve Çözümleri

Windows 10 işletim sistemi, dünya genelinde en yaygın olarak kullanılan işletim sistemlerinden biridir. Ancak, her ne kadar güçlü ve kullanıcı...

PHP PHP
Blog11 ay ago

PHP Nedir, Ne İşe Yarar? Kullanım alanları Nelerdir?

PHP Nedir, Ne İşe Yarar? Bu rehberde PHP Nedir, Ne İşe Yarar? Kullanım alanları Nelerdir konuları hakkında bilgi sahibi olacaksınız....

Arduino Arduino
Arduino12 ay ago

Arduino Nedir? Nasıl Çalışır? Ne İşe Yarar?

Bu rehberimizde, Arduino Nedir? Nasıl Çalışır? Ne İşe Yarar? sorularına cevap arayacağız. Günümüzde elektronik ve programlama dünyasında oldukça popüler olan...

Trending