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 8.0.18 ハッシュ結合は左/右結合をサポートしていません 左と右の結合の問題
MySQL 8.0.18 では、インデックスが作成されていないフィールドに適用でき、等価値の関連付け...
JavaScriptとTypeScriptの関係
目次1. JavaScript とは何ですか? 2. JavaScript は何に使用されますか? ...
vue3.0 sfcのセットアップの変更について簡単に説明します。
目次序文標準的なSFCの書き方スクリプト設定可変露出部品の取り付け小道具カスタムイベント要約する序文...
Echarts 基本入門: 棒グラフと折れ線グラフの一般的な構成
1eChartsの基本手順4つのステップ1 DOMコンテナを見つける2 初期化3 設定オプション4 ...
Centos7.3 に mysql5.7.18 をインストールするための詳細なチュートリアル
1 Linuxディストリビューションのバージョンを確認する[root@typecodes ~]# c...
docker compose デプロイメントにおけるマスタースレーブレプリケーションの実装
目次構成解析サービス構築ディレクトリ構造ファイルを作成インスタンス構成サービスを開始するテストRed...
衝突検出を実装するためのjs
この記事の例では、衝突検出を実装するためのjsの具体的なコードを参考までに共有しています。具体的な内...
Vue のスロットリング関数使用時の落とし穴ガイド
序文一般的なビジネス シナリオでは、検索ボックスへの入力が完了した後、検索データを取得するために関連...
MySQL で特定の日、月、または年のデータをクエリするためのコードの詳細な説明
今日 テーブル名から * を選択します。ここで、to_days(時間フィールド名) = to_day...
MySQLデータ内の多数の改行と復帰に対する解決策
目次問題を見つける1. 改行と復帰を削除する方法2. SELECTクエリで「改行と復帰」を無視する方...
css input[type=file] スタイルの美化 (入力アップロードファイルスタイル)
効果： <!doctypehtml> <html> <ヘッド> ...
Windows Server 2019 のセットアップ方法 (画像とテキスト付き)
1. Windows Server 2019 のインストールVmware に Windows Se...
nginx ssl を設定して https アクセスを実装する手順 (初心者向け)
序文サーバーを展開した後、私は大きな喜びを感じながら自分の Web サイトにアクセスし、見たものすべ...
同じ IP のアクセス頻度を制限するように nginx を設定する方法
1. nginx.conf の http{} に次のコードを追加します。 limit_conn_zo...
MySQL 8.0.20 Window10無料インストール版設定とNavicat管理チュートリアルグラフィック詳細説明
1. MySQL 8.0.20をダウンロードして解凍するダウンロードリンク: https://dev...