자바스크립트로 구현한 장바구니 효과는 다양한 곳에서 활용 가능합니다_javascript 스킬

JavaScript로 구현된 장바구니 효과는 물론 친구 선택, 인사 모듈, 급여 계산, 인사 선택 등 다양한 곳에 사용될 수 있습니다. 아래는 장바구니와 유사한 렌더링입니다.

코드:

goodsCar.js: 이 js는 별도의 파일로 작성됩니다. 주로 위의 목록 표시를 제어합니다.

코드 복사 코드는 다음과 같습니다.

window.onload=function(){
initStore ();
};
var products=["ham","beauty","royal sister","화성 당일 여행","sports car"]; ==== ============= 임시 저장 영역을 정의해야 하는 이유를 명확하게 생각해 보세요 ==============
var temps=[] ;//임시 저장소
//웨어하우스 초기화 및 콘텐츠 추가
function initStore(){
var select_store=document.getElementById("select_store")
for(var x=0;x< ;goods.length;x )
{
//옵션 객체 생성
var optionNode=document.createElement("option")
optionNode.innerHTML=goods[x]
select_store .appendChild(optionNode);
}
}
//------------------ --------------
function selectGoods(){
//스토어의 선택 목록 개체 가져오기
var out_store=document.getElementById("select_store");
//내 상품의 선택 목록 개체 가져오기
var in_store=document.getElementById("select_my")
moveGoods(in_store,out_store)
}
function deleteGoods();
//1. 이동할 상품을 기록하세요.
var in_store=document.getElementById("select_store")
var out_store=document.getElementById("select_my")
moveGoods(in_store, out_store);
}
/*
* 상품 이동:
1.inSotre: 창고로 상품 이동
2.outStore: 창고 밖으로 상품 이동
*/
//이동
function moveGoods(inStore,outStore){
/ /================배열 캐시 지우기========= =========
temps=[];
// 스토어의 모든 목록 항목을 가져오는 루프
for(var x=0;x{
var option=outStore.options[x];
// 선택한 목록 항목을 저장용 임시 배열에 추가
if(option.selected){
temps.push (옵션);//임시 배열에 데이터를 추가합니다. 중복을 방지하려면 배열 캐시를 삭제해야 합니다
}
}
//2. 스토어 목록에서 선택한 항목을 삭제합니다//3. 선택한 제품을 장바구니에 추가합니다
for(var x=0;xinStore.appendChild(temps[x]);
}
}


다음은 메인 파일입니다.




코드 복사

코드는 다음과 같습니다.

//*/
var divNode =document.createElement("div");
orderAreaDiv.appendChild(divNode);
var inputMyOrder=document.createElement("input"); >inputMyOrder.setAttribute("type","checkbox");
inputMyOrder.setAttribute("name","myorder")
divNode.appendChild(inputMyOrder)
varspanNode=document.createElement( "span");//50에서 100 사이의 임의의 숫자를 생성합니다
var price=Math.floor(Math.random()*50 50)
inputMyOrder.value=price; >spanNode.innerHTML=selectedGoods[x] " " 가격;
divNode.appendChild(spanNode);
//inputMyOrder.appendChild(spanNode); /조합된 divNode를 주문 목록에 추가
var order_list = document.getElementById("order_list")
order_list.appendChild(divNode)
}
}
/*
* 재생성된 주문에서 결제 준비가 된 주문을 선택한 다음 결제할 수 있습니다.
세 가지 선택 방법: 모두 선택: 1, 선택하지 않음: 0, 반전: 확인란 자체에 더 많은 기능이 있을 수 있습니다.
*/
function mySelect(arg){
//getElementsByName: NAME 태그 속성 값을 기반으로 객체 컬렉션을 가져옵니다.
var order = document.getElementsByName("myorder");
//코드 작성 과정에서 다음 문장을 실수로 사용했습니다.
//getElementsByTagName: 지정된 요소 이름을 기반으로 객체 컬렉션 가져오기 .
//varorders=document.getElementsByTagName("myorder")
for(var x=0;xvar order=orders[x]; if(arg=="1"){
order.checked=true;
}
else if(arg=="0"){
order.checked=false;
else if(arg=="2"){
order.checked=!order.checked;
}
}
}
//체크아웃, 여기에서 대화를 사용하세요. 나타나는 모든 항목의 수량
function payMoney(){
var Orders = document.getElementsByName("myorder")
//총 가격
var sum=0
; (var x=0;xvar order =orders[x];
if(order.checked){
//꼭 사고 싶습니다.
sum=sum Number(order.value);
}
}

alert("결제해야 하는지 확인하세요 " sum "yuan")
}

>" onclick="selectGoods();"/>

---

구매하려는 제품을 선택하세요:

;