Html & Script

상품 선택 및 실시간 가격변동 자바스크립트

페이지 정보

본문

<pre>
이것은 1개의 아이템의 여러가지 조건을 갖고 있습니다.
하지만 사용자 인터페이스에서 조건을 변경할 경우 즉시 사용자의 화면에 적용이 되어 보여지게 되는 것을 위함입니다.


이 예제 페이지에서는 변경을 원하고자 하는 아이템이 1개일 경우를 전제조건으로 답니다.

상품명 : 금반지에용.
원래가격 : <span id='total_price'>0</span>원
<form name='price_exec' method='get' onSubmit='submit_value();'>

<!--원래 가격을 hidden된 total_price에 넣어주세요-->
<input type=hidden name='total_price' value='150000'>
<!--계산된 총 가격을 보내기 위함-->
<input type=hidden name='exec_price' value='0'>

종류 : <select name='jongryu' onChange='change_price();'>
        <option value='1'>14k</span>
        <option value='1.3'>18k</span>
        <option value='1.6'>순금</span>
      </selecT>
수량 : <select name='getsu' onChange='change_price();'>
        <option value='1'>1개</option>
        <option value='2'>2개</option>
        <option value='3'>3개</option>
        <option value='4'>4개</option>
        <option value='5'>5개</option>
        <option value='6'>6개</option>
        <option value='7'>7개</option>
      </select>
성별 : <select name='sex' onChange='change_price();'>
        <option value='1'>여자꺼</option>
        <option value='1.5'>남자꺼</option>
      </select>

<script>
function submit_value(){
    var f=document.price_exec;
    opened=window.open('','test','width=300,height=300');
    opened.document.writeln('<pre>총 가격 : '+f.exec_price.value+'<br>구매갯수 : '+f.getsu.value+'<br>종류 : '+f.sex.value);
}

function change_price(value){
    //귀찮으니까 price_exec form을 f로 설정
    var f=document.price_exec;
    //원가(가장 기초되는 가격)를 읽어온다. 이때 option들은 가장 기초적인 것들로 구성해야 한다.
    original_price=parseInt(f.total_price.value);

    //모든 값들을 곱한다.
    ok_price=original_price * f.jongryu.value * f.getsu.value * f.sex.value;

    //세자리마다 , 찍어주면 좋겠죠?
    //우선 정수를 문자형으로 변환
    var checked_price=''+ok_price;
    //만약 합계금액이 십만원 초과이며 천만원 미만일때
    if(checked_price.length-1>=6){
        //우선 문자형으로 변환한 가격의 자릿수를 구함
        alength=checked_price.length-1;
        //3으로 딱 떨어지게 나머지 구하여 나머지값+원본을 하여 3 6 9 형식으로 맞춤 (3으로 잘라서 붙이기 위하여).
        count_r=parseInt(alength%3);
        count_r=3-count_r;
        count=parseInt(checked_price.length-1)+parseInt(count_r);
        //이건 특수형 (맨 앞부터 남은갯수를 구하기 위함.)
        count_rd=parseInt((alength+1)%3);
        //잘라서 콤마를 붙일 자릿수 구함. first, second, third
        first=((count/3-1)*3)-2;
        second=first-3;
        third=0;
        //가격 자르기
        ook_price_1=checked_price.substr(first,3);
        ook_price_2=checked_price.substr(second,3)+',';
        if(checked_price.substr(third,count_rd)!=''){
            ook_price_3=checked_price.substr(third,count_rd)+',';
        }else{
            ook_price_3='';
        }
        //출력할 가격 조합.
        print_price=ook_price_3+ook_price_2+ook_price_1;

    //만약 합계금액이 천원 이상이며 십만원 이하일때
    }else if(checked_price.length-1>3 && checked_price.length-1<6){
        ook_price_1=checked_price.substr(3,3);
        ook_price_2=checked_price.substr(0,checked_price.length-3);
        print_price=ook_price_2+','+ook_price_1;
    //백원단위일 경우.
    }else{
        print_price=checked_price;
    }
    //페이지에 보여줌
    total_price.innerHTML=print_price;
    //form에 결과값 저장
    f.exec_price.value=ok_price;
}

//페이지 로딩시 한번 동작시켜주자.
change_price();
</script>
<input type=submit value='구매하자~!'>


------------------------------------------------------------

<SCRIPT>
function calc_price(value)
{
var calc = document.price;
calcTotalPrice = calc.LIST.value * calc.QUANTITY.value * calc.SPECIAL.value;
printNumber = NumberFormat(calcTotalPrice);
total_price.innerHTML=printNumber;
calc.exec_price.value=printNumber;
}
function NumberFormat(val)
{
var comma = ""+val;
len = comma.length;
str1="";
for(i = 1;i<=len;i++)
{
str1 = comma.charAt(len-i) + str1;
if((i%3 ==0) && (len-i !=0))
str1 = ","+str1;
}
return str1;
}
</SCRIPT>

<span id='total_price'>0</span>원
<FORM NAME="price" METHOD="get">
<input name="exec_price">
종류 : <SELECT NAME="LIST" onChange='calc_price();'>
<OPTION VALUE='8'>좋은것</OPTION>
<OPTION VALUE='5'>안좋은것</OPTION>
</SELECT>
수량 : <SELECT NAME='QUANTITY' onChange='calc_price();'>
<OPTION VALUE='100'>100개</OPTION>
<OPTION VALUE='200'>200개</OPTION>
<OPTION VALUE='300'>300개</OPTION>
<OPTION VALUE='400'>400개</OPTION>
<OPTION VALUE='500'>500개</OPTION>
</SELECT>

특징 : <SELECT NAME='SPECIAL' onChange='calc_price();'>
<OPTION VALUE='5'>비싸보이는것</OPTION>
<OPTION VALUE='7'>좋아보이는것</OPTION>
<OPTION VALUE='8'>쓸만해보이는것</OPTION>
<OPTION VALUE='10'>갖고싶은것</OPTION>
</SELECT>
</FORM>

관련자료

등록된 댓글이 없습니다.
Today's proverb
행복해지고 싶다면, 잠시 동안만이라도 가슴에 손을 얹고 생각해 보라. 그러면 진정한 즐거움은, 발치에 돋아나는 잡초나 아침 햇살에 빛나는 꽃의 이술과 같이 우리 주변에 무수히 널려 있다는 것을 알 수 있을 것이다. 《하루 5분 생각이 인생을 결정한다 》 (이범준)