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

推薦する

Mysql5.7 サービスを開始できません。グラフィカル ソリューション チュートリアル

p>「サービス」で手動で起動すると、 コンソールから起動します: 次に、...\MySQL S...

分散監視システムZabbixはSNMPとJMXチャネルを使用してデータを収集します

前回の記事では、Zabbix のパッシブ、アクティブ、Web 監視に関するトピックについて学習しまし...

JavaScript が Jingdong の虫眼鏡の特殊効果を模倣

この記事では、Jingdong虫眼鏡を模倣したJavaScriptの具体的なコードを参考までに共有し...

MySql 認証に基づく vsftpd 仮想ユーザー

目次1. MySQLのインストール1.2 テーブル、データベース、ユーザーを作成する1.3 リモート...

Vue での ElementUI の使用に関する詳細な説明

ログイン + セッションストレージエフェクト表示ログインに成功すると、ユーザー ID がフロントエン...

Vue プロジェクトの最初の画面のパフォーマンス最適化コンポーネントの実践ガイド

目次Vue ファースト スクリーン パフォーマンス最適化コンポーネント説明するインターセクションオブ...

CocosCreator でレイヤー管理に常駐ノードを使用する方法

CocosCreator バージョン: 2.3.4ほとんどのゲームにはレイヤー管理機能があり、例えば...

HTMLの基礎: HTMLの基本構造

HTML ハイパーテキスト ドキュメントの基本構造は、ドキュメント ヘッダーとドキュメント本体の 2...

PHP+nginx サービス 500 502 エラーのトラブルシューティングのアイデアの詳細な説明

概要オンラインサービスへのアクセス中に 500 または 502 エラーが発生した場合、緊急処理とトラ...

Kylin V10 への zabbix-agent のインストール手順

1. インストールパッケージをダウンロードするダウンロードアドレス: https://sourcef...

Node の SMS API で検証コード ログインを実装するためのサンプル コード

1. ノードサーバーのセットアップ + データベース接続ここでの操作は比較的簡単でわかりやすいです。...

CSS3 box-shadow プロパティの詳細な例

CSS3 - 影の追加(ボックスシャドウの使用) CSS3 - div またはテキストに影を追加する...

Jenkins+Docker継続的インテグレーションの実装

目次1. Jenkinsの紹介2. Jenkinsをインストールしてデプロイする1. 環境情報2. ...

Mysql の varchar 型に関する注意点

varchar の保存ルール4.0 未満のバージョンでは、varchar(20) は 20 バイトを...