js を使用してシンプルなスイッチ ライト コードを実装する

js を使用してシンプルなスイッチ ライト コードを実装する

体の部位:

<button>ライトのオン/オフを切り替える</button>

スクリプト部分:

    <スクリプト>

        // window.onload はウィンドウの読み込みイベントであり、要素にコードを書き込むために使用できます。window.addEventListener('load', function () {

            var btn = document.querySelector('ボタン');

            // ライトがオンかオフかを決定する変数を定義します。var flag = 0;

            btn.onclick = 関数(){

                フラグが0の場合

                    document.body.style.backgroundColor = '黒';

                    フラグ = 1;

                } それ以外 {

                    document.body.style.backgroundColor = 'ピンク';

                    フラグ = 0;

                }

            }

        })

    </スクリプト>

buttonのすぐ下にscriptを記述すると、

次に、次のコードを使用します。

<スクリプト>

        var btn = document.querySelector('ボタン');

        varフラグ = 0;

        btn.onclick = 関数(){

            フラグが0の場合

                document.body.style.backgroundColor = '黒';

                フラグ = 1;

            } それ以外 {

                document.body.style.backgroundColor = 'ピンク';

                フラグ = 0;

            }

        }

    </スクリプト>
 

js を使用してシンプルなライト スイッチ コードを実装する方法に関するこの記事はこれで終わりです。シンプルなライト スイッチ コンテンツを実装するためのより関連性の高い js については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • ライトを切り替える効果を実現するjs
  • JavaScript で実装された電球のクリック切り替え特殊効果の切り替え例
  • JS/jQueryでシンプルなスイッチライト効果を実現 [事例]

<<:  CSS はリンクをクリックしたときに生成される点線の境界線を削除します。W3C 標準に準拠したブラウザと互換性があります。

>>:  Clickhouse Docker クラスターの展開と構成を例を使って説明します

ブログ    

推薦する

UDP シンプル サーバー クライアント コード例

UDP の理論については詳しく説明しません。UDP に関する HelloWorld プログラムを紹介...

MySQL テーブルを返すとインデックスが無効になるケースの説明

導入MySQL InnoDB エンジンがレコードをクエリし、インデックス カバレッジを使用できない場...

Centos7にnginxをインストールする方法

必要な環境をインストールする1. gccのインストールnginx をインストールするには、公式サイト...

すべてのブラウザに対応したデータURIとMHTMLの完全なソリューション

データURI Data URI は、小さなファイルをドキュメントに直接埋め込むために RFC 239...

ユーザーのニーズがマーケティング指向のデザインにつながる

<br />それぞれのトピックについて、チーム内でメールで議論します。議論が白熱するにつ...

よく使われる3つのMySQLデータ型

MySQL のデータ フィールドのタイプを定義することは、データベースを最適化するために非常に重要で...

データベースクエリの最適化: サブクエリの最適化

1. 事例会社のトップ以外の従業員全員を年齢別にグループ化します。 t_emp で id が存在しな...

Linux での mysql8.018 のインストールと設定のプロセスの詳細な説明

Windowsでのインストールの紹介:こちらもご覧ください –》WindowsでのMySQL 8.0...

Vue のキーボードイベント監視の概要

キー修飾子キーボード イベントをリッスンする場合、詳細なキーを確認する必要があることがよくあります。...

jsはシンプルなカウントダウンを実装します

この記事の例では、参考までに簡単なカウントダウンを実装するためのjsの具体的なコードを共有しています...

Vueは秒殺しのカウントダウンコンポーネントを実装する

この記事では、2番目のキルカウントダウンコンポーネントを実装するためのVueの具体的なコードを参考ま...

Reactの二次連携を実現する方法

この記事では、二次リンクを実現するためのReactの具体的なコードを参考までに共有します。具体的な内...

MySQLで全角文字と半角文字を保存する場合の違い

残念ながら、社内の IM のテスト中に MYSQL_DATA_TRUNCATED エラーが再び発生し...

MySQLデータベース操作の基本コマンド

1. データベースを作成します。 データ data _name を作成します。 PHP でデータベー...

Vue の詳細な入門ノート

目次1. はじめに2. 初期ビュー(I) Vueの概念を理解する(II) MVVMアーキテクチャ(I...