Efek keranjang belanja yang dicapai oleh JavaScript, tentu saja, efek ini dapat digunakan di banyak tempat, seperti pilihan teman, modul sumber daya manusia, perhitungan gaji, pemilihan personel, dll. Berikut ini adalah rendering keranjang belanja yang mirip dengan:
Kode:
GoodScar.js: JS ini ditulis sebagai file terpisah. Terutama mengontrol tampilan daftar di atas.
Salinan kode adalah sebagai berikut:
window.onload = function () {
initstore ();
};
var barang = ["ham", "kecantikan", "ibu wanita", "tur hari Mars", "mobil sport"];
// ============================= Mengapa Anda perlu mendefinisikan area penyimpanan sementara dan berpikir dengan jelas =================================================================================================================
var temps = []; // penyimpanan sementara
// Inisialisasi repositori Pilih Tambah Konten
fungsi initstore () {
var select_store = document.getElementById ("select_store");
untuk (var x = 0; x <goods.length; x ++)
{
// Buat Objek Opsi
var optionNode = document.createElement ("option");
optionNode.innerHtml = barang [x];
select_store.appendChild (optionNode);
}
}
// -------------------------------------------------------------------------------------------------------------------------
fungsi selectgoods () {
// Dapatkan objek Daftar Pilih Toko
var out_store = document.geteLementById ("select_store");
// Dapatkan Objek Daftar Pilih Produk Saya
var in_store = document.geteLementById ("select_my");
movegoods (in_store, out_store);
}
function deletegoods () {
// 1. Catat produk yang akan dipindahkan
var in_store = document.getElementById ("select_store");
var out_store = document.geteLementById ("select_my");
movegoods (in_store, out_store);
}
/*
* Produk Seluler:
1. Insotre: Pindahkan barang ke gudang
2.Store: Lepaskan produk dari gudang
*/
//bergerak
function mindegoods (Instore, Outstore) {
// ================================================================= ===================================================================
temps = [];
// Loop untuk mendapatkan semua item daftar di toko
untuk (var x = 0; x <outstore.options.length; x ++)
{
var option = outstore.Options [x];
// Tambahkan item daftar yang dipilih ke array sementara untuk disimpan
if (option.poelected) {
temps.push (opsi); // tambahkan data dalam array sementara. Untuk menghindari duplikasi, cache array harus dihapus
}
}
// 2. Hapus item yang dipilih dalam daftar toko
// 3. Tambahkan produk yang dipilih ke keranjang belanja
untuk (var x = 0; x <temps.length; x ++)
{
// Setiap node hanya memiliki satu node induk
// hapus dulu dan kemudian tambahkan
outstore.removechild (temps [x]);
// tambahkan ke
Instore.AppendChild (Temps [x]);
}
}
Berikut ini adalah file utama;
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> masukkan judul di sini </iteme>
<type style = "text/css">
meja{
Perbatasan: 10px;
}
memilih{
Lebar: 200px;
Tinggi: 400px;
}
#order_area {
Tampilan: Tidak Ada;
}
</tyle>
<script type = "text/javaScript" src = "goodscar.js"> </script>
<type skrip = "Teks/JavaScript">
var selectedgoods = []; // area cache
// Buat pesanan berdasarkan produk di keranjang belanja
function createOrder () {
// Tunjukkan area pemesanan
var orderAreadiv = document.getElementById ("order_area");
/* Ada gaya objek anggota di bawah objek Div. Melalui objek gaya ini, gaya div dapat dikontrol.
Tampilan: Menunjukkan apakah objek atau elemen ini yang disebut Div diterjemahkan dalam dokumen.
Nilai yang tersedia:
Blok: Objek diterjemahkan sebagai elemen blok.
Tidak ada: Objek tidak diterjemahkan.
.........
Dalam contoh ini, cukup gunakan dua nilai di atas dan akan baik -baik saja. Konten di atas berasal dari dokumen
*/
// Gunakan gaya operasi atribut objek node
orderareAdiv.style.display = "block";
var select_my = document.getElementById ("select_my");
untuk (var x = 0; x <select_my.options.length; x ++) {
//
var optnode = select_my.options [x];
selectedgoods.push (optnode.innerhtml);
}
// bepergian melalui produk dan menghasilkan pesanan
untuk (var x = 0; x <selectedgoods.length; x ++) {
///*Templat untuk menghasilkan data secara dinamis
// <div> <!-Atribut nama mudah ditemukan->
// <input type = "centang kotak" name = "myorder"> <span> pria tampan 20 yuan </span>
// </div>
//*//
var divnode = document.createElement ("div");
orderareAdiv.appendChild (divnode);
var inputMyOrder = document.createElement ("input");
inputMyOrder.setAttribute ("type", "centang kotak");
inputMyorder.setAttribute ("name", "myorder");
Divnode.AppendChild (InputMyOrder);
var spannode = document.createElement ("span");
// menghasilkan secara acak jumlah acak 50 hingga 100
var harga = math.floor (math.random ()*50+50);
inputMyOrder.value = harga;
spannode.innerhtml = selectedGoods [x]+""+harga;
Divnode.AppendChild (Spannode);
//inputMyorder.AppendChild(Spannode); kesalahan, karena rentang dan input adalah elemen dari level yang sama
// Tambahkan divnode yang dirakit ke daftar pesanan
var order_list = document.getElementById ("order_list");
order_list.appendChild (divnode);
}
}
/*
* Anda masih dapat memilih pesanan mana yang siap dibayar dalam pesanan yang dilahirkan kembali dan kemudian melakukan pembayaran
Tiga Cara untuk Memilih: Pilih Semua: 1, Jangan Pilih: 0, Reverse Pilih: 2; Fungsi centang sendiri dapat dipilih beberapa kali
*/
function myselect (arg) {
// GetElementsByName: Dapatkan koleksi objek berdasarkan nilai atribut tag nama.
var orders = document.geteLementsByName ("myorder");
// Kalimat berikut digunakan secara tidak benar selama proses penulisan kode
// GetElementsByTagname: Mendapatkan koleksi objek berdasarkan nama elemen yang ditentukan.
// var orders = document.geteLementsbyTagname ("myorder");
untuk (var x = 0; x <orders.length; x ++) {
var order = pesanan [x];
if (arg == "1") {
order.checked = true;
}
lain jika (arg == "0") {
order.checked = false;
}
lain jika (arg == "2") {
order.checked =! order.Checked;
}
}
}
// Checkout dan Pay, di sini digunakan untuk menunjukkan jumlah semua produk yang muncul oleh versi dialog.
fungsi paymoney () {
var orders = document.geteLementsByName ("myorder");
// Total harga
var sum = 0;
untuk (var x = 0; x <orders.length; x ++) {
var order = pesanan [x];
if (order.checked) {
// Periksa apa yang harus dibeli.
jumlah = jumlah+angka (order.value);
}
}
peringatan ("Anda lihat apakah Anda ingin membayar"+jumlah+"yuan");
}
</script>
</head>
<body>
<able>
<tr>
<td>
<!-Arti dari beberapa atribut dari objek pilih: atur atau dapatkan nilai boolean yang menunjukkan apakah beberapa item dapat dipilih dalam daftar->
<Pilih id = "select_store" multipel = "multipel">
<optgroup label = "Daftar Produk"> </optgroup>
</pilih>
</td>
<td>
<input type = "tombol" value = ">>" onclick = "selectgoods ();"/> <br>
<input type = "tombol" value = "<<" onclick = "deleteGoods ();"/>
</td>
<td>
<Pilih id = "select_my" multipel = "multipel">
<label optgroup = "keranjang belanja saya"> </optgroup>
</pilih>
</td>
<td> <input type = "tombol" value = "menghasilkan pesanan" onclick = "createOrder ();"/> </td>
</tr>
</boable>
<hr/>
<Div id = "order_area">
<h3> Pilih produk yang ingin Anda beli: </h3>
<Div id = "order_list">
<!- <div>
<input type = "centang kotak"> <span> pria tampan 20 yuan </span>
</div>->
</div>
<input type = "Tombol" value = "pilih semua" onclick = "mySelect ('1');"/>
<input type = "Tombol" value = "not schect" onClick = "myselect ('0');"/>
<input type = "tombol" value = "anti-select" onclick = "myselect ('2');"/> <br>
<input type = "tombol" value = "pay" onclick = "paymoney ();"/>
</div>
</body>
</html>