JavaScript

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

Yayınlanan

2 sene Önce

İcerisinde

Şubat 18, 2022

Tarafından

Mustafa Salman YT

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>

İlgili

Up Next

JavaScript İle Metini Kopyala Butonu

Don't Miss

JavaScript Kullanarak Işığı Aç Kapat Projesi

Mustafa Salman YT

Merhabalar! Ben Osmaniye'nin Bahçe ilçesinde doğdum ve şu anda 17 yaşındayım. Kendimi bir web yazılım geliştiricisi ve SEO uzmanı olarak olarak tanımlıyorum ve Diveebi.com ve Youtube kanalımda web site eğitimleri, SEO, Photoshop dersleri, Python projeleri, HTML, CSS, JavaScript, PHP, Grafik dersleri ve benzeri içerikler paylaşıyorum. Kişisel Web Sitemi ziyaret et: https://mustafa.diveebi.com/

Yorum yapmak için tıklayın

JavaScript

JavaScript Rastgele Background Rengi Değiştirme

Yayınlanan

10 ay Önce

İcerisinde

Kasım 30, 2022

Tarafından

Mustafa Salman YT

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>