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 クラスターの展開と構成を例を使って説明します

推薦する

CSS 配送先住所平行四辺形線スタイルの例コード

コードは次のようになります。 // 配送先住所の平行四辺形の線のスタイル <view clas...

マークアップ言語 - リスト

標準化されたデザインソリューション - マークアップ言語とスタイルマニュアルWeb 標準ソリューショ...

HTML で入力テキスト入力キャッシュのクリアを禁止する 2 つの方法

ほとんどのブラウザはデフォルトで入力値をキャッシュし、ctl+F5 を使用して強制的に更新することに...

数ステップでサイバーパンク2077風の視覚効果を実現するCSS

背景記事を始める前に、賽博朋克とは何か、賽博朋克2077とは何かを簡単に理解しましょう。サイバーパン...

SeataがMySQL 8バージョンを使用できない問題を解決する方法

考えられる理由: Seata が MySQL 8 をサポートしない主な理由は、接続ドライバーがバージ...

MySQL の null (IFNULL、COALESCE、NULLIF) に関する知識ポイントのまとめ

この記事では、MySQL の null (IFNULL、COALESCE、NULLIF) に関連する...

JavaScript の例におけるループの使用法の詳細な説明

退屈だったので、ループに関する簡単な演習をいくつかまとめてみました。JS を学び始めたばかりの方に役...

SQL Server コメントのショートカット キー操作

SQL Server のバッチコメントバッチ注釈Ctrl + (K, C): Ctrlキーを押しなが...

Reactでパスワード強度検出器を実装する方法

目次序文使用コンポーネントの記述データ構造分析プロセス分析基礎コードの分析他の要約する序文パスワード...

DockerにTomcat8をインストールする方法

1. dockerでtomcat8をインストールする1. Docker HubでTomcatイメージ...

XHTML の IE 条件付きコメント

<br />条件付きコメントはIEシリーズ製品上でXHTMLコード処理を分離して行うこと...

MySQL Null は 5 つの問題を引き起こす可能性があります (すべて致命的)

目次1. カウントデータが失われる解決2. 明確なデータ損失3.データ損失を選択解決4. Nullポ...

Nginx 構成の実装 https

目次1: https証明書を準備する2: nginx sslモジュールを準備する3: SSL証明書を...

HTML の META タグの使用に関するヒントの例

HTML メタタグHTML メタタグは、Web ページのコンテンツに関する情報をブラウザや検索エンジ...

scss で mixin が動作しない問題の解決方法 (ブラウザでコンパイルできない)

ミックスインメソッド: ブラウザはコンパイルできません: 以前のバージョンのsassでは上記の記述方...