O efeito do carrinho de compras alcançado por JavaScript, é claro, esse efeito pode ser usado em muitos lugares, como a escolha de amigos, módulos de recursos humanos, cálculo salarial, seleção de pessoal, etc. Aqui está uma representação de um carrinho de compras semelhante a:
Código:
GoodScar.js: Este JS é escrito como um arquivo separado. Controla principalmente a exibição da lista acima.
A cópia do código é a seguinte:
window.onload = function () {
initstore ();
};
var bens = ["Ham", "Beauty", "Madren Lady", "Day Tour of Mars", "Sports Car"];
// ============================ Por que você precisa definir uma área de armazenamento temporário e pensar claramente ========================================================================================================== ==========================================================================================================
var temps = []; // armazenamento temporário
// Inicialize o repositório Selecione Adicionar conteúdo
function initstore () {
var select_store = document.getElementById ("select_store");
for (var x = 0; x <goods.length; x ++)
{
// Crie um objeto de opção
var optionNode = document.createElement ("option");
optionNode.innerhtml = bens [x];
select_store.appendChild (optionNode);
}
}
// -----------------------------------------------------------------------------------------------------------------------------------
função selectgoods () {
// Obtenha o objeto de lista de seleção da loja
var out_store = document.getElementById ("select_store");
// Obtenha o objeto Selecionar lista do meu produto
var in_store = document.getElementById ("select_my");
movegoods (in_store, out_store);
}
function Deletegoods () {
// 1. Registre o produto a ser movido
var in_store = document.getElementById ("select_store");
var out_store = document.getElementById ("select_my");
movegoods (in_store, out_store);
}
/*
* Produtos móveis:
1.Insotre: mova as mercadorias para o armazém
2.OUTSTORE: Remova o produto do armazém
*/
//mover
função movegoods (instore, estante) {
// ============================================================== ================================================================== ================================================================== ==================================================================
temps = [];
// loop para obter todos os itens da lista na loja
for (var x = 0; x <outstore.options.length; x ++)
{
var option = Outstore.options [x];
// Adicione o item da lista selecionada à matriz temporária para armazenar
if (option.selected) {
temps.push (opção); // Adicione dados na matriz temporária. Para evitar duplicação, o cache da matriz deve ser limpo
}
}
// 2. Excluir itens selecionados na lista de lojas
// 3. Adicione produtos selecionados ao carrinho de compras
for (var x = 0; x <temps.length; x ++)
{
// Cada nó tem apenas um nó pai
// exclua primeiro e depois adicione
Outstore.RemoveChild (Temps [x]);
//Adicionar à
Instore.appendChild (temps [x]);
}
}
A seguir, o arquivo principal;
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Insira o título aqui </ititure>
<style type = "text/css">
mesa{
borda: 10px;
}
Selecione {
Largura: 200px;
Altura: 400px;
}
#Order_area {
Exibir: Nenhum;
}
</style>
<script type = "text/javascript" src = "goodscar.js"> </script>
<script type = "text/javascript">
var selectedGoods = []; // área em cache
// Crie pedidos com base nos produtos no carrinho de compras
function createOrder () {
// Mostrar área de pedidos
var OrderAradiv = document.getElementById ("Order_area");
/* Existe um estilo de objeto de membro sob o objeto div. Através desse objeto de estilo, o estilo da div pode ser controlado.
Exibir: indica se esse objeto ou elemento chamado Div é renderizado no documento.
Valores disponíveis:
Bloco: O objeto é renderizado como um elemento de bloco.
Nenhum: objeto não é renderizado.
.........
Neste exemplo, basta usar os dois valores acima e ficará bem. O conteúdo acima vem do documento
*/
// Use o estilo de operação de atributo do objeto de nó
OrderAradiv.style.display = "Block";
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);
}
// viaja pelo produto e gerar pedidos
for (var x = 0; x <selectedgoods.length; x ++) {
///*modelo para gerar dados dinamicamente
// <div> <!-o atributo de nome é fácil de encontrar->
// <input type = "caixa de seleção" name = "myorder"> <pan> cara bonito 20 yuan </span>
// </div>
//*/
var divnode = document.createElement ("div");
OrderAradiv.AppendChild (Divnode);
var inputMyorder = document.createElement ("input");
inputMyorder.SetAttribute ("TYPE", "Caixa de seleção");
inputMyorder.SetAttribute ("Nome", "Myorder");
divnode.appendChild (inputMyorder);
var spannode = document.createElement ("span");
// gerar aleatoriamente um número aleatório de 50 a 100
var price = math.floor (Math.random ()*50+50);
inputMyorder.value = preço;
spannode.innerhtml = selectedgoods [x]+""+preço;
divnode.appendChild (spannode);
//inputMyorder.appendChild(spannode); erro, porque o span e a entrada são elementos do mesmo nível
// Adicione o divnode montado à Lista de Ordem
var order_list = document.getElementById ("order_list");
order_list.appendChild (divnode);
}
}
/*
* Você ainda pode escolher quais pedidos estão prontos para serem pagos no pedido regenerado e depois fazer o pagamento
Três maneiras de escolher: Selecione tudo: 1, não selecione: 0, selecione reversa: 2; As funções próprias da caixa de seleção podem ser selecionadas várias vezes
*/
função myselect (arg) {
// getElementsByName: Obtenha a coleção de objetos com base no valor do atributo de tag de nome.
var ordens = document.getElementsByName ("Myorder");
// A frase a seguir foi usada incorretamente durante o processo de escrita
// getElementsByTagName: obtém a coleção de objetos com base no nome do elemento especificado.
// var orders = document.getElementsByTagName ("MyOrder");
for (var x = 0; x <orders.length; x ++) {
Var Order = Ordens [X];
if (arg == "1") {
order.checked = true;
}
caso contrário, se (arg == "0") {
order.checked = false;
}
caso contrário, se (arg == "2") {
order.checked =! Order.Checked;
}
}
}
// check -out e pagamento, aqui é usado para demonstrar a quantidade de todos os produtos exibidos pela versão de diálogo.
função paymoney () {
var ordens = document.getElementsByName ("Myorder");
// Preço total
var sum = 0;
for (var x = 0; x <orders.length; x ++) {
Var Order = Ordens [X];
if (order.checked) {
// Verifique o que comprar.
soma = soma+número (order.value);
}
}
alerta ("você vê se deseja pagar"+soma+"yuan");
}
</script>
</head>
<Body>
<tabela>
<tr>
<Td>
<!-O significado do atributo múltiplo do objeto Selecionar: Defina ou obtenha o valor booleano indicando se vários itens podem ser selecionados na lista->
<select id = "select_store" múltiplo = "múltiplo">
<optgroup LABEL = "LISTA DE PRODUTO"> </ptgroup>
</leclect>
</td>
<Td>
<input type = "button" value = ">>" onclick = "selectgoods ();"/> <br>
<input type = "button" value = "<<" onclick = "Deletegoods ();"/>
</td>
<Td>
<select id = "select_my" múltiplo = "múltiplo">
<optgroup label = "meu carrinho de compras"> </ptgroup>
</leclect>
</td>
<td> <input type = "button" value = "generate order" onclick = "createOrder ();"/> </td>
</tr>
</tabela>
<hr/>
<div id = "order_area">
<H3> Por favor, selecione o produto que deseja comprar: </h3>
<div id = "order_list">
<!- <div>
<input type = "Caixa de seleção"> <pan> Handsome Guy 20 yuan </span>
</div>->
</div>
<input type = "button" value = "selecione All" OnClick = "MySelect ('1');"/>
<input type = "button" value = "não selecione" onclick = "mySelect ('0');"/>
<input type = "button" value = "anti-seletivo" onclick = "myselect ('2');"/> <br>
<input type = "button" value = "pay" onclick = "PayMoney ();"/>
</div>
</body>
</html>