JSFiddle - React, Tailwind, and code Playground

by mesak

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/2.1.1/cerulean/bootstrap.min.css">
<table class="table table-bordered">
<tr>
    <td colspan="2"><div class="form-inline">
  <label>油價</label>
      <input type="text" id="oil_price" class="input-small" value="197" placeholder="輸入數字..." /> 
  <label>公升</label>
      <input type="text" id="oil_ml" class="input-small" value="4" placeholder="輸入數字..." />   
        </div>
    </td>
</tr>
<tr>
    <td>大火一小時消耗</td>
    <td><div class="pull-right">311ml&nbsp;/&nbsp;<span id="fire_max"></span>&nbsp;元</div></td>
    <td>可用約&nbsp;<span id="fire_max_hr"></span>&nbsp;小時</td>
</tr>
<tr>
    <td>小火一小時消耗</td>
    <td><div class="pull-right">72ml&nbsp;/&nbsp;<span id="fire_mix"></span>&nbsp;元</div></td>
    <td>可用約&nbsp;<span id="fire_mix_hr"></span>&nbsp;小時</td>
</tr>
</table>

JavaScript

$('.input-small').blur(calculation)
var oil_price = $('#oil_price');
var oil_ml = $('#oil_ml');
var fire_max = $('#fire_max')
var fire_mix = $('#fire_mix')
var fire_max_hr = $('#fire_max_hr')
var fire_mix_hr = $('#fire_mix_hr')
function calculation(){
    var price = parseFloat( oil_price.val() );
    var ml    =  parseFloat( oil_ml.val() );
    fire_max.html( round(price / ml * 0.311 ) );
    fire_mix.html( round(price / ml * 0.072 ) );
    fire_max_hr.html( round(ml / 0.311 ) );
    fire_mix_hr.html( round(ml / 0.072 ) );
     
}
function round( num ){
    return Math.round( num * 100 ) /100
}
calculation();