この記事の例では、簡単なショッピングカート機能を実現するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 1. 全体効果図(消灯) (電気をつけてください) 2. HTMLコード<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>ショッピングカート</title> <link type="text/css" rel="stylesheet" href="ショッピングカート style.css" > <script src="ショッピングカート関数.js"></script> </head> <body id="本文"> <button id="kg" onclick="kz()">ライトを点灯する</button> <div id="cons"> <テーブルid="テーブル"> <tr> <th>製品名</th> <th>商品単価</th> <th>商品数量</th> <th>合計金額</th> </tr> <tr> <td>シャオミ 11</td> <td >5000</td> <td> <input type="button" value="-" onclick="add(this)"> <span class="num">5</span> <input type="button" value="+" onclick="add2(this)"><!--誰がこれをクリックしたか調べる--> </td> <td class="money">25000</td> </tr> <tr> <td>レノボ Y9000</td> <td>10000</td> <td> <input type="button" value="-" onclick="add(this)"> <span class="num">1</span> <input type="button" value="+" onclick="add2(this)"> </td> <td class="money">10000</td> </tr> <tr> <td>メンズスキンケア</td> <td>200</td> <td> <input type="button" value="-" onclick="add(this)"> <span class="num">1</span> <input type="button" value="+" onclick="add2(this)"> </td> <td class="money">200</td> </tr> <tr> <td colspan="3">合計金額</td> <td id="total">5000</td> </tr> </テーブル> </div> </本文> </html> 3. CSSコードテーブル、th、td、tr{ 境界線: 5px 実線スレートブルー; 境界線の半径: 10px; } #短所{ 境界線: 3px 実線 #FFFFFF; 幅: 600ピクセル; パディング: 5px; 境界線の半径: 10px; マージン: 200px 自動; } #体{ 背景色: 黒; } テーブル{ /*表の境界線の結合表示を定義します*/ /*境界線の折りたたみ: 折りたたみ;*/ 色: アクアマリン; 幅: 600ピクセル; 高さ: 200px; テキスト配置: 中央; border-collapse:separate;border-spacing:0;/*border-spacing プロパティは、隣接するセルの境界線間の距離を設定します (「border Separate」モードでのみ使用されます)。 */ table-layout:fixed;/*固定テーブルレイアウト。水平レイアウトはテーブルの幅、列の幅、テーブルの境界線の幅、セルの間隔のみに依存し、セルの内容とは関係ありません。 */ } #kg{ 幅: 30ピクセル; /*境界線: 2px の白実線;*/ 背景色: 赤; 色: スレートブルー; } 4. jsコード// 加算関数 add(obj) { // 製品の数を取得します var nums = obj.nextElementSibling.innerHTML /* 次の兄弟要素ノードの値を返します */ if(数値>0){ // クリックすると数値が減算されます--; //元の値を置き換えます obj.nextElementSibling.innerHTML=nums; // 合計価格の値を変更します // 商品の単価を取得します var price =obj.parentElement.previousElementSibling.innerHTML; // 商品の合計価格を取得します。 var tatol = obj.parentElement.nextElementSibling.innerHTML; obj.parentElement.nextElementSibling.innerHTML=parseInt(nums)*parseInt(price); //parseInt は文字列を数値 money() に変換します。 } // console.log(数値); } // 減算関数 add2(obj){ var nums =obj.previousElementSibling.innerHTML/*前の兄弟要素ノードの値を返します*/ if(数値>=0){ // クリックして nums++ を追加します。 //元の値を置き換えます obj.previousElementSibling.innerHTML=nums; // 合計価格の値を変更します // 商品の単価を取得します var price =obj.parentElement.previousElementSibling.innerHTML; // 商品の合計価格を取得します。 var tatol = obj.parentElement.nextElementSibling.innerHTML; obj.parentElement.nextElementSibling.innerHTML=nums*price; お金(); } // console.log(数値) } //合計金額を取得して変更する function money(){ //合計金額のセルを取得します。var mo = document.getElementById("total"); //商品の合計価格のセルを取得します。var momeys=document.getElementsByClassName("money"); //合計金額の値を定義します var sum =0; for(var i=0;i<momeys.length;i++){ 合計=parseInt(momeys[i].innerHTML)+合計; } mo.innerHTML = 合計; // コンソール.log(合計) } //背景色を制御する関数kz(){ var 背景 = document.getElementById("body"); var color = window.getComputedStyle(background,null).backgroundColor; //背景色を取得します console.log(color); var font = document.getElementById("table"); //フォント var border = document.getElementById("cons"); //境界線 var switch1 = document.getElementById("kg"); //スイッチ //背景色、フォント色、境界線色を変更する if (color=="rgb(0, 0, 0)") { background.style.cssText="background-color: white;"; //CSS スタイルを変更します font.style.cssText="color: dimgray;"; border.style.cssText="境界線: 3px 黒一色"; switch1.innerHTML="ライトを消す"; } そうでない場合は(color=="rgb(255, 255, 255)"){ background.style.cssText="背景色: 黒;"; font.style.cssText="色: アクアマリン;"; border.style.cssText="境界線: 3px 実線 #FFFFFF"; switch1.innerHTML="ライトを点灯する"; } } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Dockerはローカルイメージをパッケージ化し、他のマシンに復元します
>>: HTML に CSS を導入するいくつかの方法の紹介
目次ローカルミックスイングローバル ミックスイン要約するローカルミックスイン <テンプレート&...
Web ページを作成する過程では、<h1>、<h2>、<h3> ...
序文このプロジェクトでは円形のメニューが必要です。オンラインで検索しましたが、適切なものが見つからな...
Dockerインストール後のネットワークタイプ [root@insure updev]# docke...
<br />「XXXのウェブサイトを見てみませんか?」といった質問をされることもあります...
この記事では、例を使用して、MySQL の日付と時刻の間隔計算について説明します。ご参考までに、詳細...
XHTML の img タグはいわゆる自己終了タグであり、XML では完全に合法です。 XHTMLの...
目次1. --skip-grant-tables 経由で取得する1.1 my.conf を変更し、新...
仮想マシンの IP アドレスを変更します。 次のインターフェイスに入り、サブネット IP を直接変更...
n 個のアイテムがあり、これらのアイテムをグリッド レイアウトの列に並べ替える必要があるとします。列...
3回の暗記により、大量の資材の正確な場所と目的を記憶でき、その使いやすさが向上します。 これは単なる...
isnullの代わりにifnullを使用するisnull は、null かどうかを判断するために使用...
Docker入門Docker は、アプリケーションをより速く配信するのに役立つオープンソースのコンテ...
目次1. 一意の値をフィルタリングする2. 短絡評価2.1 シナリオ例3. ブール変換4. 文字列を...
序文日常の開発では、MySQL を使用してページングを実装する場合、常に MySQL 制限構文を使用...