자동 계산 프로그램 소스 입니다. 정보
자동 계산 프로그램 소스 입니다.
본문
사용자가 갑자기 일반 게시판에 자동 계산을 넣어달라고 해서
삽질을 하고 여러 참조글을 통하여 만들었습니다.
소스는 조금 많이 지저분합니다. 정리하여 쓰시면 될듯..
실질적으로 사용된 코드만 적어올려봅니다.
우선 스크립트는 다음과 같습니다.
<script>
//각각의 금액을 관리해줄 변수
totalMoneyBanana = 첫번째 물품 가격;
totalMoneyPineapple = 두번째 물품 가격;
//각각의 과일의 수량을 관리해줄 변수 Default --> 0
bananaSu = 0;
Pineapple = 0;
//옵션별 현황 출력.
function FruitChange()
{
var sltValue = selectedValue();
document.getElementById("wr_2").value = (sltValue == "ba") ? bananaSu : Pineapple;
MoneyTotalSum();
//이부분은 소스 초기화 하는 부분입니다. 옵션이 바뀔때마다 초기화를 원하시면
//이소스를 사용하시구요 위에 소스는 주석 처리하시면 됩니다.
//var sltValue = selectedValue();
//document.getElementById("wr_2").value = "1";
//document.getElementById("money").innerHTML = "금액 : " + ((sltValue == "ba") ? "3,000" : "5,000") + " 원";
//return false;
}
function TotalSum(values)
{
if("+" == values)
{
AddTotalSum();
MoneyTotalSum();
}
else
{
DelTotalSum();
MoneyTotalSum();
}
}
function EventCheck()
{
if(event.keyCode < 48 || event.keyCode > 57)
{
return false;
}
}
function MoneyTotalSum()
{
newMoney = document.getElementById("wr_2");
var totalMoneys ="";
if(newMoney.value != "")
{
var showMoney = document.getElementById("money");
//현재 선택된 value
var sltValue = selectedValue();
var sltMoney = (sltValue == "ba") ? BananaSum(newMoney) : PineappleSum(newMoney);
totalMoneys = MoneySwap(sltMoney);
}
else
{
totalMoneys = "0";
}
document.getElementById("money").innerHTML = totalMoneys + " 원";
}
//현재 select value return
function selectedValue()
{
var sltOption = document.getElementById("fruit");
var index = sltOption.selectedIndex
var sltValue = sltOption.options[index].value
return sltValue;
}
//첫번째 물품 금액
function BananaSum(suvalues)
{
bananaSu = parseInt(suvalues.value);
totalMoneyBanana = bananaSu * 첫번째물품가격;
return totalMoneyBanana
}
//두번째 물품 금액
function PineappleSum(suvalues)
{
Pineapple = parseInt(suvalues.value);
totalMoneyPineapple = Pineapple * 두번째물품가격;
return totalMoneyPineapple
}
//3자리 수마다 ',' 찍어주는 함수
function MoneySwap(mValue)
{
var temp_str = String(mValue);
for(var i = 0 , retValue = String() , stop = temp_str.length; i < stop ; i++)
{
retValue = ((i%3) == 0) && i != 0 ? temp_str.charAt((stop - i) -1) + "," + retValue : temp_str.charAt((stop - i) -1) + retValue;
}
return retValue;
}
</script>
다음은 수량 과 가격부분입니다. 물품은 따로 인풋값 만들어서 받으시면 될듯..
<style type="text/css">
.t1 { height:30px; text-align:center; font-weight: bold; color:#454546; background-color:#f0f0f0; padding:5 5 5 5;}
.t2 { height:30px; text-align:left; color:#000000;background-color:#fafafa; padding:5 5 5 5;}
.t3 { border:1px solid #cccccc;background-color:#ffffff;color:#000000; }
</style>
<table width="<?=$width?>" align=center cellpadding=0 cellspacing=0>
<tr>
<td class="t1">수량</td>
<td class="t2"><select name="fruit" size="1" onchange="FruitChange()">
<option value="ba">첫번째 물품</option>
<option value="pa">두번째 물품</option>
</select>
수량 :
<input type="text" name="wr_2" onkeyup="return MoneyTotalSum()" onkeypress="return EventCheck()" maxlength="3" size="2" value="<?$write[wr_2]?>" autocomplete='off'> 개
</td>
</tr>
<tr>
<td class="t1">금액</td>
<td class="t2">
<textarea id="money" name="wr_4" class=t3 style='width:30%; word-break:break-all;' rows=1 <? if ($write_min || $write_max) { ?>onkeyup="check_byte('wr_4', 'char_count');"<?}?>><?=$write[wr_4]?></textarea>
<? if ($write_min || $write_max) { ?><script language="javascript"> check_byte('wr_4', 'char_count'); </script><?}?>
</td>
</tr>
실제 적용 이미지는 첨부 이미지와 같습니다.
처음 올려본 팁이라 조금 조잡한 부분이 많네요 ㅠㅠa
그래도 직접 테스트 해보고 올리는글입니다.
혹 안되신다면 리플을 -_-a
6
댓글 7개




하나 질문은..
항목 수를 늘릴려면 어케해야하는지요?