php - 在 html/php 中为输入 RGB 值在框中显示颜色
问题描述
下面给出的代码将在提交后给出十六进制值,但我还需要一个方形框和在框中填充的相应颜色。想要得到红色、绿色和蓝色的值,并且想要在一个方框中显示那个 RGB 值的颜色。
<head>
<style type="text/css">
#redv:focus {
background-color: PowderBlue;
}
#bluev:focus {
background-color: PowderBlue;
}
#greenv:focus {
background-color: PowderBlue;
}
#button1:hover {
background-color: CadetBlue;
font-size: 16px;
color: white;
border: 2px solid #008CBA;
}
#button1 {
background-color: #008CBA;
font-size: 16px;
color: white;
}
input[type="color"] {
-webkit-appearance: none;
border: none;
width: 102px;
height: 102px;
}
</style>
</head>
<body>
<form>
Enter Red Value:
<input type="number" id="redv" name="red" value="0" max="255"/> (Max:255)<br><br>
Enter Green Value:
<input type="number" id="greenv" name="green" value="0" max="255"/> (Max:255) <br><br>
Enter Blue Value:
<input type="number" id="bluev" name="blue" value="0" max="255"/>(Max:255) <br><br>
<input type="submit" name="submit" value="Generate" id="button1">
</form>
</body>
<?php
@$red=$_GET['red'];
@$green=$_GET['green'];
@$blue=$_GET['blue'];
function rgb2hex($rgb) {
$hex = "#";
$hex .= str_pad(dechex($rgb[0]), 2, "0", STR_PAD_LEFT);
$hex .= str_pad(dechex($rgb[1]), 2, "0", STR_PAD_LEFT);
$hex .= str_pad(dechex($rgb[2]), 2, "0", STR_PAD_LEFT);
return $hex; // returns the hex value including the number sign (#)
}
$rgb = array( $red, $green, $blue );
$hex = rgb2hex($rgb);
echo $hex;
?>
我们的目标是得到这样的东西,我们将从用户那里获得红色、绿色和蓝色的输入,并将该颜色显示在一个方形框中,如下所示。
解决方案
最小化 rgb2hex 函数并添加了一个div
with requiredstyle
而不是input[type=color]
<?php
$color = sprintf("#%02x%02x%02x", $_GET['red'], $_GET['green'] , $_GET['blue']);
echo '<div style="width:102px; height:102px; background-color:'.$color.';"></div>';
?>
或者
<style>
div{
width: 102px;
height: 102px;
border: none;
}
</style>
<?php
$color = sprintf("#%02x%02x%02x", $_GET['red'], $_GET['green'] , $_GET['blue']);
echo '<div style="background-color:'.$color.';"></div>';
?>
推荐阅读
- spring - Spring Boot Rest 控制器不接受多部分表单数据
- javascript - 确定浏览器的屏幕宽度是多少
- javascript - jsp - javascript - 单击事件对于循环 id 元素以更新数据库中的记录
- sql - 如何递归地从实体框架中的父/子获取 id?
- javascript - Vuejs 使用 postmessage 从 iframe 接收事件
- multithreading - 线程被台面信号量唤醒后如何获取锁?
- wpf - 为什么 DisplayMemberPath 没有显示?
- deep-learning - CNN_如何使用不同大小的输入输出图像?
- python - 在对二维数组中的奇数行和偶数行和列进行分组时跳过一列
- angular - 从另一个组件调用一个角度组件