자바스크립트로 구현한 장바구니 효과는 다양한 곳에서 활용 가능합니다_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;x< temps.length; Add
inStore.appendChild(temps[x]);
}
}


다음은 메인 파일입니다.




코드 복사

코드는 다음과 같습니다.

---

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

;

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.