<!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