JavaScript

JavaScript Kullanarak Işığı Aç Kapat Projesi

Yayınlanan

2 sene Önce

İcerisinde

Şubat 18, 2022

Tarafından

Mustafa Salman YT

JavaScript Kullanarak Işığı Aç Kapat Projesi – diveebi.com

Bu yazımızda, HTML sayfamıza yazdığımız JavaScript kodlarını. Hâlihazırda bulunan iki adet resmi döngüye sokarak aç kapat işlemi yapacağız.

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ı kopyala yapıştır yaparak kodları test edebilirsiniz.

Kodlar:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Mustafa Salman YT</title>
    </head>
    <body>
        <style>
            body{
                background-color: #dbdbdb;
            }
            img {
                margin-top: 50px;
            }
            #button {
                height: 50px;
                width: 125px;
                background-color: #ffffff;
                color: #000000;
                font-size: 16px;
                border-radius: 15px;
                border: 3px solid #cacaca;
            }
            #button:hover {
                background-color: #000000;
                color: #ffffff;
                border: 3px solid #000000;
            }
        </style>
        <center> <!--kapalı olan resmin yolunu yazın-->
        <img id="resim" src="/site/img/kapali.png"><br>
        <button id="button" onclick="ackapat()">AÇ - KAPAT</button>
        </center>
        <script>
            var deger=false;
            var kapali="/site/img/kapali.png"; // kapalı resmin yolunu yazın 
            var acik="/site/img/acik.png"; // açık olan resmin yolunu yazın
            function ackapat(){
                if(deger==false){
                    document.getElementById("resim").src=acik;
                    deger=true;
                }
                else if(deger==true){
                    document.getElementById("resim").src=kapali;
                    deger=false;
                }
            }
        </script>
    </body>
</html>

İlgili

Up Next

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

Don't Miss

JavaScript Sayfa Yönlendirme Kodu

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

1 sene Ö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>