L'effet de panier d'achat obtenu par JavaScript, bien sûr, cet effet peut être utilisé dans de nombreux endroits, tels que le choix d'amis, les modules de ressources humaines, le calcul des salaires, la sélection du personnel, etc. Voici un rendu d'un panier de panier similaire à:
Code:
Brochscar.js: Ce JS est écrit comme un fichier séparé. Contrôle principalement l'affichage de la liste ci-dessus.
La copie de code est la suivante:
window.onload = function () {
InitStore ();
};
Var Goods = ["Ham", "Beauty", "Mother Lady", "Day Tour of Mars", "Sports Car"];
// ============================. Pourquoi avez-vous besoin de définir une zone de stockage temporaire et de penser clairement ========================================================================================.
Var Temps = []; // Storage temporaire
// Initialiser le référentiel sélectionnez Ajouter du contenu
fonction initstore () {
var select_store = document.getElementById ("select_store");
pour (var x = 0; x <Goods.length; x ++)
{
// Créer un objet d'option
var optionNode = document.CreateElement ("Option");
optionNode.innerHtml = marchandises [x];
select_store.appendChild (optionNode);
}
}
// -----------------------------------------------------------------------------------------------------------------------------
fonction selectGoods () {
// Obtenez l'objet de liste de sélection du magasin
var out_store = document.getElementById ("select_store");
// obtient l'objet de liste de sélection de mon produit
var in_store = document.getElementById ("select_my");
movegoods (in_store, out_store);
}
fonction deletegoods () {
// 1. Enregistrez le produit à déplacer
var in_store = document.getElementById ("select_store");
var out_store = document.getElementById ("select_my");
movegoods (in_store, out_store);
}
/ *
* Produits mobiles:
1.InSORE: déplacez les marchandises dans l'entrepôt
2.Outstore: Retirez le produit de l'entrepôt
* /
//se déplacer
fonction movegoods (instore, outstore) {
// =======================================================================. ==========================================================================.
Temps = [];
// boucle pour obtenir tous les articles de liste dans le magasin
pour (var x = 0; x <outore.options.length; x ++)
{
var option = outstore.options [x];
// Ajouter l'élément de liste sélectionné au tableau temporaire pour stocker
if (option.selected) {
temps.push (option); // ajouter des données dans le tableau temporaire. Pour éviter la duplication, le cache de tableau doit être effacé
}
}
// 2. Supprimer les articles sélectionnés dans la liste des magasins
// 3. Ajouter des produits sélectionnés au panier
pour (var x = 0; x <temps.length; x ++)
{
// chaque nœud n'a qu'un seul nœud parent
// Supprimer d'abord puis ajouter
outstore.removechild (temps [x]);
//Ajouter à
INSTORE.APPENDCHILD (TEMPS [X]);
}
}
Ce qui suit est le fichier principal;
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> Insérer le titre ici </TITME>
<style type = "text / css">
tableau{
Border: 10px;
}
sélectionner{
Largeur: 200px;
hauteur: 400px;
}
#Order_Area {
Affichage: aucun;
}
</ style>
<script type = "text / javascript" src = "woodscar.js"> </ script>
<script type = "text / javascript">
var selectedgoods = []; // zone mise en cache
// Créer des commandes basées sur les produits du panier d'achat
function createOrder () {
// Afficher la zone de commande
var orderAreADiv = document.getElementById ("Order_Area");
/ * Il y a un style d'objet membre sous l'objet div. Grâce à cet objet de style, le style de la div peut être contrôlé.
Affichage: indique si cet objet ou élément appelé div est rendu dans le document.
Valeurs disponibles:
Bloc: l'objet est rendu sous forme d'élément de bloc.
Aucun: l'objet n'est pas rendu.
.........
Dans cet exemple, utilisez simplement les deux valeurs ci-dessus et ce sera OK. Le contenu ci-dessus provient du document
* /
// Utilisez le style d'opération d'attribut de l'objet nœud
orderAreAriv.Style.display = "Block";
var select_my = document.getElementById ("select_my");
pour (var x = 0; x <select_my.options.length; x ++) {
//
var optnode = select_my.options [x];
selectedGoods.push (optnode.innerhtml);
}
// voyage sur le produit et générer des commandes
pour (var x = 0; x <selectedgoods.length; x ++) {
/// * Modèle pour générer dynamiquement des données
// <div> <! - L'attribut de nom est facile à trouver ->
// <input type = "checkbox" name = "myOrder"> <span> beau gars 20 yuan </span>
// </div>
// * /
var divnode = document.CreateElement ("div");
OrderAreADiv.ApendChild (divnode);
var inputMyOrder = document.CreateElement ("entrée");
inputMyOrder.SetAttribute ("Type", "Checkbox");
inputMyOrder.SetAttribute ("Name", "MyOrder");
divnode.appendChild (inputMyOrder);
var spannode = document.CreateElement ("Span");
// génére un nombre aléatoire de 50 à 100 aléatoire
var prix = math.floor (math.random () * 50 + 50);
inputMyOrder.Value = Price;
spannode.innerhtml = selectedGoods [x] + "" + prix;
divnode.appendChild (spannode);
//inputMyOrder.ApendChild(Spannode); Erreur, car la portée et les entrées sont des éléments du même niveau
// Ajouter le divnode assemblé à OrderList
var order_list = document.getElementById ("order_list");
order_list.appendChild (divnode);
}
}
/ *
* Vous pouvez toujours choisir les commandes prêtes à être payées dans la commande régénérée, puis effectuer le paiement
Trois façons de choisir: Sélectionnez tous: 1, ne sélectionnez pas: 0, Sélectionnez inversé: 2; Les propres fonctions de Checkbox peuvent être sélectionnées plusieurs fois
* /
fonction mySelect (arg) {
// GetElementsByName: Obtenez la collection d'objets en fonction de la valeur de l'attribut de balise de nom.
var ordres = document.getElementsByName ("myOrder");
// La phrase suivante a été mal utilisée pendant le processus d'écriture du code
// GetElementsByTagName: obtient la collection d'objets en fonction du nom de l'élément spécifié.
// var orders = document.getElementsByTagName ("MyOrder");
pour (var x = 0; x <orders.length; x ++) {
var ordonnance = ordres [x];
if (arg == "1") {
Order.Checed = true;
}
else if (arg == "0") {
Order.Checked = false;
}
else if (arg == "2") {
Order.Cheded =! Order.Checked;
}
}
}
// Checkout and Pay, ici est utilisé pour démontrer le montant de tous les produits apparaissant par la version du dialogue.
fonction paymoney () {
var ordres = document.getElementsByName ("myOrder");
// Prix total
var sum = 0;
pour (var x = 0; x <orders.length; x ++) {
var ordonnance = ordres [x];
if (ordonnance.checked) {
// Vérifiez quoi acheter.
sum = sum + nombre (order.value);
}
}
alert ("vous voyez si vous voulez payer" + sum + "yuan");
}
</cript>
</ head>
<body>
<ballage>
<tr>
<TD>
<! - La signification de l'attribut multiple de l'objet sélectionné: définissez ou obtenez la valeur booléenne indiquant si plusieurs éléments peuvent être sélectionnés dans la liste ->
<select id = "select_store" multiple = "multiple">
<optGroup Label = "Product List"> </ OptGroup>
</lect>
</td>
<TD>
<input type = "Button" value = ">>" onclick = "selectGoods ();" /> <br>
<input type = "Button" value = "<<" onClick = "DeleteGoods ();" />
</td>
<TD>
<select id = "select_my" multiple = "multiple">
<optgroup label = "mon panier"> </ optgroup>
</lect>
</td>
<td> <entrée type = "Button" Value = "Generate Order" onClick = "CreateOrder ();" /> </td>
</tr>
</ table>
<hr />
<div id = "order_area">
<h3> Veuillez sélectionner le produit que vous souhaitez acheter: </h3>
<div id = "order_list">
<! - <div>
<entrée type = "Checkbox"> <span> beau gars 20 yuan </span>
</div> ->
</div>
<input type = "bouton" value = "sélectionnez tout" onclick = "mySelect ('1');" />
<input type = "bouton" value = "pas sélectionner" onClick = "mySelect ('0');" />
<input type = "bouton" value = "anti-sélection" onclick = "mySelect ('2');" /> <br>
<input type = "Button" value = "Pay" onClick = "PayMoney ();" />
</div>
</docy>
</html>