Diferencia entre revisiones de «Widget:Calculator»
De Wikiexplora
| Línea 1: | Línea 1: | ||
<form action="" id="calculator" onsubmit="return false;"> | <form action="" id="calculator" onsubmit="return false;"> | ||
<div> | <div> | ||
| − | <div class=" | + | <div class="calculator-boxes"> |
<fieldset> | <fieldset> | ||
| − | <legend>Calculate the time</legend> | + | <legend class="calculator-label">Calculate the time</legend> |
<label class='radiolabel'><input type="radio" name="selectedcake" value="RoundTrip" onclick="calculateTotal()" />Is a round trip</label> | <label class='radiolabel'><input type="radio" name="selectedcake" value="RoundTrip" onclick="calculateTotal()" />Is a round trip</label> | ||
<br/> | <br/> | ||
| − | <label>Mean altitude of the whole route</label> | + | <label class="calculator-label">Mean altitude of the whole route</label> |
<input type="text" id="altitude" name="altitude" value="" /> | <input type="text" id="altitude" name="altitude" value="" /> | ||
<br/> | <br/> | ||
| − | <label>Distancia horizontal en metros</label> | + | <label class="calculator-label">Distancia horizontal en metros</label> |
<input type="text" id="horizontal" name="horizontal" value="" /> | <input type="text" id="horizontal" name="horizontal" value="" /> | ||
<br/> | <br/> | ||
| − | <label>Metros de ascenso</label> | + | <label class="calculator-label">Metros de ascenso</label> |
<input type="text" id="ascenso" name="ascenso" value="" /> | <input type="text" id="ascenso" name="ascenso" value="" /> | ||
<br/> | <br/> | ||
| − | <label>Metros de descenso</label> | + | <label class="calculator-label">Metros de descenso</label> |
<input type="text" id="descenso" name="descenso" value="" /> | <input type="text" id="descenso" name="descenso" value="" /> | ||
| Línea 47: | Línea 47: | ||
} | } | ||
</script> | </script> | ||
| + | <style> | ||
| + | .calculator-label{ | ||
| + | min-width:300px; | ||
| + | } | ||
| + | </style> | ||
Revisión del 20:37 19 ago 2017
<form action="" id="calculator" onsubmit="return false;">
<fieldset>
<legend class="calculator-label">Calculate the time</legend>
<label class='radiolabel'><input type="radio" name="selectedcake" value="RoundTrip" onclick="calculateTotal()" />Is a round trip</label>
<label class="calculator-label">Mean altitude of the whole route</label>
<input type="text" id="altitude" name="altitude" value="" />
<label class="calculator-label">Distancia horizontal en metros</label>
<input type="text" id="horizontal" name="horizontal" value="" />
<label class="calculator-label">Metros de ascenso</label>
<input type="text" id="ascenso" name="ascenso" value="" />
<label class="calculator-label">Metros de descenso</label>
<input type="text" id="descenso" name="descenso" value="" />
</fieldset>
<input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />
</div>
</form> <script> function calculateTotal() {
var theForm = document.forms["calculator"]; var altitude= parseInt(theForm.elements["altitude"].value); var horizontal= parseInt(theForm.elements["horizontal"].value); var ascenso= parseInt(theForm.elements["ascenso"].value); var descenso= parseInt(theForm.elements["descenso"].value);
var total = (horizontal x 0.75 + ascenso x 7.2 + descenso x 2.4) x (4 * Math.pow(10, -12) * Math.pow(altitude , 3) - 9 * Math.pow(10 , -9) * Math.pow(altitude , 2) + 4 * Math.pow(10, -5) * altitude + 0,9999) * (1/3600)
//display the result
var divobj = document.getElementById('totalTime');
divobj.style.display='block';
divobj.innerHTML = "Total time: "+total;
} </script> <style> .calculator-label{ min-width:300px; } </style>
