Código de JavaScript - Mostrar el color deseado entre el verde y el rojo

Imágen de perfil
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mostrar el color deseado entre el verde y el rojográfica de visualizaciones


JavaScript

Publicado el 19 de Septiembre del 2019 por Joel (150 códigos)
2.191 visualizaciones desde el 19 de Septiembre del 2019
Función que permite devolver un color entre el verde y el rejo (pasando por el amarillo y naranja) según el incremento que especifiquemos.

En esta imagen, se ha creado un bucle para mostrar todas las imágenes con un incremento de 10 valores entre cada color.
colores-de-verde-a-rojo

1
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 19 de Septiembre del 2019gráfica de visualizaciones de la versión: 1
2.192 visualizaciones desde el 19 de Septiembre del 2019
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
    div {
        float:left;
        width:90px;
    }
    span {
        width:24px;
        height:24px;
        display:inline-block;
        margin-right:3px;
    }
    </style>
</head>
 
<body>
</body>
</html>
 
<script>
 
/**
 * Funcion que devuelve un color entre el verde y el rojo dependiendo del valor
 * recibido y el incremento de valor entre un color y el otro
 *
 * @param int stepSize - Este valor determina el incremento entre cada color
 *                       por ejemplo:
 *                       - Si se especifica 1, puede haber 511 colores entre el verde y el rojo (255 de rojo y 255 de verde)
 *                       - Si especificamos 10, puede haber 53 colores entre el verde y el rojo
 *                       - Si especificamos 20, puede haber 27 colores entre el verde y el rojo
 *                       - Si especificamos 63, puede haber 10 colores entre el verde y el rojo
 * @param int value    - Determina el numero de color a mostrar
 *
 * @return string - el valor en hexadecimal del color
 */
function getColor(stepSize, value) {
    let red=0;
    let green=255;
    let result=0;
    red=1*(value*stepSize);
    if (red>255) {
        result=Math.floor((red-255)/stepSize);
        red=255;
        if (result>0) {
            green=green-(result*stepSize);
            if (green<0) {
                green=0;
            }
        }
    }
    return "#"+intToHex(red)+intToHex(green)+intToHex(0);
}
 
for (i=0;i<53;i++) {
    document.write("<div>");
    let color=getColor(10, i);
    document.write("<span style='background-color:"+color+"'></span>");
    document.write(color); //assume output is function that takes RGB
    document.write("</div>");
}
 
/**
 * Convierte un entero a su valor en hexadecimal
 * Añade un cero al inicio, si el valor devuelve solo tiene un caracter
 *
 * @param int i entero a convertir
 *
 * @return string el valor hexadecimal
 */
function intToHex(i) {
    const hex = parseInt(i).toString(16);
    return (hex.length < 2) ? "0" + hex : hex;
}
 
</script>



Comentarios sobre la versión: 1 (1)

Imágen de perfil
5 de Octubre del 2019
estrellaestrellaestrellaestrellaestrella
Muy útil.
Responder

Comentar la versión: 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s5535