Logo Patagonia.png

Diferencia entre revisiones de «Widget:Calculator»

De Wikiexplora
Saltar a: navegación, buscar
Línea 13: Línea 13:
 
                 <input type="text"  id="horizontal" name="horizontal" value=""  />
 
                 <input type="text"  id="horizontal" name="horizontal" value=""  />
 
                 <br/>               
 
                 <br/>               
                 <label class="calculator-label">Metros de ascenso:</label>   
+
                 <label id="ascenso-label" name="ascenso-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 class="calculator-label">Metros de descenso:</label>  
+
                 <label id="descenso-label" name="descenso-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 50: Línea 50:
 
  var theForm = document.forms["calculator"];
 
  var theForm = document.forms["calculator"];
 
  if(theForm.elements["roundtrip"].checked){
 
  if(theForm.elements["roundtrip"].checked){
     var divobj = document.getElementById('totalTime');
+
     var descensoLabel = document.getElementById('descenso-label');
     divobj.innerHTML = "Total time:";
+
     descensoLabel.style.display='none';
 +
    var descenso = document.getElementById('descenso');
 +
    descensoLabel.style.display='none';
 
  }  
 
  }  
 
  else {
 
  else {
     var divobj = document.getElementById('totalTime');
+
     var descensoLabel = document.getElementById('descenso-label');
     divobj.innerHTML = "Total";
+
     descensoLabel.style.display='block';
 +
    var descenso = document.getElementById('descenso');
 +
    descensoLabel.style.display='block';
 
  }
 
  }
 
   
 
   

Revisión del 22:15 20 ago 2017

<form action="" id="calculator" onsubmit="return false;">

              <fieldset>
               <legend>Calculate the time</legend>                
               <label><input type="checkbox" id="roundtrip" onclick="roundTripToggle()" name="roundtrip"/>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 id="ascenso-label" name="ascenso-label" class="calculator-label">Metros de ascenso:</label> <input type="text" id="ascenso" name="ascenso" value="" />
<label id="descenso-label" name="descenso-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 * 0.75 + ascenso * 7.2 + descenso * 2.4) * (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);
   total  = Math.round(total  * 100) / 100;    
   //display the result
   var divobj = document.getElementById('totalTime');
   divobj.style.display='block';
   divobj.innerHTML = "Total time: "+total;

}

function roundTripToggle(){

var theForm = document.forms["calculator"];
if(theForm.elements["roundtrip"].checked){
    var descensoLabel = document.getElementById('descenso-label');
    descensoLabel.style.display='none';
    var descenso = document.getElementById('descenso');
    descensoLabel.style.display='none';
} 
else {
    var descensoLabel = document.getElementById('descenso-label');
    descensoLabel.style.display='block';
    var descenso = document.getElementById('descenso');
    descensoLabel.style.display='block';
}

} </script>

<style> .calculator-label{

   display: block;

} div#totalTime {

   font-size: 110%;
   font-weight: bold;

} </style>