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

推薦する

Vue要素ヘッダーにスラッシュを追加するための実装コード

<テンプレート> <div class="アプリコンテナ"&...

Nginx は rtmp ライブ サーバーの実装コードを構築します

1. nginxソースディレクトリに新しいrtmpディレクトリを作成し、git clone http...

Linux環境にDocker環境をインストールする(落とし穴なし)

目次インストールの前提条件ステップ1: システムの残りを確認してクリアし、Dockerの依存関係をイ...

Linux で binlog ファイルの作成時間を表示するコマンド

目次背景分析する方法背景MySQL は 26 日の 16:23:49 に大量のスロー クエリを生成し...

Docker で lnmp をデプロイする詳細な手順

目次Centosイメージを取得するCentos ベースの nginx コンテナを生成するCentos...

シンプルな画像ドラッグ効果を実現する js

この記事では、簡単な画像ドラッグ効果を実現するためのjsの具体的なコードを参考までに紹介します。具体...

nginx を使用した負荷分散モジュールの解釈

目次負荷分散に nginx を使用するための 2 つのモジュール:アップストリームはロードノードプー...

Linux システムで MySQL の文字セットを UTF8 に変更する手順

目次1. データベース内の MySQL ステータスを確認します。 2. 設定ファイルを変更します。 ...

Docker で LNMP 環境を素早く構築する方法 (最新)

序文ヒント: ここで、この記事に記録するおおよその内容を追加できます。例えば、人工知能の継続的な発展...

uniapp アプレットでウォーターフォール フロー レイアウトを実装するためのアイデアとコード

1. はじめに今、ウォーターフォールフローについて書くことは、古い内容の焼き直しと見なされますか?気...

MySQLマスタースレーブ遅延現象と原理の詳細な分析

1. 現象早朝、オンライン テーブルにインデックスが追加されました。テーブル内のデータ量が大きすぎた...

Javascript Echarts 空気質マップ効果の詳細な説明

まず、空気質データと地図データを組み合わせる必要があります。マップデータには属性名があるさまざまな都...

docker-compsoe を使用してフロントエンドとバックエンドを分離したプロジェクトをデプロイする方法

事前に言っておくDocker を使用すると非常にシンプルなデプロイメント環境を実現できることは誰もが...

VMware 仮想マシンに CentOS と Qt をインストールするチュートリアル図

VMware のインストールパッケージのインストールダウンロードアドレス: https://www....

HTML に画像が存在しない場合にデフォルトの画像を表示する方法の例

画像リンク <img src="" /> jsを使用してURLが有効...