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

推薦する

HTML の基本 - CSS スタイルシート、スタイル属性、フォーマット、レイアウトの詳細

1.位置:固定一部の Web サイトの右下隅にあるポップアップ ウィンドウなどの、ブラウザーを基準と...

CSS3 は本当に SCSS に取って代わるのでしょうか?

Web ページのスタイル設定に関しては、プロジェクトで純粋な CSS または SCSS (および他...

Node.js で Bash スクリプトを書くための究極のソリューション

目次序文zxライブラリ$`コマンド` CD()フェッチ()質問()寝る()スローしない()チョークフ...

Docker で Python スクリプトを実行する方法

まず、Docker イメージ用の特定のプロジェクト ディレクトリを作成します。例: mkdir /h...

CentOS 8.4 での Docker パッケージのオフラインインストールの問題について

使用する仮想マシンは、サーバー環境をシミュレートする CentOS 8.4 です。外部ネットワークに...

VMWare Linux MySQL 5.7.13 のインストールと設定のチュートリアル

この記事では、参考までにVMWare LinuxにMySQL 5.7.13をインストールするチュート...

nginx で HSTS を有効にしてブラウザを HTTPS アクセスにリダイレクトする方法の詳細な説明

前回の記事では、https を使用したローカルノードサービスアクセスを実装しました。前回の記事の効果...

HTTP 戻りコード一覧(中国語と英語の説明)

httpリターンコードリスト(以下は概要です)詳細な中国語の説明についてはここをクリックしてくださ...

Tomcat でサーブレット URL パターンを構成する際の問題の詳細な説明

tomcat の web.xml を構成する場合、サーブレットは比較的重要な問題です。ここでは、サー...

自動検索提案機能のスタイルファイルを入力します: suggestion.css

コードをコピーコードは次のとおりです。 .sugLayerDiv{位置:相対; overflow:h...

Centos8 は kdc 暗号化に基づいて nfs を構築します

目次構成nfs サーバー (nfs.skills.com) nfs クライアント (client.s...

Mysqlサーバーのインストール、構成、起動、シャットダウン方法の詳細な説明

1. 公式サイトからダウンロード: https://dev.mysql.com/downloads/...

HTML ハイパーリンクの詳細な説明

ハイパーリンクハイパーリンクは、Web サイト上のすべてのページがハイパーリンクで接続され、ページ間...

CSS3実践手法のまとめ(推奨)

1. 丸い境界線: CSSコードコンテンツをクリップボードにコピー境界線の半径: 4px ; 2....

CSS マージンの折りたたみの詳細な説明

前のこれは古くからある古典的な質問です。以前読者から質問があったので、ここでお答えします。簡単な例か...