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
“무릇 물이란 지세를 따라 흐르되 작은 틈도 놓치지 않고 적시니 지혜를 갖춘 자와 같고, 움직이면서 아래로 흘러가니 예를 갖춘 자와 같으며, 어떤 깊은 곳도 머뭇거리지 않고 들어가니 용기를 가진 자와 같고 장애물이 막혀서 갇히면 고요히 맑아지니 천명을 아는 자와 같으며, 험한 곳을 거쳐 멀리 흐르지만 끝내 남을 허물어뜨리는 법이 없으니 덕을 가진 자와 같다. 천지는 이것으로 이루어지고, 만물은 이것으로 살아가며, 나라는 이것으로 안녕을 얻고, 만사는 이것으로 평안해지며, 만물은 이것으로 바르게 되는 것이다. 이것이 지혜로운 자가 물을 좋아하는 이유이다.” (한영, <<한시외전>>)