JavaScript
JavaScript İle Sayfa Offline Olduğunda Kullanıcıyı uyarma
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>
JavaScript
JavaScript Rastgele Background Rengi Değiştirme

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>
- Kali Linux4 hafta Önce
Kali Linux Dirbuster ile Dos Saldırısı Nasıl Yapılır?
- apache server2 ay Önce
.htaccess Dosyası Nedir ve Nasıl Kullanılır?
- Blog2 ay Önce
Windows 10’da WiFi Gözükmüyor Sorunu ve Çözümleri
- Blog2 ay Önce
PHP Nedir, Ne İşe Yarar? Kullanım alanları Nelerdir?
- Arduino3 ay Önce
Arduino Nedir? Nasıl Çalışır? Ne İşe Yarar?
- Python Dersleri3 ay Önce
PYTHON Port Scanner Aracınızı Oluşturun!
- ChatGPT5 ay Önce
ChatGPT API Kendi Yapay Zeka Sohbet Robotunuzu Yapın
- Blog6 ay Önce
Laravel Nedir? Laravel Özellikleri Nelerdir?