El efecto del carrito de compras logrado por JavaScript, por supuesto, este efecto se puede utilizar en muchos lugares, como la elección de amigos, módulos de recursos humanos, cálculo salarial, selección de personal, etc. Aquí hay una representación de un carrito de compras similar a:
Código:
GoodScar.js: este JS está escrito como un archivo separado. Controla principalmente la visualización de la lista anterior.
La copia del código es la siguiente:
window.onload = function () {
initStore ();
};
var bien = ["jamón", "belleza", "dama madre", "gira de día de Marte", "auto deportivo"];
// ============================ ¿Por qué necesitas definir un área de almacenamiento temporal y pensar con claridad con claridad? ========================================================================================================== ==========================================================================================================
var temps = []; // almacenamiento temporal
// Inicializar el repositorio Seleccione Agregar contenido
función initStore () {
var select_store = document.getElementById ("select_store");
para (var x = 0; x <goods.length; x ++)
{
// crear un objeto de opción
var optionNode = document.createElement ("opción");
opcionNode.InnerHtml = bienes [x];
select_store.appendChild (opcionNode);
}
}
// -------------------------------------------------------------------------------------------------------------------------
función selectGoods () {
// Obtener el objeto de lista de selección de la tienda
var out_store = document.getElementById ("select_store");
// Obtener el objeto Seleccionar lista de mi producto
var in_store = document.getElementById ("select_my");
MoveGoods (in_store, out_store);
}
función deletEgoods () {
// 1. Registre el producto a mover
var in_store = document.getElementById ("select_store");
var out_store = document.getElementById ("select_my");
MoveGoods (in_store, out_store);
}
/*
* Productos móviles:
1.Enotre: mueva los productos al almacén
2.Outstore: elimine el producto del almacén
*/
//mover
function MoveGoods (etapa, almacenamiento externo) {
// ================================================================ ====================================================================== ====================================================================== ======================================================================
temps = [];
// bucle para obtener todos los elementos de la lista en la tienda
para (var x = 0; x <outstore.options.length; x ++)
{
opción var = salar.options [x];
// Agregue el elemento de la lista seleccionado a la matriz temporal para almacenar
if (opción.selected) {
temps.push (opción); // Agregar datos en la matriz temporal. Para evitar la duplicación, se debe borrar el caché de la matriz
}
}
// 2. Eliminar elementos seleccionados en la lista de tiendas
// 3. Agregar productos seleccionados al carrito de compras
para (var x = 0; x <temps.length; x ++)
{
// Cada nodo tiene solo un nodo principal
// Eliminar primero y luego agregar
store.removechild (temperaturas [x]);
//Añadir
Instore.appendChild (temperaturas [x]);
}
}
El siguiente es el archivo principal;
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8">
<title> Insertar título aquí </title>
<style type = "text/css">
mesa{
borde: 10px;
}
seleccionar{
Ancho: 200px;
Altura: 400px;
}
#order_area {
Pantalla: ninguno;
}
</style>
<script type = "text/javaScript" src = "goodscar.js"> </script>
<script type = "text/javaScript">
var selectionGoods = []; // Área en caché
// Crear pedidos basados en los productos en el carrito de compras
function createOrder () {
// Sostrar área de pedido
var orderArEdiv = document.getElementById ("Order_area");
/* Hay un estilo de objeto miembro debajo del objeto Div. A través de este objeto de estilo, el estilo del div se puede controlar.
Pantalla: indica si este objeto o elemento llamado div se representa en el documento.
Valores disponibles:
Bloque: el objeto se representa como un elemento de bloque.
Ninguno: el objeto no se representa.
.........
En este ejemplo, simplemente use los dos valores anteriores y estará bien. El contenido anterior proviene del documento
*/
// usa el estilo de operación de atributo del objeto nodo
ordenareadiv.style.display = "bloque";
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);
}
// viajar por el producto y generar pedidos
para (var x = 0; x <selectedGoods.length; x ++) {
///*plantilla para generar datos dinámicamente
// <div> <!-El atributo de nombre es fácil de encontrar->
// <input type = "checkbox" name = "myorder"> <span> guapo guy 20 yuan </span>
// </div>
//*/
var divnode = document.createElement ("div");
ordenareadiv.appendchild (Divnode);
var inputMyorder = document.createElement ("entrada");
inputMyorder.SetAttribute ("Type", "Checkbox");
inputMyorder.SetAttribute ("Nombre", "MyOrder");
divnode.appendChild (inputMyorder);
var spannode = document.createElement ("span");
// Generar aleatoriamente un número aleatorio de 50 a 100
Var Price = Math.Floor (Math.random ()*50+50);
inputMyorder.Value = Price;
spannode.innerhtml = selectedGoods [x]+""+precio;
Divnode.AppendChild (Spannode);
//inputmyorder.appendChild(Spannode); error, porque el tramo y la entrada son elementos del mismo nivel
// Agregue el divnode ensamblado a la lista de orden
var order_list = document.getElementById ("Order_list");
orden_list.appendChild (Divnode);
}
}
/*
* Todavía puede elegir qué pedidos están listos para pagar en el pedido regenerado y luego realizar el pago
Tres formas de elegir: seleccione todo: 1, no seleccione: 0, reverso Seleccionar: 2; Las propias funciones de la casilla de verificación se pueden seleccionar varias veces
*/
función myselect (arg) {
// GetElementsByName: Obtenga la colección de objetos en función del valor del atributo de etiqueta de nombre.
Var orders = document.getElementsByName ("MyOrder");
// La siguiente oración se usó incorrectamente durante el proceso de escritura del código
// getElementsByTagName: Obtiene la colección de objetos basada en el nombre del elemento especificado.
// var orders = document.getElementsBytagName ("myOrder");
para (var x = 0; x <orders.length; x ++) {
orden var = órdenes [x];
if (arg == "1") {
orden.ecked = true;
}
else if (arg == "0") {
orden.ecked = false;
}
else if (arg == "2") {
orden.ecked =! orden.ecked;
}
}
}
// Tecking and Pay, aquí se usa para demostrar la cantidad de todos los productos surgidos por la versión de diálogo.
función paymoney () {
Var orders = document.getElementsByName ("MyOrder");
// precio total
var sum = 0;
para (var x = 0; x <orders.length; x ++) {
orden var = órdenes [x];
if (orden.ecked) {
// Verifique qué comprar.
sum = sum+número (orden.value);
}
}
alerta ("Ves si quieres pagar"+suma+"yuan");
}
</script>
</ablo>
<Body>
<Table>
<tr>
<TD>
<
<select id = "select_store" múltiple = "múltiple">
<optgroup etiqueta = "lista de productos"> </ptgroup>
</select>
</td>
<TD>
<input type = "button" value = ">>" onClick = "selectGoods ();"/> <br>
<input type = "button" value = "<<" onClick = "Deletegoods ();"/>
</td>
<TD>
<select id = "select_my" múltiple = "múltiple">
<optgroup etiqueta = "mi carrito de compras"> </ptgroup>
</select>
</td>
<TD> <input type = "button" value = "generar orden" onClick = "createOrder ();"/> </td>
</tr>
</table>
<hr/>
<div id = "orden_area">
<H3> Seleccione el producto que desea comprar: </h3>
<div id = "orden_list">
<!- <div>
<input type = "Checkbox"> <span> guapo Guy 20 yuan </span>
</div>->
</div>
<input type = "button" value = "Select All" onClick = "mySelect ('1' ');"/>
<input type = "button" value = "no select" onClick = "mySelect ('0');"/>
<input type = "button" value = "anti-select" onClick = "mySelect ('2');"/> <br>
<input type = "button" value = "pay" onClick = "paymoney ();"/>
</div>
</body>
</html>