แน่นอนว่าผลกระทบของตะกร้าสินค้าที่ทำได้โดย JavaScript แน่นอนว่าเอฟเฟกต์นี้สามารถใช้ในหลาย ๆ ที่เช่นทางเลือกของเพื่อนโมดูลทรัพยากรมนุษย์การคำนวณเงินเดือนการเลือกบุคลากร ฯลฯ นี่คือการแสดงผลของตะกร้าสินค้าคล้ายกับ:
รหัส:
GoodsCar.js: JS นี้เขียนเป็นไฟล์แยกต่างหาก ส่วนใหญ่ควบคุมการแสดงผลของรายการด้านบน
การคัดลอกรหัสมีดังนี้:
window.onload = function () {
initstore ();
-
var goods = ["Ham", "Beauty", "Mother Lady", "Day Tour of Mars", "Sports Car"];
// ============================== ทำไมคุณต้องกำหนดพื้นที่จัดเก็บชั่วคราวและคิดอย่างชัดเจน - -
var temps = []; // ที่เก็บชั่วคราว
// เริ่มต้นที่เก็บเลือกเพิ่มเนื้อหา
ฟังก์ชั่น initstore () {
var select_store = document.getElementById ("select_store");
สำหรับ (var x = 0; x <goods.length; x ++)
-
// สร้างวัตถุตัวเลือก
VAR OPTIVENODE = DOCANTEELEELMELEMENT ("ตัวเลือก");
OptionNode.innerhtml = สินค้า [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);
-
ฟังก์ชั่น deleeteGoods () {
// 1. บันทึกผลิตภัณฑ์ที่จะย้าย
var in_store = document.getElementById ("select_store");
var out_store = document.getElementById ("select_my");
MoveGoods (in_store, out_store);
-
-
* ผลิตภัณฑ์มือถือ:
1.insotre: ย้ายสินค้าไปยังคลังสินค้า
2. ออปเตอร์: ลบผลิตภัณฑ์ออกจากคลังสินค้า
-
//เคลื่อนไหว
ฟังก์ชั่น MoveGoods (Instore, Outstore) {
- - - -
temps = [];
// loop เพื่อรับรายการทั้งหมดในร้านค้า
สำหรับ (var x = 0; x <outstore.options.length; x ++)
-
ตัวเลือก var = outstore.options [x];
// เพิ่มรายการที่เลือกลงในอาร์เรย์ชั่วคราวเพื่อจัดเก็บ
if (options.selected) {
temps.push (ตัวเลือก); // เพิ่มข้อมูลในอาร์เรย์ชั่วคราว เพื่อหลีกเลี่ยงการทำซ้ำจะต้องล้างแคชอาร์เรย์
-
-
// 2. ลบรายการที่เลือกในรายการร้านค้า
// 3. เพิ่มผลิตภัณฑ์ที่เลือกลงในตะกร้าสินค้า
สำหรับ (var x = 0; x <temps.length; x ++)
-
// แต่ละโหนดมีโหนดพาเรนต์เดียว
// ลบก่อนแล้วเพิ่ม
Outstore.RemoveChild (Temps [X]);
// เพิ่มไปที่
Instore.AppendChild (อุณหภูมิ [x]);
-
-
ต่อไปนี้เป็นไฟล์หลัก
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> แทรกชื่อเรื่องที่นี่ </title>
<style type = "text/css">
โต๊ะ{
ชายแดน: 10px;
-
เลือก{
ความกว้าง: 200px;
ความสูง: 400px;
-
#order_area {
แสดง: ไม่มี;
-
</style>
<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 = "block";
var select_my = document.getElementById ("select_my");
สำหรับ (var x = 0; x <select_my.options.length; x ++) {
-
var optnode = select_my.options [x];
selectedGoods.push (optnode.innerhtml);
-
// เดินทางข้ามผลิตภัณฑ์และสร้างคำสั่งซื้อ
สำหรับ (var x = 0; x <selectedGoods.length; x ++) {
///*เทมเพลตสำหรับการสร้างข้อมูลแบบไดนามิก
// <div> <!-แอตทริบิวต์ชื่อหาง่าย->
// <อินพุต type = "ช่องทำเครื่องหมาย" name = "myorder"> <span> ผู้ชายหล่อ 20 หยวน </span>
// </div>
-
var divnode = document.createElement ("div");
OrderAreadiv.AppendChild (divnode);
var inputMyOrder = document.createElement ("input");
InputMyOrder.setAttribute ("type", "ช่องทำเครื่องหมาย");
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]+""+ราคา;
divnode.appendchild (spannode);
//inputmyorder.appendchild(Spannode); ข้อผิดพลาดเนื่องจากช่วงและอินพุตเป็นองค์ประกอบของระดับเดียวกัน
// เพิ่ม divnode ที่ประกอบเข้ากับ orderlist
var order_list = document.getElementById ("order_list");
order_list.appendchild (divnode);
-
-
-
* คุณยังสามารถเลือกคำสั่งซื้อที่พร้อมจ่ายตามคำสั่งซื้อใหม่แล้วทำการชำระเงิน
สามวิธีในการเลือก: เลือกทั้งหมด: 1 อย่าเลือก: 0, ย้อนกลับเลือก: 2; ฟังก์ชั่นของช่องทำเครื่องหมายสามารถเลือกได้หลายครั้ง
-
ฟังก์ชั่น myselect (arg) {
// getElementsByName: รับคอลเลกชันของวัตถุตามค่าของแอตทริบิวต์แท็กชื่อ
คำสั่งซื้อ var = document.getElementsByName ("myorder");
// ประโยคต่อไปนี้ถูกใช้อย่างไม่ถูกต้องในระหว่างกระบวนการเขียนรหัส
// getElementsByTagname: รับการรวบรวมวัตถุตามชื่อองค์ประกอบที่ระบุ
// คำสั่งซื้อ var = document.getElementsByTagname ("myorder");
สำหรับ (var x = 0; x <orders.length; x ++) {
คำสั่งซื้อ var = คำสั่งซื้อ [x];
ถ้า (arg == "1") {
order.Checked = true;
-
อื่นถ้า (arg == "0") {
order.checked = false;
-
อื่นถ้า (arg == "2") {
order.Checked =! order.Checked;
-
-
-
// เช็คเอาต์และการจ่ายเงินที่นี่ใช้เพื่อแสดงจำนวนผลิตภัณฑ์ทั้งหมดที่เกิดขึ้นโดยเวอร์ชันบทสนทนา
ฟังก์ชั่น paymoney () {
คำสั่งซื้อ var = document.getElementsByName ("myorder");
// ราคารวม
var sum = 0;
สำหรับ (var x = 0; x <orders.length; x ++) {
คำสั่งซื้อ var = คำสั่งซื้อ [x];
if (order.chected) {
// ตรวจสอบว่าจะซื้ออะไร
sum = sum+number (order.value);
-
-
การแจ้งเตือน ("คุณเห็นว่าคุณต้องการจ่าย"+sum+"หยวน");
-
</script>
</head>
<body>
<table>
<tr>
<td>
<!-ความหมายของแอตทริบิวต์หลายตัวของวัตถุที่เลือก: ตั้งค่าหรือรับค่าบูลีนระบุว่าสามารถเลือกหลายรายการในรายการ->
<select id = "select_store" multility = "multiple">
<optGroup label = "รายการผลิตภัณฑ์"> </petGroup>
</เลือก>
</td>
<td>
<input type = "button" value = ">>" onclick = "selectGoods ();"/> <br>
<อินพุต type = "button" value = "<<" onclick = "deleeteGoods ();"/>
</td>
<td>
<select id = "select_my" multille = "multiple">
<optGroup label = "My Shopping Cart"> </petGroup>
</เลือก>
</td>
<td> <อินพุต type = "ปุ่ม" value = "สร้างลำดับ" onClick = "createOrder ();"/> </td>
</tr>
</table>
<HR/>
<div id = "order_area">
<H3> โปรดเลือกผลิตภัณฑ์ที่คุณต้องการซื้อ: </h3>
<div id = "order_list">
<!- <div>
<อินพุต type = "ช่องทำเครื่องหมาย"> <pan> ผู้ชายหล่อ 20 หยวน </span>
</div>->
</div>
<อินพุต type = "button" value = "เลือกทั้งหมด" onclick = "myselect ('1');"/>
<อินพุต type = "button" value = "ไม่เลือก" onclick = "myselect ('0');"/>
<อินพุต type = "button" value = "anti-select" onclick = "myselect ('2');"/> <br>
<อินพุต type = "button" value = "pay" onclick = "paymoney ();"/>
</div>
</body>
</html>