물론 JavaScript에서 달성 한 쇼핑 카트 효과는 친구, 인사 모듈, 급여 계산, 인원 선택 등의 선택과 같은 많은 장소에서 사용할 수 있습니다.
암호:
GoodsCar.js :이 JS는 별도의 파일로 작성되었습니다. 주로 위 목록의 표시를 제어합니다.
코드 사본은 다음과 같습니다.
Window.onload = function () {
initstore ();
};
var goods = [ "ham", "beauty", "mother lady", "day tour of mars", "스포츠카"];
// ============================ 왜 임시 저장 영역을 정의하고 명확하게 생각해야합니까? ===================================================================================================================================== =====================================================================================================================================
var temps = []; // 임시 저장소
// 저장소 초기화 컨텐츠 추가를 선택합니다
함수 initstore () {
var select_store = document.getElementById ( "select_store");
for (var x = 0; x <goods.length; x ++)
{
// 옵션 객체를 만듭니다
var OptionNode = document.createElement ( "옵션");
OptionNode.innerhtml = roods [x];
select_store.appendChild (OptionNode);
}
}
//-----------------------------------------------------------------------------------------------------------------------------
함수 selectGoods () {
// 상점의 선택 목록 개체를 가져옵니다
var out_store = document.getElementById ( "select_store");
// 제품의 선택 목록 객체를 가져옵니다
var in_store = document.getElementById ( "select_my");
MoveGoods (in_store, out_store);
}
함수 deletegoods () {
// 1. 이동할 제품을 기록하십시오
var in_store = document.getElementById ( "select_store");
var out_store = document.getElementById ( "select_my");
MoveGoods (in_store, out_store);
}
/*
* 모바일 제품 :
1. 소트 : 상품을 창고로 옮깁니다
2. Outstore : 창고에서 제품을 제거하십시오
*/
//이동하다
기능 movegoods (Instore, Outstore) {
// ========================================================================= =========================================================================== =========================================================================== ===========================================================================
온도 = [];
// 매장에서 모든 목록 항목을 가져 오려는 루프
for (var x = 0; x <outstore.options.length; x ++)
{
var 옵션 = outstore.options [x];
// 선택한 목록 항목을 임시 배열에 추가하여 저장
if (Option.Selected) {
temps.push (옵션); // 임시 배열에 데이터를 추가합니다. 복제를 피하려면 배열 캐시를 지워야합니다
}
}
// 2. 상점 목록에서 선택한 항목을 삭제하십시오
// 3. 쇼핑 카트에 선택된 제품을 추가하십시오
for (var x = 0; x <temps.length; x ++)
{
// 각 노드에는 부모 노드가 하나뿐입니다
// 먼저 삭제 한 다음 추가하십시오
Outstore.removechild (Temps [x]);
// 추가
Instore.appendChild (Temps [x]);
}
}
다음은 기본 파일입니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> 제목을 여기에 삽입하십시오 </title>
<스타일 유형 = "텍스트/CSS">
테이블{
국경 : 10px;
}
선택하다{
너비 : 200px;
높이 : 400px;
}
#Order_Area {
디스플레이 : 없음;
}
</스타일>
<script type = "text/javaScript"src = "goodscar.js"> </script>
<script type = "text/javaScript">
var selectedGoods = []; // 캐시 된 영역
// 쇼핑 카트의 제품을 기반으로 주문 생성
함수 createOrder () {
// 주문 영역 표시
var OrderAreadiv = document.getElementById ( "Order_Area");
/* div 객체 아래에는 멤버 객체 스타일이 있습니다. 이 스타일 객체를 통해 DIV의 스타일을 제어 할 수 있습니다.
디스플레이 : DIV라는이 객체 또는 요소가 문서에 렌더링되어 있는지 여부를 나타냅니다.
사용 가능한 값 :
블록 : 객체는 블록 요소로 렌더링됩니다.
없음 : 객체는 렌더링되지 않습니다.
.........
이 예에서는 위의 두 값 만 사용하면 괜찮을 것입니다. 위의 내용은 문서에서 나옵니다
*/
// 노드 객체의 속성 작동 스타일을 사용합니다
OrderAreadiv.style.display = "블록";
var select_my = document.getElementById ( "select_my");
for (var x = 0; x <select_my.options.length; x ++) {
//
var optnode = select_my.options [x];
selectedgoods.push (optnode.innerhtml);
}
// 제품을 여행하고 주문을 생성합니다
for (var x = 0; x <selectedGoods.length; x ++) {
///*데이터를 동적으로 생성하기위한 템플릿
// <div> <!-이름 속성을 쉽게 찾을 수 있습니다->
// <input type = "checkbox"name = "myorder"> <span> 잘 생긴 남자 20 위안 </span>
// </div>
//*/
var divnode = document.createElement ( "div");
OrderAreadV.AppendChild (Divnode);
var inputmyorder = document.createElement ( "입력");
inputmyorder.setattribute ( "type", "checkbox");
inputmyorder.setattribute ( "이름", "myorder");
divnode.appendChild (inputMyorder);
var spannode = document.createElement ( "span");
// 무작위로 50 ~ 100의 무작위 숫자를 생성합니다.
var price = math.floor (math.random ()*50+50);
inputmyorder.value = 가격;
spannode.innerhtml = selectedGoods [x]+""+price;
divnode.appendChild (Spannode);
//inputmyorder.appendChild(spannode); 스팬과 입력이 같은 수준의 요소이기 때문에 오류
// 조립 된 Divnode를 OrderList에 추가합니다
var order_list = document.getElementById ( "Order_List");
order_list.appendChild (divnode);
}
}
/*
* 재생 주문으로 지불 할 준비가 된 주문을 계속 선택한 다음 지불 할 수 있습니다.
선택하는 세 가지 방법 : 모두 선택 : 1, 선택하지 않음 : 0, 역 선택 : 2; CheckBox의 자체 기능은 여러 번 선택할 수 있습니다
*/
함수 mySelect (arg) {
// getElementsByName : 이름 태그 속성의 값을 기반으로 객체 모음을 가져옵니다.
var orders = document.getElementsByName ( "myorder");
// 코드 작성 과정에서 다음 문장이 잘못 사용되었습니다.
// getElementsByTagName : 지정된 요소 이름을 기반으로 객체 수집을 가져옵니다.
// var orders = document.getElementsByTagName ( "myorder");
for (var x = 0; x <orders.length; x ++) {
var order = 주문 [x];
if (arg == "1") {
order.checked = true;
}
else if (arg == "0") {
order.checked = false;
}
else if (arg == "2") {
Order.Checked =! Order.Checked;
}
}
}
// 체크 아웃 및 지불, 여기에서는 대화 버전에서 팝업 된 모든 제품의 양을 보여주는 데 사용됩니다.
함수 paymoney () {
var orders = document.getElementsByName ( "myorder");
// 총 가격
var sum = 0;
for (var x = 0; x <orders.length; x ++) {
var order = 주문 [x];
if (order.Checked) {
// 구매할 내용을 확인하십시오.
sum = sum+number (order.value);
}
}
Alert ( ""+sum+"yuan"을 지불하고 싶은지 확인);
}
</스크립트>
</head>
<body>
<테이블>
<tr>
<td>
<!-선택 객체의 다중 속성의 의미 : 목록에서 여러 항목을 선택할 수 있는지 여부를 나타내는 부울 값을 설정하거나 가져옵니다.
<select id = "select_store"multuple = "multure">
<optgroup label = "제품 목록"> </optgroup>
</선택>
</td>
<td>
<입력 유형 = "버튼"value = ">>"onclick = "selectGoods ();"/> <br>
<입력 유형 = "버튼"value = "<<"onclick = "deletegoods ();"/>
</td>
<td>
<select id = "select_my"multuple = "multiple">
<optgroup label = "내 쇼핑 카트"> </optgroup>
</선택>
</td>
<td> <input type = "button"value = "Orderate Onclick ="createOrder (); "/> </td>
</tr>
</테이블>
<hr/>
<div id = "Order_Area">
<H3> 구매할 제품을 선택하십시오 : </h3>
<div id = "Order_List">
<!- <div>
<입력 유형 = "checkbox"> <span> 잘 생긴 남자 20 위안 </span>
</div>->
</div>
<input type = "button"value = "모두 선택"onclick = "mySelect ( '1');"/>
<input type = "button"value = "not select"onclick = "mySelect ( '0');"/>
<입력 유형 = "버튼"value = "anti-select"onclick = "mySelect ( '2');"/> <br>
<입력 유형 = "button"value = "pay"onclick = "paymoney ();"/>
</div>
</body>
</html>