JavaScriptで実装したショッピングカートエフェクトは色々な場所で使える_JavaScriptスキル

JavaScriptで実装されたショッピングカートエフェクトは、友人選択はもちろん、人事モジュール、給与計算、人事選考など様々なところでご利用いただけます。以下はショッピング カートに似たもののレンダリングです:

コード:

goodsCar.js: この js は別のファイルとして記述されます。主に上記のリスト表示を制御します。

コードをコピー コードは次のとおりです。

window.onload=function(){
initStore ();
};
var Goods=["ハム","ビューティー","ロイヤルシスター","火星への日帰り旅行","スポーツカー"]; ==== ============= 一時記憶領域を定義する必要がある理由を明確に考えてください =============
var temps=[] ;//一時ストレージ
//ウェアハウスの選択とコンテンツの追加を初期化します
function initStore(){
var select_store=document.getElementById("select_store");
for(var x=0;x<) ;goods.length;x )
{
// オプション オブジェクトを作成します
var optionNode=document.createElement("option");
optionNode.innerHTML=goods[x]; .appendChild(optionNode);
}
}
//---------------------------- --------------
function selectGoods(){
//ストアの選択リスト オブジェクトを取得します
var out_store=document.getElementById("select_store");
//商品の選択リスト オブジェクトを取得します
var in_store=document.getElementById("select_my");
moveGoods(in_store,out_store);
function deleteGoods(){
//1. 移動する商品を記録します
var in_store=document.getElementById("select_store");
moveGoods(in_store, out_store);
}
/*
* 商品の移動:
1.inSotre: 商品を倉庫に移動
2.outStore: 商品を倉庫から移動
*/
//Move
function moveGoods(inStore,outStore){
/ /================配列キャッシュをクリア========= =========
temps=[];
// ストア内のすべてのリスト項目を取得するループ
for(var x=0;x{
var option=outStore.options[x];
// 選択したリスト項目を保存用の一時配列に追加します
if(option.selected){
temps.push (オプション);//重複を避けるために、配列キャッシュをクリアする必要があります
}
}
//2. ストアリストで選択したアイテムを削除します
//3. 選択した商品をショッピング カートに追加します
for(var x=0;xinStore.appendChild(temps[x]);
}
}


以下はメイン ファイルです。




コードをコピーします

コードは次のとおりです。 🎜>

//*/
var divNode =document.createElement("div");
var inputMyOrder=document.createElement("input"); >inputMyOrder.setAttribute("type","checkbox");
inputMyOrder.setAttribute("name","myorder");
divNode.appendChild(inputMyOrder); "span");
//50 から 100 までの乱数をランダムに生成します
varprice=Math.floor(Math.random()*50 50); >spanNode.innerHTML=selectedGoods[x] " " 価格;
divNode.appendChild(spanNode)
//inputMyOrder.appendChild(spanNode);

/ /組み立てられた divNode を orderlist に追加します
var order_list = document.getElementById("order_list");
order_list.appendChild(divNode);
}
}
/*
*再生成された注文で支払いの準備ができている注文を引き続き選択して、支払いを行うことができます。
3 つの選択方法: すべて選択: 1、選択しない: 0、反転: 2; チェックボックス自体にさらに多くの機能を含めることができます。
*/
function mySelect(arg){
//getElementsByName: NAME タグ属性の値に基づいてオブジェクトのコレクションを取得します。
varorders = document.getElementsByName("myorder");
//コードの作成中に次の文を誤って使用しました
//getElementsByTagName: 指定された要素名に基づいてオブジェクトのコレクションを取得します。
//varorders=document.getElementsByTagName("myorder");
for(var x=0;xvar order=orders[x]; if(arg=="1"){
order.checked=true;
else if(arg=="0"){
order.checked=false;
else if(arg=="2"){
order.checked=!order.checked;
}
}
}
//チェックアウト、ここでダイアログを使用します。ポップアップされるすべてのアイテムの金額
function payMoney(){
varorders = document.getElementsByName("myorder")
//合計金額
var sum=0; (var x=0;xvar order =orders[x];
if(order.checked){
//ぜひ購入したいです。
sum=sum Number(order.value);
}
}

alert(" sum "元" を支払う必要があるかどうかを確認してください)
}


select オブジェクトの multiple 属性の: リスト内で複数の項目を選択できるかどうかを示すブール値を設定または取得します -->







;

---

購入したい製品を選択してください: