<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colorful Square</title>
<style>
#square {
width: 200px;
height: 200px;
margin-top: 20px;
border: 1px solid #000;
}
</style>
</head>
<body>
<h2>Enter RGB Values</h2>
<label for="red">Red (0-255):</label>
<input type="number" id="red" min="0" max="255"><br><br>
<label for="green">Green (0-255):</label>
<input type="number" id="green" min="0" max="255"><br><br>
<label for="blue">Blue (0-255):</label>
<input type="number" id="blue" min="0" max="255"><br><br>
<button onclick="changeColor()">Change Color</button>
<div id="square"></div>
<script>
function clampValue(value) {
if (value < 0) return 0;
if (value > 255) return 255;
return value;
}
function changeColor() {
// دریافت مقادیر ورودی کاربر
let red = parseInt(document.getElementById('red').value);
let green = parseInt(document.getElementById('green').value);
let blue = parseInt(document.getElementById('blue').value);
// اصلاح مقادیر خارج از محدوده
red = clampValue(red);
green = clampValue(green);
blue = clampValue(blue);
// تغییر رنگ مربع
const square = document.getElementById('square');
square.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
}
</script>
</body>
</html>
سلام خانم نرگس خسته نباشید.
این کاری که گفتید انجام شد
و اگر می خواید سورس کد رو براتون بفرستم ولی اینجا نمیشه
چون حجم html و Js زیاد هستش
کجا برای شما ارسال کنم؟
با تشکر
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colorful Square</title>
<style>
#square {
width: 200px;
height: 200px;
margin-top: 20px;
border: 1px solid #000;
}
</style>
</head>
<body>
<h2>Enter RGB Values</h2>
<label for="red">Red (0-255):</label>
<input type="number" id="red" min="0" max="255"><br><br>
<label for="green">Green (0-255):</label>
<input type="number" id="green" min="0" max="255"><br><br>
<label for="blue">Blue (0-255):</label>
<input type="number" id="blue" min="0" max="255"><br><br>
<button onclick="changeColor()">Change Color</button>
<div id="square"></div>
<script>
function clampValue(value) {
if (value < 0) return 0;
if (value > 255) return 255;
return value;
}
function changeColor() {
// دریافت مقادیر ورودی کاربر
let red = parseInt(document.getElementById('red').value);
let green = parseInt(document.getElementById('green').value);
let blue = parseInt(document.getElementById('blue').value);
// اصلاح مقادیر خارج از محدوده
red = clampValue(red);
green = clampValue(green);
blue = clampValue(blue);
// تغییر رنگ مربع
const square = document.getElementById('square');
square.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
}
</script>
</body>
</html>
واقعیتش من فکر کردم خیلی مینی پروژه تمیز می خواید و 60 درصد توانم رو گذاشتم و تمیز در اوردم با بوت استرپ و جاوا اسکریپت و ... حالا که کارتون حل شد پس بیخیال
با تشکر
مینی پروژه جذابی بود
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟