kentyeh/OilPrice.html

## OilPrice.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>油價計算機</title>
  <style>
       table{
         border:1px solid black;
       }
       input[type=number]{
         text-align:right;
         width:5em;
       }

       th,td{
         border:1px solid black;
       }
       .right{
         text-align:right;
       }
  </style>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/numbro@2.3.6/dist/numbro.min.js"></script>
  <script>
       function loaded(){
           if (typeof(Storage) !== "undefined"){
               let lp = localStorage.getItem("lastprice");
               if(lp!=null)
                   $("#price").val(lp);
           }
       }
       function calc(){
         let s = parseFloat($("#minoil").val());
         let e = parseFloat($("#maxoil").val());
         let p = parseFloat($("#price").val());
         if (typeof(Storage) !== "undefined") {
            localStorage.setItem("lastprice", p);
         }
         let c = s;
         let pp = 0;
         let t = e+0.02;
         $('#oilist').empty();
         while(c<(e+0.02)){
           let p4 = pp-Math.round(pp);
           if(pp>0 && Math.round(pp)<Math.round(c*p) &&(p4>=0.4 && p4<0.5)){
             $('#oilist').append('<tr><td class="right">'
               +Math.round((c-0.01)*100)/100+
               '</td><td class="right">'
               +numbro(Math.round(pp*1000)/1000.0).format({thousandSeparated: true})+
               '</td></tr>');
           }
           pp = Math.round(c*p*1000)/1000.0;
           c+=0.01;
         }
       }
  </script>
</head>
<body onload="loaded()">
自助油價<input id="price" type="number" value="29" min="1" step="0.1" onfocus="select()" autofocus="true"/><br/>
加油量<input id="minoil" type="number" min="0.01" step="0.01" value="1" onfocus="select()"/>~
  <input id="maxoil" type="number" min="0.01" step="0.01" value="6" onfocus="select()"/>升
  <input type="button" value="計算" onclick="calc()"/>
  <table>
    <thead><tr><th class="right">油量</th><th class="right">費用</th></tr></thead>
    <tbody id="oilist"></tbody>
  </table>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>油價計算機</title>
	<style>
	table{
	border:1px solid black;
	}
	input[type=number]{
	text-align:right;
	width:5em;
	}

	th,td{
	border:1px solid black;
	}
	.right{
	text-align:right;
	}
	</style>
	<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/numbro@2.3.6/dist/numbro.min.js"></script>
	<script>
	function loaded(){
	if (typeof(Storage) !== "undefined"){
	let lp = localStorage.getItem("lastprice");
	if(lp!=null)
	$("#price").val(lp);
	}
	}
	function calc(){
	let s = parseFloat($("#minoil").val());
	let e = parseFloat($("#maxoil").val());
	let p = parseFloat($("#price").val());
	if (typeof(Storage) !== "undefined") {
	localStorage.setItem("lastprice", p);
	}
	let c = s;
	let pp = 0;
	let t = e+0.02;
	$('#oilist').empty();
	while(c<(e+0.02)){
	let p4 = pp-Math.round(pp);
	if(pp>0 && Math.round(pp)<Math.round(c*p) &&(p4>=0.4 && p4<0.5)){
	$('#oilist').append('<tr><td class="right">'
	+Math.round((c-0.01)*100)/100+
	'</td><td class="right">'
	+numbro(Math.round(pp*1000)/1000.0).format({thousandSeparated: true})+
	'</td></tr>');
	}
	pp = Math.round(cp1000)/1000.0;
	c+=0.01;
	}
	}
	</script>
	</head>
	<body onload="loaded()">
	自助油價<input id="price" type="number" value="29" min="1" step="0.1" onfocus="select()" autofocus="true"/><br/>
	加油量<input id="minoil" type="number" min="0.01" step="0.01" value="1" onfocus="select()"/>~
	<input id="maxoil" type="number" min="0.01" step="0.01" value="6" onfocus="select()"/>升
	<input type="button" value="計算" onclick="calc()"/>
	<table>
	<thead><tr><th class="right">油量</th><th class="right">費用</th></tr></thead>
	<tbody id="oilist"></tbody>
	</table>
	</body>
	</html>