انتخاب کننده رنگ بوت استرپ

ساخت Color Picker با Html

توسط admin | گروه طراحی وبسایت | 1403/08/03

نظرات 0

این کد مربوط به یک انتخاب‌کننده رنگ پیشرفته با پالت دایره‌ای است که به کاربران اجازه می‌دهد رنگ مورد نظر خود را از طریق کلیک روی پالت و تغییر اسلایدرهای رنگ انتخاب کنند. این کد شامل بخش‌های HTML، CSS و جاوا اسکریپت برای ایجاد این ویژگی است.

انجام پروژه های طراحی وب سایت فوری 09131253620

توضیحات خط به خط: (نمونه اجرا شده در این لینک)

HTML:

html
<!DOCTYPE html>
<!-- تعیین نوع سند HTML5 -->
<html lang="fa">
<!-- زبان سند را فارسی تنظیم می‌کند -->
<head>
<meta charset="UTF-8">
<!-- تنظیم کاراکترها به UTF-8 -->
<title>Advanced Color Picker with Circular Palette</title>
<!-- عنوان صفحه -->
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
/* تنظیمات استایل بدن صفحه */
}
#palette {
width: 200px;
height: 200px;
border-radius: 50%;
cursor: crosshair;
/* تنظیمات استایل پالت رنگ دایره‌ای */
}
.slider-container {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
width: 100%;
max-width: 300px;
/* تنظیمات استایل محفظه اسلایدرها */
}
label {
flex: 1;
line-height: 210%;text-align: right;
padding-right: 10px;
/* تنظیمات استایل برچسب‌ها */
}
.slider {
flex: 3;
width: 100%;
/* تنظیمات استایل اسلایدرها */
}
.slider-container span {
flex: 1;
line-height: 210%;text-align: left;
padding-left: 10px;
/* تنظیمات استایل مقادیر اسلایدرها */
}
#colorBox {
width: 100px;
height: 100px;
margin-top: 20px;
border: 1px solid #000;
/* تنظیمات استایل جعبه نمایش رنگ */
}
input[type="text"] {
margin-top: 10px;
line-height: 210%;text-align: center;
padding: 5px;
width: 100px;
/* تنظیمات استایل ورودی متنی برای نمایش کد رنگ */
}
@media (max-width: 600px) {
#palette {
width: 150px;
height: 150px;
/* تغییر اندازه پالت در صفحات کوچکتر */
}
.slider-container {
max-width: 250px;
/* تغییر اندازه محفظه اسلایدرها در صفحات کوچکتر */
}
#colorBox {
width: 80px;
height: 80px;
/* تغییر اندازه جعبه نمایش رنگ در صفحات کوچکتر */
}
input[type="text"] {
width: 80px;
/* تغییر اندازه ورودی متنی در صفحات کوچکتر */
}
}
</style>
</head>
<body>
<!-- پالت دایره‌ای رنگ -->
<canvas id="palette" width="200" height="200"></canvas>
<div class="slider-container">
<!-- محفظه اسلایدر برای رنگ قرمز -->
<label for="red">قرمز:</label>
<input type="range" id="red" name="red" min="0" max="255" class="slider">
<span id="redValue">0</span>
</div>
<div class="slider-container">
<!-- محفظه اسلایدر برای رنگ سبز -->
<label for="green">سبز:</label>
<input type="range" id="green" name="green" min="0" max="255" class="slider">
<span id="greenValue">0</span>
</div>
<div class="slider-container">
<!-- محفظه اسلایدر برای رنگ آبی -->
<label for="blue">آبی:</label>
<input type="range" id="blue" name="blue" min="0" max="255" class="slider">
<span id="blueValue">0</span>
</div>
<!-- جعبه نمایش رنگ انتخابی -->
<div id="colorBox"></div>
<!-- ورودی متنی برای نمایش کد رنگ -->
<input type="text" id="colorCode" readonly>
<!-- جاوا اسکریپت برای عملکرد انتخابگر رنگ -->
<script>
const redSlider = document.getElementById('red');
const greenSlider = document.getElementById('green');
const blueSlider = document.getElementById('blue');
const colorBox = document.getElementById('colorBox');
const colorCode = document.getElementById('colorCode');
const palette = document.getElementById('palette');
const ctx = palette.getContext('2d');
 
function drawPalette() {
const gradient = ctx.createConicGradient(
0, 100, 100
);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1 / 6, 'yellow');
gradient.addColorStop(2 / 6, 'lime');
gradient.addColorStop(3 / 6, 'aqua');
gradient.addColorStop(4 / 6, 'blue');
gradient.addColorStop(5 / 6, 'magenta');
gradient.addColorStop(1, 'red');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, palette.width, palette.height);
}
 
function updateColor() {
const red = redSlider.value;
const green = greenSlider.value;
const blue = blueSlider.value;
const hexColor = rgbToHex(red, green, blue);
colorBox.style.backgroundColor = hexColor;
colorCode.value = hexColor;
document.getElementById('redValue').innerText = red;
document.getElementById('greenValue').innerText = green;
document.getElementById('blueValue').innerText = blue;
}
 
function rgbToHex(r, g, b) {
return `#${Number(r).toString(16).padStart(2, '0')}${Number(g).toString(16).padStart(2, '0')}${Number(b).toString(16).padStart(2, '0')}`;
}
 
palette.addEventListener('click', (event) => {
const rect = palette.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const [r, g, b] = ctx.getImageData(x, y, 1, 1).data;
redSlider.value = r;
greenSlider.value = g;
blueSlider.value = b;
updateColor();
});
 
redSlider.addEventListener('input', updateColor);
greenSlider.addEventListener('input', updateColor);
blueSlider.addEventListener('input', updateColor);
 
drawPalette();
</script>
</body>
</html>

توضیحات کلی:

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

 

0 نظر

نظر محترم شما در مورد مقاله های وب سایت برنامه نویسی و پایگاه داده

نظرات محترم شما در خدمات رسانی بهتر ما را یاری می نمایند. لطفا اگر مایل بودید یک نظر ما را مهمان فرمائید. آدرس ایمیل و وب سایت شما نمایش داده نخواهد شد.

حرف 500 حداکثر