¿Cómo solicitar el valor actual del indicador en HTML5?

Un indicador es un marcador que puede tener la forma de un dial o una barra. Tiene atributos min, max, high y low para mostrar la cantidad de datos que se le proporcionan.

En HTML5 , la etiqueta <meter> se usa para mostrar y medir los datos en un rango determinado en forma de indicador. Los siguientes atributos se usan con la etiqueta <meter> en HTML5.

Sintaxis:

<meter min_value=”value” low_value=”value” high_value=”value” max_value=”value”> current_value=”value” </meter>

Ejemplo: el siguiente ejemplo muestra cómo obtener el valor actual del indicador en HTML5. En el código se establecen los siguientes valores para los atributos.

  • El valor mínimo se establece en 0
  • El valor máximo se establece en 100
  • El valor bajo se establece en 10
  • El valor alto se establece en 90
  • El valor/puntuación actual del estudiante se especifica en el atributo de valor .

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
</head>
<body>
    <h2 style="color:green">GeeksforGeeks </h2>
    <p> 
    <b>The scores of the students: </b> 
    </p>
  
    <p>
    A:
    <meter min="0" low="10" high="90" 
           max="100" value="40"></meter>
    </p>
  
    <p>
    B:
    <meter min="0" low="10" high="90" 
           max="100" value="70"></meter>
    </p>
  
    <p>
    C:
    <meter min="0" low="10" high="90" 
           max="100" value="45"></meter>
    </p>
  
    <p>
    D:
    <meter min="0" low="10" high="90"
           max="100" value="90"></meter>
    </p>
  
    <p>
    E:
    <meter min="0" low="10" high="90" 
           max="100" value="55"></meter>
    </p>
  
    <p>
    F:
    <meter min="0" low="10" high="90" 
           max="100" value="96"></meter>
    </p>
  
</body>
</html>

Salida: La barra en el indicador muestra un color amarillo si el valor (actual) es mayor que el valor alto o menor que el valor bajo. La barra en el indicador muestra un color verde si el valor (actual) está entre el valor bajo y el alto.

Valores de indicador

Publicación traducida automáticamente

Artículo escrito por ayushraghuwanshi80 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *