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 画像とテキストによるビジュアル インストール チュートリアル
推薦する
要素複数フォーム検証の実装
プロジェクトでは、フォーム テストが頻繁に発生します。単一のフォーム テストについては、詳細な紹介が...
Centos6でgitlabを構築する方法
序文元のプロジェクトは、パブリックネットワークgitlabに配置されていました。セキュリティ上の理由...
Centos6.5 でのスーパーバイザーのアップグレード、インストール、および構成に関するチュートリアル
スーパーバイザー紹介Supervisor は、Python で開発されたクライアント/サーバー サー...
Nodejs でモジュール fs ファイルシステムを使用する方法
目次概要ファイル記述子同期、非同期、Promise同期書き込み非同期書き込み（推奨）約束の書き方...
フォームの「Enter」、「Submit」、「Enter != Submit」を削除する方法
「Enter != Submit」問題を実装するには、通常、「ボタンの種類」と「入力ボックスの数」か...
MySQLの挿入文字化け問題を解決する方法
問題の説明: MySQL に中国語の文字を挿入する場合、または MySQL では中国語の文字が正常に...
Vue で Excel ストリーム ファイルをダウンロードし、ダウンロード ファイル名を設定する方法
目次概要1. URL経由でダウンロード2. aタグのダウンロード属性とblobコンストラクタを組み合...
JavaScript フロー制御 (ループ)
目次1. forループ2. 二重の for ループ3. whileループ4. dowhileループ5...
Vueプロジェクトのパッケージングと展開の実際のプロセスの記録
目次序文1. 準備 - サーバーとnginxの使用1. サーバーを準備する2. nginxをインスト...
Dockerはdockerfileを使用してnode.jsアプリケーションを起動します
Dockerfileの作成expressによって自動的に作成されたディレクトリを例にとると、ディレク...
mysql 8.0.19 winx64.zip インストール チュートリアル
この記事は参考までにmysql 8.0.19 winx64.zipのインストールチュートリアルを記録...
HTMLのテーブルの内容は中央に水平と垂直に表示されます
CSSスタイルファイルで指定 #class td /*表のテキストを左右上下に揃えるように設定する*...
Uniappの小規模プログラム開発経験
1. 新しいUIプロジェクトを作成するまず、私たちの UI は ColorUI に基づいています。C...
.NETCore Dockerはコンテナ化とプライベートイメージリポジトリ管理を実装します
1. Dockerの紹介Docker は Linux オペレーティングシステムの一部の機能をベースに...
docker runコンテナの自動終了の解決策
今日、Dockerfile を使用してイメージを作成したときに問題が発生し、イメージの実行後にコンテ...