Volver
Ctrl+Space
◑
Copiar
Descargar
Restaurar
Ejecutar
Ctrl+Enter
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>output, meter y progress</title> </head> <body> <h2>output — resultado calculado</h2> <label for="precio">Precio base: $</label> <input type="number" id="precio" name="precio" value="1000" min="0" oninput="calcular()"> <br><br> <label for="desc">Descuento (%):</label> <input type="range" id="desc" name="desc" min="0" max="50" value="0" oninput="calcular()"> <br><br> <p> Precio final: <output for="precio desc" id="resultado">$1000.00</output> </p> <h2>meter — valor dentro de un rango con zonas</h2> <p> Uso de disco (peor si es alto): <meter value="75" min="0" max="100" low="50" high="80" optimum="0">75%</meter> 75% </p> <p> Calificación (mejor si es alto): <meter value="4.2" min="0" max="5" low="2" high="3.5" optimum="5">4.2 de 5</meter> 4.2 / 5 </p> <p> Batería: <meter value="0.2" min="0" max="1" low="0.25" high="0.5" optimum="1">20%</meter> 20% </p> <h2>progress — avance de una tarea</h2> <p>Progreso manual:</p> <progress id="barra" value="0" max="100"></progress> <br><br> <button onclick="avanzar()">Avanzar +10%</button> <button onclick="reiniciar()">Reiniciar</button> <hr> <p><strong>meter vs progress:</strong> <meter> tiene zonas buenas/malas (el color cambia según low, high y optimum). <progress> solo indica cuánto falta para terminar, sin juicio de valor.</p> <script> function calcular() { const precio = parseFloat(document.getElementById("precio").value) || 0; const desc = parseFloat(document.getElementById("desc").value) || 0; const final = precio * (1 - desc / 100); document.getElementById("resultado").value = "$" + final.toFixed(2) + " (" + desc + "% off)"; } function avanzar() { const barra = document.getElementById("barra"); if (barra.value < 100) barra.value += 10; } function reiniciar() { document.getElementById("barra").value = 0; } </script> </body> </html>