JavaScript
テイクアウト：料金自動計算
飲食店などのテイクアウト用に必要かな？と簡単な料金自動計算のスクリプト書きました。
必要に応じてカスタマイズしてご使用ください。
<html>
<head>
<title>自動計算</title>
<meta charset="utf-8">
<script type="text/javascript">
<!--
function keisan(){
//------ START -------
var tax = 8; // TAX
// ★ハンバーガー
var price1 = document.form1.goods1.selectedIndex * 700;
document.form1.field1.value = price1;
// ★チーズバーガー
var price2 = document.form1.goods2.selectedIndex * 800;
document.form1.field2.value = price2;
// ★ダブルチーズバーガー
var price3 = document.form1.goods3.selectedIndex * 1200;
document.form1.field3.value = price3;
// ★ベーコンチーズバーガー
var price4 = document.form1.goods4.selectedIndex * 1000;
document.form1.field4.value = price4;
// ★ベーコンエッグチーズバーガー
var price5 = document.form1.goods5.selectedIndex * 1100;
document.form1.field5.value = price5;
// 小計
var total1 = price1 + price2 + price3 + price4 + price5;
//------ END -------
document.form1.field_total1.value = total1; // 小計
var tax2 = Math.round((total1 * tax) / 100);
document.form1.field_tax.value = tax2; // 消費税
document.form1.field_total2.value = total1 + tax2; // 総合計
}
// -->
</script>
<style type="text/css">
body {
margin: 0;
text-align: center;
}
.priceTable {
margin: 20px auto
}
.keisanTit {
padding: 5px;
color: #fff;
font-size: 12px;
text-align: center;
background: #000;
}
.keisanItem {
padding: 5px 40px 5px 15px;
font-size: 14px;
text-align: left;
background: #f1f1f1;
}
.keisanNum {
padding: 5px 10px;
font-size: 14px;
text-align: center;
border-bottom: dotted 1px #ccc;
}
.keisanNum select {
padding: 5px 10px;
font-size: 14px;
text-align: center;
}
.keisanNum option {
padding: 5px 10px;
font-size: 14px;
text-align: center;
border-bottom: dotted 1px #ccc;
}
.keisanTanka {
padding: 5px 20px;
font-size: 14px;
text-align: right;
border-bottom: dotted 1px #ccc;
}
.textPrice {
padding: 5px 10px;
font-size: 14px;
text-align: right;
border-bottom: dotted 1px #ccc;
}
.textTotal {
padding: 5px 10px;
font-size: 14px;
text-align: right;
border-bottom: solid 2px #555;
}
.keisanPrice {
padding: 5px 10px;
font-size: 14px;
text-align: right;
border-bottom: dotted 1px #ccc;
}
.keisanPrice input[type=text] {
padding: 5px 10px;
font-size: 14px;
text-align: right;
border: none;
}
.keisanTotal {
padding: 5px 10px;
font-size: 14px;
text-align: right;
border-bottom: solid 2px #f66;
}
.keisanTotal input[type=text] {
padding: 5px 10px;
font-size: 18px;
text-align: right;
border: none;
}
</style>
</head>
<body>
<form action="#" name="form1">
<table class="priceTable">
<tr>
<th class="keisanTit">商品名</th>
<th class="keisanTit">単価</th>
<th class="keisanTit">数量</th>
<th class="keisanTit">金額</th>
</tr>
<tr>
<td class="keisanItem">★ハンバーガー</td>
<td class="keisanTanka">700円</td>
<td class="keisanNum"><select name="goods1" onChange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select></td>
<td class="keisanPrice"><input type="text" name="field1" size="8" value="0"> 円</td>
</tr>
<tr>
<td class="keisanItem">★チーズバーガー</td>
<td class="keisanTanka">800円</td>
<td class="keisanNum"><select name="goods2" onChange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select></td>
<td class="keisanPrice"><input type="text" name="field2" size="8" value="0"> 円</td>
</tr>
<tr>
<td class="keisanItem">★ダブルチーズバーガー</td>
<td class="keisanTanka">1,200円</td>
<td class="keisanNum"><select name="goods3" onChange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select></td>
<td class="keisanPrice"><input type="text" name="field3" size="8" value="0"> 円</td>
</tr>
<tr>
<td class="keisanItem">★ベーコンチーズバーガー</td>
<td class="keisanTanka">1,000円</td>
<td class="keisanNum"><select name="goods4" onChange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select></td>
<td class="keisanPrice"><input type="text" name="field4" size="8" value="0"> 円</td>
</tr>
<tr>
<td class="keisanItem">★ベーコンエッグチーズバーガー</td>
<td class="keisanTanka">1,100円</td>
<td class="keisanNum"><select name="goods5" onChange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select></td>
<td class="keisanPrice"><input type="text" name="field5" size="8" value="0"> 円</td>
</tr>
<tr>
<td colspan="3" class="textPrice">小計</td>
<td class="keisanPrice"><input type="text" name="field_total1" size="8" value="0"> 円</td>
</tr>
<tr>
<td colspan="3" class="textPrice">消費税</td>
<td class="keisanPrice"><input type="text" name="field_tax" size="8" value="0"> 円</td>
</tr>
<tr>
<td colspan="3" class="textTotal"><strong>税込合計</strong></td>
<td class="keisanTotal"><input type="text" name="field_total2" size="8" value="0"> 円</td>
</tr>
</table>
<button type="submit" class="reset">リセット</button>
</form>
</body>
</html>