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

Imágen de perfil
Val: 1.125
Plata
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

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 19 de Septiembre del 2019 por joel
700 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
701 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
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s5535