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: 商品を倉庫から移動 */ //Movefunction 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]); } } 以下はメイン ファイルです。コードをコピーします コードは次のとおりです。 🎜> Insert title here <br>table{ <br>border:10px; <br>} <br>select{ <br>width:200px; <br>height:400px; <br>} <br>#order_area{ <br>display:none; <br>} <br> <br>var selectedGoods=[];//缓存区域 <br>//根据购物车中的产品,生成订单 <br>function createOrder(){ <br>//显示订单区域 <br>var orderAreaDiv=document.getElementById("order_area"); <br>/*div对象下面有一个成员对象style,通过这个style对象可以控制div的样式 <br>display:表示这个对象或者叫div这个元素在文档中是否渲染 <br>可用的值: <br>block: Object is rendered as a block element. <br>none :Object is not rendered. <br>....... <br>在这个实例中,就用以上两个值就ok了,上面内容来自文档 <br>*/ <br>//用节点对象的属性操作样式 <br>orderAreaDiv.style.display="block"; <br>var select_my=document.getElementById("select_my"); <br>for(var x=0;x<select_my.options.length;x++){ <BR>// <BR>var optNode=select_my.options[x]; <BR>selectedGoods.push(optNode.innerHTML); <BR>} <BR>//遍历产品,生成订单 <BR>for(var x=0;x<selectedGoods.length;x++){ <BR>///*动态生成数据的模板 <BR>//<div><!--name属性便于查找--> <br>//<input type="checkbox" name="myorder"><span>大帅哥 20元</span> <br>//</div> <br>//*/ <br>var divNode =document.createElement("div"); <br>var inputMyOrder=document.createElement("input"); >inputMyOrder.setAttribute("type","checkbox"); <br>inputMyOrder.setAttribute("name","myorder"); <br>divNode.appendChild(inputMyOrder); "span"); <br>//50 から 100 までの乱数をランダムに生成します<br>varprice=Math.floor(Math.random()*50 50); >spanNode.innerHTML=selectedGoods[x] " " 価格; <br>divNode.appendChild(spanNode) <br>//inputMyOrder.appendChild(spanNode); <br><br>/ /組み立てられた divNode を orderlist に追加します <br>var order_list = document.getElementById("order_list"); <br>order_list.appendChild(divNode); <br>} <br>} <br>/* <br>*再生成された注文で支払いの準備ができている注文を引き続き選択して、支払いを行うことができます。<br>3 つの選択方法: すべて選択: 1、選択しない: 0、反転: 2; チェックボックス自体にさらに多くの機能を含めることができます。 <br>*/ <br>function mySelect(arg){ <br>//getElementsByName: NAME タグ属性の値に基づいてオブジェクトのコレクションを取得します。 <br>varorders = document.getElementsByName("myorder"); <br>//コードの作成中に次の文を誤って使用しました <br>//getElementsByTagName: 指定された要素名に基づいてオブジェクトのコレクションを取得します。 <br>//varorders=document.getElementsByTagName("myorder"); <br>for(var x=0;x<orders.length>var order=orders[x]; if(arg=="1"){ <br>order.checked=true; <br>else if(arg=="0"){ <br>order.checked=false; <br>else if(arg=="2"){ <br>order.checked=!order.checked; <br>} <br>} <br>} <br>//チェックアウト、ここでダイアログを使用します。ポップアップされるすべてのアイテムの金額 <br>function payMoney(){ <br>varorders = document.getElementsByName("myorder") <br>//合計金額<br>var sum=0; (var x=0;x<orders.length>var order =orders[x]; <br>if(order.checked){ <br>//ぜひ購入したいです。 <br>sum=sum Number(order.value); <br>} <br>} <br><br>alert(" sum "元" を支払う必要があるかどうかを確認してください) <br>} <br> select オブジェクトの multiple 属性の: リスト内で複数の項目を選択できるかどうかを示すブール値を設定または取得します --> ; 購入したい製品を選択してください: