英文:
changing color with hex color value in javascript
问题
我是前端初学者，想用JavaScript创建一个项目，通过温度、压力等环境参数之间建立关系，使颜色随这些参数的变化而变化。我尝试了一个简单的项目，创建了两个按钮，分别用于升高和降低温度，并创建了一个彩色的div来显示温度变化。随着温度升高，div的颜色变为红色光谱，温度降低时，颜色变为蓝色光谱，就像w3schools网站上的颜色混合器一样，我使用了十六进制颜色值。
问题是当我使用十六进制颜色值时，代码不起作用，但当我尝试使用整数值例如更改按钮推动时div的高度，并且高度值上下变化时，它起作用。所以这与十六进制颜色值有关。
顺便说一句，我搜索了类似的JavaScript项目，比如颜色滑块、颜色计量器之类的，还在堆栈中搜索了与颜色变化相关的问题，但都没有帮助。
<html>
<head>
<style>
#cool{
background-color:lightblue;
float:left;
}
#hot{
background-color:red;
float:right;
}
button{
width:200px;
height:100px;
font-size:20pt;
}
#range{
width:100%;
height:50px;
background-color:#ff0000;
}
</style>
</head>
<body>
<div id="range"> </div>
<button id="hot" type="button" onclick="tempUp()"> hot </button>
<button id="cool" type="button" onclick="tempDown()"> cool </button>
</body>
<script>
var colorVal = ['#ff0000','#b2004c','#5900a6','#0000ff']; //从红色到蓝色
var i = 0; //默认值
function tempUp(){
if(i < 3){
i++;
document.getElementById('range').style.backgroundColor = colorVal[i];
}
}
function tempDown(){
if(i > 0){
i--;
document.getElementById('range').style.backgroundColor = colorVal[i];
}
}
</script>
</html>
英文:
I'm a front-end beginner and want to create a project with javascript that makes a relationship between environmental parameters, like temperature, pressure, or everything with color; as those parameters change, the color changes. So I tried a simple project and create two buttons for getting the temperature up and down and a colored div to show the temperature change. As the temperature gets higher the color of the div goes to the red spectrum and as it gets lower, the color of the div goes to the blue spectrum like a color mixer in the w3schools site here and I used hex color values.
The problem is when I use hex values for color, the code doesn’t work but when I tried integer values for example for changing the height of the div when the buttons push and the value of the height gets up and down, it worked. so it has a problem with hex color values.
By the way, I searched for the same javascript projects like color slider, color gauge, or something and also searched the questions that were related to color changing in the stack, but was not helpful.
<html>
<head>
<style>
#cool{
background-color:lightblue;
float:left;
}
#hot{
background-color:red;
float:right;
}
button{
width:200px;
height:100px;
font-size:20pt;
}
#range{
width:100%;
height:50px;
background-color:#ff0000;
}
</style>
</head>
<body>
<div id="range"> </div>
<button id="hot" type="button" onclick="tempUp()"> hot </button>
<button id="cool" type="button" onclick="tempDown()"> cool </button>
</body>
<script>
var colorVal = [ff0000,b2004c,5900a6,0000ff]; //from red to blue
var i = 0; //default value
function tempUp(){
if(i < 3){
i++;
document.getElementById('range').style.backgroundColor = colorVal[i];
}
}
function tempDown(){
if(i > 0){
i--;
document.getElementById('range').style.backgroundColor = colorVal[i];
}
}
</script>
</html>
I tried converting hex color values to decimal but that didn't work.
答案1
得分: 2
你真的很接近了！只有几个问题：
-
你的
colorVal数组中有一些错误：- 你的
colorVal数组顺序不对：当你使用tempUp()递增时，索引会增加，但颜色却从红色变为蓝色，这与你的意图相反。 - 十六进制值需要十六进制前缀
#。 - 它们需要用引号括起来以表示字符串值。
这是一个可能的解决方案：
var colorVal = ["#0000ff", "#5900a6", "#b2004c", "#ff0000"];这样颜色就是从蓝色到红色的。
- 你的
-
你的初始
i值从索引0开始，但应该从索引3开始，因为数组顺序现在已经反转。如果你想要，可以将数组的顺序从红色变回蓝色，并保持起始索引为0。
这是一个可工作的代码片段：
var colorVal = ["#0000ff", "#5900a6", "#b2004c", "#ff0000"]; // 从红色到蓝色
var i = 3; // 默认值
function tempUp() {
if (i < 3) {
i++;
document.getElementById('range').style.backgroundColor = colorVal[i];
}
}
function tempDown() {
if (i > 0) {
i--;
document.getElementById('range').style.backgroundColor = colorVal[i];
}
}
希望这些对你有帮助！
英文:
You're really close! Just a couple of things:
- You have some errors in your
colorValarray:
- Your
colorValarray is in the wrong order: As you increment withtempUp(), the index increases, but the colors are going from red --> blue - which is the opposite of what you want. - The hex values need the hex prefix
# - They need to be enclosed with quotes for a string value
This is a possible solution:
var colorVal = ["#0000ff", "#5900a6", "#b2004c", "#ff0000"];
This goes from blue --> red.
- Your starting
ivalue starts at index0, but should be at index3because the array order is now reversed. If you want, you can revert the array order from red --> blue, and keep the starting index at0.
Here's a working snippet:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var colorVal = ["#0000ff", "#5900a6", "#b2004c", "#ff0000"]; //from red to blue
var i = 3; //default value
function tempUp() {
if (i < 3) {
i++;
document.getElementById('range').style.backgroundColor = colorVal[i];
}
}
function tempDown() {
if (i > 0) {
i--;
document.getElementById('range').style.backgroundColor = colorVal[i];
}
}
<!-- language: lang-css -->
#cool {
background-color: lightblue;
float: left;
}
#hot {
background-color: red;
float: right;
}
button {
width: 200px;
height: 100px;
font-size: 20pt;
}
#range {
width: 100%;
height: 50px;
background-color: #ff0000;
}
<!-- language: lang-html -->
<body>
<div id="range"> </div>
<button id="hot" type="button" onclick="tempUp()"> hot </button>
<button id="cool" type="button" onclick="tempDown()"> cool </button>
</body>
<!-- end snippet -->
答案2
得分: 0
对于这种用途，十六进制格式不是最适合的。
最好使用HSL，颜色将由色调在0到360°之间来定义，如下所示：
例如，对于从蓝色到红色的仪表，你可以将色调从225移动到0°。
英文:
For this kind of use, the hexadecimal format is not the most suitable.<br/>
You better use HSL, the color will be defined by the hue between 0 and 360° as below:<br/>
<br/>
For example, for a gauge from blue to red, you can move the hue from 225 to 0°
答案3
得分: 0
如果您想要使用十六进制值，请尝试以下方法（尽管直接使用十进制值不需要进行基数转换）：
var current = "#ff0000";
/* 在这里设置您希望颜色变化的速度 */
const increment = 12;
function increase(color, quantity) {
/* 使用正数的数量来获取更热的颜色，使用负数来获取更冷的颜色 */
/* 蓝色太暗，所以与一些绿色混合，绿色也是一种冷色 */
/* 将红色和蓝色转换为十进制并增加 */
let red = parseInt(color.substring(1, 3), 16) + quantity;
let green = parseInt(color.substring(3, 5), 16) - parseInt(quantity / 1.5);
let blue = parseInt(color.substring(5, 7), 16) - quantity;
/* 当达到最大值时停止增加 */
if (red > 255) {
red = 255;
green = 0;
blue = 0;
}
if (red < 0) {
red = 0;
green = 170;
blue = 255;
}
/* 将结果转换为十六进制 */
red = red.toString(16);
green = green.toString(16);
blue = blue.toString(16);
if (red.length == 1) red = '0' + red;
if (green.length == 1) green = '0' + green;
if (blue.length == 1) blue = '0' + blue;
return "#" + red + green + blue;
}
function tempUp() {
/* 更新当前颜色 */
current = increase(current, increment);
/* 更新背景 */
document.getElementById('range').style.backgroundColor = current;
}
function tempDown() {
/* 更新当前颜色 */
current = increase(current, -1 * increment);
/* 更新背景 */
document.getElementById('range').style.backgroundColor = current;
}
#cool {
background-color: lightblue;
float: left;
}
#hot {
background-color: red;
float: right;
}
button {
width: 200px;
height: 100px;
font-size: 20pt;
}
#range {
width: 100%;
height: 50px;
background-color: #ff0000;
}
<html>
<head>
</head>
<body>
<div id="range"> </div>
<button id="hot" type="button" onclick="tempUp()"> hot </button>
<button id="cool" type="button" onclick="tempDown()"> cool </button>
</body>
</html>
英文:
If you want to use hex values, try this (although using directly decimal values doesn't need base conversion):
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var current = "#ff0000"
/*set here how fast you want color to change*/
const increment = 12;
function increase(color, quantity) {
/*use a positive quantity to get hotter colors, negative for cooler*/
/*blue is too dark, so is mixed with some green, which is also a cool color*/
/*convert red and blue to decimal and increase*/
let red = parseInt(color.substring(1,3),16) + quantity;
let green = parseInt(color.substring(3,5),16) - parseInt(quantity/1.5);
let blue = parseInt(color.substring(5,7),16) - quantity;
/*stop increasing when maximum is reached*/
if (red > 255) {
red = 255;
green = 0;
blue = 0;
}
if (red < 0) {
red = 0;
green = 170;
blue = 255;
}
/*convert result to hex*/
red = red.toString(16);
green = green.toString(16);
blue = blue.toString(16);
if(red.length==1) red='0'+red;
if(green.length==1) green='0'+green;
if(blue.length==1) blue='0'+blue;
return "#" + red + green + blue;
}
function tempUp() {
/*update current color*/
current
= increase(current, increment);
/*update background*/
document.getElementById('range').style.backgroundColor = current;
}
function tempDown() {
/*update current color*/
current
= increase(current, -1*increment);
/*update background*/
document.getElementById('range').style.backgroundColor = current;
}
<!-- language: lang-css -->
#cool{
background-color:lightblue;
float:left;
}
#hot{
background-color:red;
float:right;
}
button{
width:200px;
height:100px;
font-size:20pt;
}
#range{
width:100%;
height:50px;
background-color:#ff0000;
}
<!-- language: lang-html -->
<html>
<head>
</head>
<body>
<div id="range"> </div>
<button id="hot" type="button" onclick="tempUp()"> hot </button>
<button id="cool" type="button" onclick="tempDown()"> cool </button>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论