JSはショッピングカート効果の単純な加算と減算を実装します
|
この記事の例では、ショッピングカートの簡単な追加と削除を実現するためのJSの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 1. 入力ボックスに加算と減算の結果を書き込みます。 2. プラスボタンとマイナスボタンはボタンボタンを使用して実装されます 3. js を使用して、入力ボックスの値として i の値を制御します。 達成された効果:
完全なコードは次のとおりです。
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8" />
<タイトル></タイトル>
<スタイル>
体{
マージン: 0;
パディング: 0;
}
。箱{
境界線: 赤実線 1px;
高さ: 40px;
幅: 200ピクセル;
マージン: 200px 自動;
テキスト配置: 中央;
パディング上部: 20px;
}
.box 入力{
幅: 40px;
テキスト配置: 中央;
}
＃お金{
境界線: なし;
テキスト配置: 左;
左マージン: 2px;
}
ul{
リストスタイル: なし;
}
ul li{
表示: ブロック;
フロート: 左;
垂直位置合わせ: 中央;
}
</スタイル>
<スクリプト>
window.onload = 関数(){
var plus = document.getElementById("plus");
var i = document.getElementById("text").value;
var 減算 = document.getElementById("減算");
var お金 = document.getElementById("お金").value;
plus.onclick = 関数(){
私は++;
document.getElementById("テキスト").value = i;
document.getElementById("money").value = i*money;
}
減算.onclick = 関数(){
もし (i>0) {
私 - ;
document.getElementById("テキスト").value = i;
document.getElementById("money").value = i*money;
} それ以外{
私=0;
document.getElementById("テキスト").value = i;
document.getElementById("money").value = i*money;
}
}
}
</スクリプト>
</head>
<本文>
<ul class="box">
<li><button id="plus">+</button></li>
<li><入力タイプ="テキスト" id="テキスト" 値="1"/></li>
<li><button id="減算">-</button></li>
<li> ¥<input type="text" id="money" value="88"/></li>
</ul>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CentOS での Django プロジェクトのデプロイに関する詳細なチュートリアル
>>: MySql Installer 8.0.18 画像とテキストによるビジュアル インストール チュートリアル
推薦する
MySQL Workbench の使い方チュートリアルの詳しい説明
目次(I) Workbenchを使用してデータベースを操作する①データベースを作成する② データベー...
MySQL マルチテーブルクエリの具体例
1. SELECT句を使用して複数のテーブルをクエリするSELECT フィールド名 FROM tab...
ハイパーリンクを開くターゲットのテスト
リンクのターゲット属性は、リンクが開く場所を決定します。その値は通常、_blank、_self、_p...
Nexus を使用して jar パッケージをプライベート サーバーに追加する方法
なぜ Nexus プライベート サーバーを構築する必要があるのでしょうか。その理由は非常に簡単です。...
JavaScript は 3 つの一般的な Web 効果 (オフセット、クライアント、スクロール シリーズ) を実装します。
目次1. 要素オフセットシリーズ2. 要素表示領域クライアントシリーズ3. 要素スクロールシリーズ1...
MySQL インデックスの効率的な使用ガイド
序文ほとんどの方がMySQLとインデックスを使用したことがあると思いますが、適切なインデックスを作成...
非常に便利なオープンソース Docker ツール 5 つを強くお勧めします
導入Docker コミュニティは、さまざまなユースケースを処理するのに役立つ多くのオープンソース ツ...
MySQL無料インストール版を解凍した後にパスワードが見つからない問題を解決する方法
1. mysql-8.0.21-winx64を解凍する2. 環境変数を設定し、アドレスをbinフォル...
検索テキストボックスがフォーカスを外れたときにテキストの位置がジャンプする問題の解決方法
検索テキストボックスにテキストを設定すると、フォーカスを外すと位置がジャンプしますコードをコピーコー...
Docker tomcatのメモリサイズを設定する方法
Docker に Tomcat をインストールする場合、大きなファイルをダウンロードするときなど、場...
vuex ベースのショッピングカート機能の実装
この記事の例では、ショッピングカート機能を実装するためのvuexの具体的なコードを参考までに共有して...
JavaScript モバイル H5 画像生成ソリューションの説明
現在、WeChatパブリックアカウントの運用活動が多く、写真を生成する必要があります。生成された写真...
MySQL の基本クイックスタート知識のまとめ (マインドマップ付き)
目次序文1. データベースの基礎知識1. データベースとは何ですか? 2. データベースの分類3. ...
Vuex全体のケースの詳細な説明
目次1. はじめに2. 利点3. 使用手順1. Vuexをインストールする2. Vuexを参照する3...
Linux で特定のユーザーまたはユーザー グループに対して SSH を有効または無効にする方法
会社の基準により、特定のユーザーだけに Linux システムへのアクセスを許可することができます。あ...