تمرین برنامه نویسی؛ با کدبزن!

منبع جامع سوالات و تمرینات برنامه نویسی

0

تغییر رنگ بک گراند

Admin آسان 918/ دانلود 204 بازدید

با استفاده از جاوااسکریپت برنامه ای بنویسید که کاربر بتواند از بین رنگ های سبز، قرمز، آبی، سفید و مشکی یک رنگ را انتخاب کرده و بلافاصله بعد از انتخاب کاربر، رنگ پس زمینه کل صفحه به رنگ انتخابی تغییر پیدا کند

3 جواب

نمیتونم این تمرین رو حل کنم!
0 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .green{
            background-color: green;
        }
        .red{
            background-color: #f00;
        }
        .blue{
            background-color: rgb(0, 0, 255);
        }
        .white{
            background-color: #fff;
            color: #000;
        }
        .black{
            background-color: rgb(0,0,0);
            color: rgb(255, 255, 255);
        }
    </style>
</head>
<body id="bg">
    <label for="color">رنگ مورد نظر:</label><br>
    <input type="button" name="bg" class="color" value="سبز" onclick="funGreen()"><br>
    <input type="button" name="bg" class="color" value="قرمز" onclick="funRed()"><br>
    <input type="button" name="bg" class="color" value="آبی" onclick="funBlue()"><br>
    <input type="button" name="bg" class="color" value="سفید" onclick="funWhite()"><br>
    <input type="button" name="bg" class="color" value="سیاه" onclick="funBlack()">
    <script>
        function funGreen(){
            document.getElementById('bg').classList.add('green');
            document.getElementById('bg').classList.remove('red');
            document.getElementById('bg').classList.remove('blue');
            document.getElementById('bg').classList.remove('white');
            document.getElementById('bg').classList.remove('black');
        }
        function funRed(){
            document.getElementById('bg').classList.add('red');
            document.getElementById('bg').classList.remove('green');
            document.getElementById('bg').classList.remove('blue');
            document.getElementById('bg').classList.remove('white');
            document.getElementById('bg').classList.remove('black');
        }
        function funBlue(){
            document.getElementById('bg').classList.add('blue');
            document.getElementById('bg').classList.remove('green');
            document.getElementById('bg').classList.remove('red');
            document.getElementById('bg').classList.remove('white');
            document.getElementById('bg').classList.remove('black');
        }
        function funWhite(){
            document.getElementById('bg').classList.add('white');
            document.getElementById('bg').classList.remove('blue');
            document.getElementById('bg').classList.remove('green');
            document.getElementById('bg').classList.remove('red');
            document.getElementById('bg').classList.remove('black');
        }
        function funBlack(){
            document.getElementById('bg').classList.add('black');
            document.getElementById('bg').classList.remove('blue');
            document.getElementById('bg').classList.remove('green');
            document.getElementById('bg').classList.remove('red');
            document.getElementById('bg').classList.remove('white');
        }
    </script>
</body>
</html>
0 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .green {
        background-color: green;
        color: white;
      }
      .red {
        background-color: red;
        color: white;
      }

     .blue {
        background-color: blue;
        color: white;
      }
   .white {
        background-color: white;
        color: black;
      }
      .black {
        background-color: black;
        color: white;
      }
      .change-color {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }
      .color {
        padding: 15px 35px;
        border-radius: 10px;
        outline: 0;
        border: 0;
        background-color: cadetblue;
        transition: all .3s;
      }
      .color:hover {
        opacity: .8;
      }
    </style>

  </head>
  <body id="background">
    <div class="change-color">
      <h2 id="result"></h2>
      <button name="background" class="color" data-color="green">green</button>
      <button name="background" class="color" data-color="red">red</button>
      <button name="background" class="color" data-color="blue">blue</button>
      <button name="background" class="color" data-color="white">white</button>
      <button name="background" class="color" data-color="black">black</button>
    </div>
    <script>
      document.querySelectorAll("button.color").forEach((btn) => {
        btn.addEventListener("click", function () {
          const color = btn.dataset.color;
          const background = document.getElementById("background");
          const colors = ["green", "red", "blue", "white", "black"];
          document.getElementById(
            "result"
          ).textContent = `Background color changed to ${this.dataset.color}`;
          colors.forEach((r) => background.classList.remove(r));
          background.classList.add(color);
        });
      });
    </script>
  </body>
</html>
Hyron دانلود HTML CSS JavaScript
0 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            #g {
                background-color: green;
                border: 1px solid green;
                color: white;
            }
            #r {
                background-color: red;
                border: 1px solid red;
                color: white;
            }
            #bl {
                background-color: blue;
                border: 1px solid blue;
                color: white;
            }
            #boo {
                background-color: black;
                border: 1px solid black;
                color: white;
            }
            #w {
                background-color: white;
                border: 1px solid white;
                color: black;
            }
        </style>
    </head>
    <body>
        <button id="g">green</button>
        <button id="r">red</button>
        <button id="bl">blue</button>
        <button id="boo">block</button>
        <button id="w">white</button>
        <script>
            var g = document.getElementById("g");
            var r = document.getElementById("r");
            var bl = document.getElementById("bl");
            var boo = document.getElementById("boo");
            var w = document.getElementById("w");
            var b = document.querySelector("body");
            g.addEventListener("click", function () {
                b.style.backgroundColor = "green";
            });
            r.addEventListener("click", function () {
                b.style.backgroundColor = "red";
            });
            bl.addEventListener("click", function () {
                b.style.backgroundColor = "blue";
            });
            boo.addEventListener("click", function () {
                b.style.backgroundColor = "black";
            });
            w.addEventListener("click", function () {
                b.style.backgroundColor = "white";
            });
        </script>
    </body>
</html>
<< صفحه قبل 1 صفحه بعد >>

ارسال جواب

/* کداتو توی این بخش بنویس
فرقی نمیکنه چه زبان برنامه نویسی باشه، همرو پشتیبانی میکنیم :)
البته قبلش این سه خط رو پاک کن */
  • تو جوابت میتونی از تصویر، کد، لینک به سایر صفحات و... استفاده کنی
  • لطفا جواب های تکراری ارسال نکن
  • جواب های ارسالی، پس از بررسی کوتاهی، ویرایش میشن و در سایت نمایش داده میشن
  • ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

تمرینات مرتبط

تشخیص با استفاده از هوش مصنوعی
×

حساب کاربری

برای استفاده از این بخش باید وارد حساب کاربریت بشی

ورود/ثبت نام
×

نمیتونم این تمرین رو حل کنم 😞

اگه متوجه تمرین نمیشی یا به هر دلیلی نمیتونی حلش کنی، کاملا طبیعیه، اشکالی نداره؛ ناراحت نشو 😊
سعی کن تمرینات آسون تر رو ببینی و جواب های مختلفی که دیگران ارسال کرده اند رو بررسی کنی و یواش یواش به سراغ تمرینات سخت تر بری. همچنین ممکنه جوابت درست باشه ولی با سایر جواب ها متفاوت باشه
اگه برنامه نویسی رو هنوز شروع نکردی یا خوب یاد نگرفتی، میتونی از طریق لینک زیر یاد بگیری

یادگیری برنامه نویسی
بستن