☆☆ 新着記事 ☆☆

2018年8月16日木曜日

Test TIP計算

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">

<title>3桁区切りと小数点</title>
</head>
<body>
<b>☆☆ チップ計算 ☆☆</b>
 <form name="tip_form">
  <fieldset class="loan_input"  style="border: none;">
   <p> <label for="loan_amt">請求額</label>
   <input class="tb_fmt1" type="text" id="billed_amt" placeholder="200.00"  size="10" style="margin-left: 25px; text-align: right; background-color: snow; border-radius: 0.67em; margin-right:0.5em;" onchange="tip()"  />ドル
   </P>
   
  </fieldset>
  <p>The Result of the TIP CALC. is : <br>

 </form>
 <p>計算結果早見表</p>
 <table width = 80%, border = "1">
 <tr align='center'>
 <th>チップ率</th> <th> 15%</th> <th> 16%</th> <th> 17%</th> <th> 18%</th> <th> 19%</th> <th> 20%</th>
 </tr>
 <tr>
 <td>チップ額</td> <td><span id = "tip15"></span></td> <td> 16%</td> <td> 17%</td> <td> 18%</td> <td> 19%</td> <td> 20%</td>
 </tr>
 <td>総支払額</td> <td> 15%</td> <td> 16%</td> <td> 17%</td> <td> 18%</td> <td> 19%</td> <td> 20%</td>
 </tr>

 </table>
 <script type="text/javascript">
  function tip() {
  var num0 = document.getElementById('billed_amt').value;
  alert('I\'ve got a number correct!' + ' ' + num0);

  var tip15 = parseInt(num0) * 0.15;
  alert('I\'ve got calculated tip amount!' + ' ' + tip15);
  


  //var tip20 = parseInt(num0) * 0.20;

  document.getElementById('tip15').innerHTML = tip15;
  //document.getElementById('tip20').innerHTML = tip20;

 alert('tip20');
 }
 window.onload = function(){
 var elements = document.getElementsByClassName("tip_form");
 for(var i=0;i<elements.length;i++){
    elements[i].onfocus = function(){offComma(this);}
    elements[i].onblur = function(){toComma(this);}
 }
}
 
 function toComma(obj){
   if((obj.value).trim().length != 0 && !isNaN(obj.value)){
  obj.value = Number(obj.value).toLocaleString();
   }
 }
 

 function offComma(obj){
   var reg = new RegExp(",", "g");
   var chgVal = obj.value.replace(reg, "");
   if(!isNaN(chgVal)){
  obj.value = chgVal;  //値セット
  obj.select();        //全選択
   }
 }
 </script>



</body>
</html>


参考) 表計算


** Javascript

<script>
document.addEventListener('change',function(e){
  var p=document.querySelectorAll('input[name=price]');
  var f=document.querySelectorAll('input[name=field]');
  var w=document.querySelectorAll('input[type=radio].which:checked');
  var c=document.querySelectorAll('select[name=count]');
  var t=document.querySelectorAll('input[name=field_total]');
  var ta=document.querySelector('input[name=allTotal]');
  var t0=0,t1=0;
  var v=0;
  for(var i=0;i<3;i++){
    t0+=(v=parseInt(p[i].value)||0*parseInt(w[i].value||0));
    f[i].value=p[i].value==""?"":v;
    t1+=(v=parseInt(p[i+3].value||0)*parseInt(c[i].value||0));
    f[i+3].value=p[i+3].value==""?"":v;
  }
  t[0].value=t0;
  t[1].value=t1; ta.value=t0+t1; }); </script>
<form id="form">
<table>
<tr>
<th>単価</th>
<th>利用区分</th>
<th>合計</th>
</tr>
<tr>
<td><input maxlength='6' type="text" name="price"></td>
<td><label><input type="radio" class="which" name="which_1" value="1" checked>片道
<input type="radio" class="which" name="which_1" value="2">往復</label></td>
<td><input maxlength='7' type="text" name="field"></td>
</tr>
<tr>
<td><input maxlength='6' type="text" name="price"></td>
<td><label><input type="radio" class="which" name="which_2" value="1" checked>片道
<input type="radio" class="which" name="which_2" value="2">往復</label></td>
<td><input maxlength='7' type="text" name="field"></td>
</tr>
<tr>
<td><input maxlength='6' type="text" name="price"></td>
<td><label><input type="radio" class="which" name="which_3" value="1" checked>片道
<input type="radio" class="which" name="which_3" value="2">往復</label></td>
<td><input maxlength='7' type="text" name="field"></td>
</tr>
<tr>
<td align="right" colspan="3">合計</td>
<td><input type="text" name="field_total" value="0"></td>
</tr>
</table>
<table>
<tr>
<th>単価</th>
<th>数量</th>
<th>合計</th>
</tr>
<tr>
<td><input maxlength='6' type="text" name="price"></td>
<td class="left">
<select name="count">
<?php
$price=[0,1,2,3,4,5,6,7,8,9,10];
foreach($price as $item) {
echo '<option value="', $item ,'">', $item ,'</option>';}
?>  
</select></td>
<td><input maxlength='7' type="text" name="field"></td>
</tr>
<tr>
<td><input maxlength='6' type="text" name="price"></td>
<td class="left">
<select name="count">
<?php
$price=[0,1,2,3,4,5,6,7,8,9,10];
foreach($price as $item) {
echo '<option value="', $item ,'">', $item ,'</option>';}
?>  
</select></td>
<td><input maxlength='7' type="text" name="field"></td>
</tr>
<tr>
<td><input maxlength='6' type="text" name="price"></td>
<td class="left">
<select name="count">
<?php
$price=[0,1,2,3,4,5,6,7,8,9,10];
foreach($price as $item) {
echo '<option value="', $item ,'">', $item ,'</option>';}
?>  
</select></td>
<td><input maxlength='7' type="text" name="field"></td>
</tr>
<tr>
<td align="right" colspan="3">合計</td>
<td><input type="text" name="field_total" value="0"></td>
</tr>
</table>
<label>総合計</label>
<input type="text" name="allTotal">
</body>


** html

0 件のコメント:

コメントを投稿