بطبيعة الحال ، يمكن استخدام تأثير عربة التسوق التي حققها JavaScript في العديد من الأماكن ، مثل اختيار الأصدقاء ، وحدات الموارد البشرية ، وحساب الرواتب ، واختيار الموظفين ، وما إلى ذلك. فيما يلي عرضًا لعربة التسوق مماثلة ل:
شفرة:
GoodsCar.js: هذا JS مكتوب كملف منفصل. يتحكم بشكل رئيسي في عرض القائمة أعلاه.
نسخة الكود كما يلي:
window.onload = function () {
initStore () ؛
} ؛
VARM GOUDS = ["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 OptionNode = document.createElement ("Option") ؛
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) ؛
}
وظيفة حذف () {
// 1. سجل المنتج المراد نقله
var in_store = document.getElementById ("select_store") ؛
var out_store = document.getElementById ("select_my") ؛
MoveGoods (in_store ، out_store) ؛
}
/*
* منتجات الهاتف المحمول:
1. Intostre: انقل البضائع إلى المستودع
2.OutStore: قم بإزالة المنتج من المستودع
*/
//يتحرك
وظيفة movegoods (Instore ، OutStore) {
// ============================================================ ===============================================================
temps = [] ؛
// حلقة للحصول على جميع عناصر القائمة في المتجر
لـ (var x = 0 ؛ x <outstore.options.length ؛ x ++)
{
VAR OPTION = OutStore.options [x] ؛
// أضف عنصر القائمة المحددة إلى الصفيف المؤقت لتخزينه
if (Option.selected) {
temps.push (خيار) ؛ // إضافة بيانات في الصفيف المؤقت. لتجنب الازدواجية ، يجب مسح ذاكرة التخزين المؤقت
}
}
// 2. حذف العناصر المحددة في قائمة المتجر
// 3. إضافة منتجات محددة إلى عربة التسوق
لـ (var x = 0 ؛ x <temps.length ؛ x ++)
{
// كل عقدة لديها عقدة الوالدين واحدة فقط
// حذف أولاً ثم أضف
OutStore.removechild (Temps [X]) ؛
//اضف إليه
Instore.AppendChild (temps [x]) ؛
}
}
ما يلي هو الملف الرئيسي ؛
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> إدراج العنوان هنا </title>
<type type = "text/css">
طاولة{
الحدود: 10 بكسل ؛
}
يختار{
العرض: 200 بكسل ؛
الارتفاع: 400 بكسل ؛
}
#order_area {
العرض: لا شيء ؛
}
</style>
<script type = "text/javaScript" src = "goodscar.js"> </script>
<script type = "text/javaScript">
var selectgoods = []
// قم بإنشاء أوامر بناءً على المنتجات في عربة التسوق
وظيفة createRorder () {
// عرض منطقة الطلب
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] ؛
selectGoods.push (optnode.innerhtml) ؛
}
// السفر فوق المنتج وتوليد الطلبات
لـ (var x = 0 ؛ x <selectgoods.length ؛ x ++) {
///*قالب لإنشاء البيانات ديناميكيًا
// <viv> <!-من السهل العثور على سمة الاسم->
// <input type = "checkbox" name = "myorder"> <span> رجل وسيم 20 يوان </span>
// </div>
//*/
var divnode = document.createElement ("div") ؛
OrderAreadiv.AppendChild (divnode) ؛
var inputmyorder = document.createElement ("input") ؛
inputMyRyorder.setAttribute ("type" ، "checkbox") ؛
inputMyorder.setAttribute ("name" ، "myorder") ؛
divnode.appendchild (inputMyorder) ؛
var spannode = document.createElement ("span") ؛
// قم بإنشاء عدد عشوائي من 50 إلى 100
var price = math.floor (math.random ()*50+50) ؛
inputMyOrder.value = السعر ؛
spannode.innerhtml = selectGoods [x]+""+price ؛
divnode.appendchild (spannode) ؛
//inputmyorder.appendchild(spannode) ؛ خطأ ، لأن الامتداد والمدخلات هما عناصر من نفس المستوى
// أضف divnode المجمعة إلى قائمة Order
var order_list = document.getElementById ("order_list") ؛
order_list.appendchild (divnode) ؛
}
}
/*
* لا يزال بإمكانك اختيار الطلبات الجاهزة للدفع بالترتيب الذي تم تجديده ثم إجراء الدفع
ثلاث طرق للاختيار: حدد الكل: 1 ، لا تحدد: 0 ، عكسي حدد: 2 ؛ يمكن تحديد وظائف مربع الاختيار عدة مرات
*/
وظيفة mySelect (arg) {
// getElementsByName: احصل على مجموعة الكائنات بناءً على قيمة سمة علامة الاسم.
var orders = document.getElementSbyName ("myorder") ؛
// تم استخدام الجملة التالية بشكل غير صحيح أثناء عملية كتابة رمز
// getElementsByTagName: الحصول على مجموعة الكائن بناءً على اسم العنصر المحدد.
// var orders = document.getElementSbyTagName ("myorder") ؛
لـ (var x = 0 ؛ x <orders.length ؛ x ++) {
var order = الأوامر [x] ؛
إذا (arg == "1") {
order.checked = true ؛
}
آخر إذا (arg == "0") {
order.checked = false ؛
}
آخر إذا (arg == "2") {
order.checked =! order.checked ؛
}
}
}
// Checkout and Pay ، يتم استخدام هنا لإظهار مقدار جميع المنتجات التي ظهرت بواسطة إصدار الحوار.
وظيفة paymoney () {
var orders = document.getElementSbyName ("myorder") ؛
// إجمالي السعر
var sum = 0 ؛
لـ (var x = 0 ؛ x <orders.length ؛ x ++) {
var order = الأوامر [x] ؛
if (order.checked) {
// تحقق من ما يجب شراؤه.
sum = sum+number (order.value) ؛
}
}
تنبيه ("أنت ترى ما إذا كنت تريد الدفع"+sum+"Yuan") ؛
}
</script>
</head>
<body>
<griding>
<tr>
<td>
<!-معنى السمة المتعددة لكائن SELECT: تعيين أو الحصول على القيمة المنطقية التي تشير إلى ما إذا كان يمكن تحديد عناصر متعددة في القائمة->
<حدد ID = "SELECT_STORE" MONITION = "MONITION">
<ptgroup label = "قائمة المنتج"> </ptgroup>
</select>
</td>
<td>
<type type = "button" value = ">>" onClick = "SelectGoods () ؛"/> <br>
<type type = "button" value = "<<" onClick = "deletegoods () ؛"/>
</td>
<td>
<حدد ID = "SELECT_MY" MONITION = "MONITION">
<ptgroup label = "My Shopping Cart"> </ptgroup>
</select>
</td>
<td> <input type = "button" value = "إنشاء ترتيب" onClick = "createRorder () ؛"/> </td>
</r>
</table>
<hr/>
<div id = "order_area">
<h3> الرجاء تحديد المنتج الذي تريد شراؤه: </h3>
<div id = "order_list">
<!- <viv>
<type type = "checkbox"> <span> رجل وسيم 20 يوان </span>
</viv>->
</div>
<type type = "button" value = "حدد All" onClick = "mySelect ('1') ؛"/>
<type type = "button" value = "لا تحدد" onClick = "mySelect ('0') ؛"/>
<type type = "button" value = "anti-select" onClick = "mySelect ('2') ؛"/> <br>
<type type = "button" value = "pay" onClick = "paymoney () ؛"/>
</div>
</body>
</html>