تغییر رنگ بک گراند
با استفاده از جاوااسکریپت برنامه ای بنویسید که کاربر بتواند از بین رنگ های سبز، قرمز، آبی، سفید و مشکی یک رنگ را انتخاب کرده و بلافاصله بعد از انتخاب کاربر، رنگ پس زمینه کل صفحه به رنگ انتخابی تغییر پیدا کند
با استفاده از جاوااسکریپت برنامه ای بنویسید که کاربر بتواند از بین رنگ های سبز، قرمز، آبی، سفید و مشکی یک رنگ را انتخاب کرده و بلافاصله بعد از انتخاب کاربر، رنگ پس زمینه کل صفحه به رنگ انتخابی تغییر پیدا کند
<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>
<!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>
<!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>
تابعی بنویسید که مقداری دریافت کند و بررسی کند که مقدار دریافت شده ایمیل است یا خیر؟ اگر ایمیل بود True و در غیر اینصورت False برگرداندهر ایمیل باید شامل @ باشدقبل از @ باید عبارتی به عنوان نام کار...
برنامه ای بنویس که تاریخ تولد کاربر را دریافت کند و مشخص کند که چند سال و چند ماه و چند روز از تولد او گذشته است
کد css بنویسید که همه المان های زیر را یکباره انتخاب کند و رنگ پس زمینه آنها را به زرد تغییر دهد <div id="box" class="yellow"></div> <div class="yellow"></div> <div class="yellow mybox"></div>
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نام
اگه متوجه تمرین نمیشی یا به هر دلیلی نمیتونی حلش کنی، کاملا طبیعیه، اشکالی نداره؛ ناراحت نشو
😊
سعی کن تمرینات آسون تر رو ببینی و جواب های مختلفی که دیگران ارسال کرده اند رو بررسی کنی و
یواش یواش به سراغ تمرینات سخت تر بری.
همچنین ممکنه جوابت درست باشه ولی با سایر جواب ها متفاوت باشه
اگه برنامه نویسی رو هنوز شروع نکردی یا خوب یاد نگرفتی، میتونی از طریق لینک زیر یاد بگیری