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 画像とテキストによるビジュアル インストール チュートリアル
推薦する
HTML で Web ページに動的な時計を書く
HTML を使用して動的な Web クロックを作成します。コードは次のとおりです。 <!DOC...
Linux nslookup コマンドの使用方法の詳細な説明
[nslookup とは?] 】 nslookup コマンドは、Linux で非常によく使用されるネ...
JavaScriptはパスワードボックスの検証情報を実装します
この記事では、パスワードボックスの検証情報を実装するためのJavaScriptの具体的なコードを例と...
Vue echarts は棒グラフの動的な表示を実現します
この記事では、棒グラフの動的な表示を実現するためのvue echartsの具体的なコードを参考までに...
Linuxにpipパッケージをインストールする方法
1. システムの Python バージョンに応じて、pip インストール パッケージをダウンロードし...
CentOS7 上で KVM 仮想化プラットフォームを構築する (3 つの方法)
KVM はカーネルベースの仮想マシンの略で、Linux をハイパーバイザーに変換する Linux ...
MySQLユーザー管理操作例の分析
この記事では、MySQL ユーザー管理操作について説明します。ご参考までに、詳細は以下の通りです。こ...
CSS3 ベジェ曲線の例: リンクホバーアニメーション効果の作成
CSS3 アニメーション トランジションを使用して、リンクの上にマウスを移動すると小さなポップアップ...
document.getElementBy系メソッドがオブジェクトを取得できない問題を解決する
getElementByIdはオブジェクトを取得できませんブラウザがドキュメントを解析するときにはシ...
InnoDB タイプの MySql によるテーブル構造とデータの復元
前提条件: データベースを復元するために必要な .frm ファイルと .ibd ファイルを保存します...
MySQL マルチインスタンス構成ソリューション
1.1 MySQL マルチインスタンスとは何ですか?簡単に言うと、MySQL マルチインスタンスとは...
シンプルなカルーセル効果を実現するネイティブ js
この記事では、シンプルなカルーセル効果を実現するためのjsの具体的なコードを参考までに紹介します。具...
WeChatミニプログラムはuni-appを通じて世界中に共有されます
実際の使用では、ミニプログラムを友人や友人サークルと共有する必要があることが多く、通常は一度に 1 ...
CSS を使用して複数の方法で下揃えを実装するサンプル コード
会社のビジネス要件により、次の図の赤い領域の効果を達成する必要があります。 効果の説明: 1. 赤い...
Dockerコンテナのセルフスタートを実装する方法
コンテナの自動起動Docker は、コンテナが終了したとき、または Docker が再起動されたとき...