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 画像とテキストによるビジュアル インストール チュートリアル
推薦する
VMware Workstation のインストール Linux (Ubuntu) システム
システムをコンピューターにインストールする方法がわからない場合は、Linux を学習したい場合は、仮...
Vue のレスポンシブ原則と双方向データの詳細な分析
応答性を実現するための object.defineProperty の理解observe/watch...
MySQLのSQLモードの特徴のまとめ
序文SQL モードは、MySQL がサポートする SQL 構文と、実行されるデータ検証チェックに影響...
Golang を使って Docker API を実際に操作する
目次SDKのインストールローカル Docker の管理コンテナの実行バックグラウンドでコンテナを実行...
aタグに下線を付け、クリック前後で色を変える方法
コードをコピーコードは次のとおりです。リンクフォントサイズ: 12px;色: #000000;テキス...
Dockerイメージ作成の完全なプロセス
目次序文作成手順CentOSベースイメージを作成するコンテナを作成してカスタマイズするカスタムコンテ...
CSS疑似クラスの右下隅をクリックすると、選択されたサンプルコードを示すチェックマークが表示されます。
効果： css: .s_type { 境界線: なし; 境界線の半径: 5px; 背景色: #f3f...
VUEプロジェクトでXSS攻撃に遭遇した実体験
目次序文原因を発見するカスタムフィルタリングルール要約する序文インターネットの急速な発展に伴い、情報...
Linuxで$を#に変更する方法
このシステムでは、# 記号は root ユーザーを表し、$ 記号は通常のユーザーを表します。では、ど...
HTMLテーブルの詳細な説明
機能: データ表示、テーブルアプリケーションシナリオ。 <table> テーブル<...
JavaScriptはフォームデータの非同期送信を実装します
この記事では、フォームデータの非同期送信を実装するためのJavaScriptの具体的なコードを参考ま...
Element-uiはテーブル内のセルを直接クリックして編集します
目次成果を達成する実装コード最近、会社でelementUIを使い始めたため、開発の過程でテーブルのセ...
Vue 関数のアンチシェイクとスロットリングの正しい使用方法
序文1. デバウンス: 高頻度イベントがトリガーされた後、関数は n 秒以内に 1 回だけ実行されま...
MySQLインデックスの詳細な分析
序文インデックスの選択はオプティマイザ段階の作業であることはわかっていますが、オプティマイザは万能で...
CocosCreator で物理エンジン ジョイントを使用する方法
目次マウスジョイント マウスジョイント距離ジョイント距離ジョイントモータージョイント直動ジョイント変...