« »

Có bao giờ bạn tự hỏi mình đã/sẽ phải trả bao nhiêu chi phí cho nhiên liệu? Hãy dùng đoạn mã JavaScript đơn giản này để biết, chỉ cần nhập vào vài thông số và xem kế quả.

Nhãn: chi phí, nhiên liệu, phải trả, thông số, kế quả,

Báo cho chúng tôi lỗi JavaScript này

Demo
Phóng to
Tải lại
Cửa sổ mới

Mã nguồn
JavaScript
HTML
In

Copy All x2

<script type="text/javascript">
// Created by: Allen Liu | http://www.gobozzy.com

function calculate_mpg_savings(gasform) {
  var dailymiles = gasform.dailymiles.value;
  var costpergallon = gasform.costpergallon.value;
  var daysperfillup = gasform.daysperfillup.value;
  var sizeoftank = gasform.gastanksize.value;
  var mpg = Math.round(((daysperfillup/sizeoftank) * (dailymiles)) *100)/100;
  var monthlycost = Math.round((1/mpg) * costpergallon * (dailymiles * 30.417) * 100)/100;

  document.gasform.mpg.value = mpg;
  document.gasform.monthlycost.value = "$" + monthlycost;
  document.gasform.yearlycost.value = "$" + Math.round(monthlycost * 12 * 100)/100;
}
</script>

Copy All x2

<form name="gasform" class="gascalc">
	<fieldset style="width: 350px;">
		<legend><strong>Gas Cost Calculator</strong></legend>
		<table>
			<tr>
				<td width="225"><label class="labl" for="dailymiles">Daily Mileage</label></td>
				<td><input type="text" size="5" style="text-align: right;" id="dailymiles"></td>
			</tr>
			<tr>
				<td><label class="labl" for="gastanksize">Gas Tank Size in Gallons</label></td>
				<td><input type="text" size="5" style="text-align: right;" id="gastanksize"></td>
			</tr>
			<tr>
				<td><label class="labl" for="daysperfillup">Days Between Fillups</label></td>
				<td><input type="text" size="5" style="text-align: right;" id="daysperfillup"></td>
			</tr>
			<tr>
				<td><label class="labl" for="costpergallon">Cost per Gallon (<em>in Dollars</em>)</label></td>
				<td><input type="text" size="5" style="text-align: right;" id="costpergallon"></td>
			</tr>
			<tr>
				<td><input name="calculate" value="Submit" onclick="calculate_mpg_savings(gasform)" type="button">
				<input name="Reset" class="button" type="reset"></td>
			</tr>
		</table>
	</fieldset>
	<br>
	<fieldset style="width: 350px;">
		<legend><strong>My Gas Cost</strong></legend>
		<table>
			<tr>
				<td width="225"><label class="labl" for="mpg">MPG </label></td>
				<td><input type="text" size="10" style="text-align: right;" id="mpg" readonly="readonly"></td>
			</tr>
			<tr>
				<td><label class="labl" for="monthlycost">Monthly Gas Cost </label></td>
				<td><input type="text" size="10" style="text-align: right;" id="monthlycost" readonly="readonly"></td>
			</tr>
			<tr>
				<td><label class="labl" for="yearlycost">Annual Gas Cost </label></td>
				<td><input type="text" size="10" style="text-align: right;" id="yearlycost" readonly="readonly"></td>
			</tr>
		</table>
	</fieldset>
</form>