jsで照明スイッチを制御する

jsで照明スイッチを制御する

参考までに、jsを使用して照明スイッチを制御します。具体的な内容は次のとおりです。

トピック:

js で照明スイッチを制御する

分析:

電球要素を取得し、クリックイベントをバインドし、マウスをクリックして電球をオン/オフにします。

実施方法:

方法1:

画像要素を取得し、クリックイベントをボタンにバインドしてライトスイッチを制御します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ライトスイッチケース</title>
</head>
<本文>
    <img src="./img/关.gif" alt="">
    <button id="open">ライトを点灯する</button>
    <button id="close">ライトを消す</button>
</本文>
<スクリプト>
    var open = document.getElementById("open");
    var close = document.getElementById("close");
    var img = document.getElementsByTagName("img")[0];
    open.onclick=関数(){
        img.src="./img/开.gif"
    }
    close.onclick=関数(){
        img.src="./img/关.gif"
    }
</スクリプト>
</html>

要約: この方法は比較的簡単で、エラーが発生しにくいです。ボタンをバインドすることで、対応するライトスイッチの画像を直接取得できます。

実行結果:

関連する方法:

  • document.getElementById(): ID名で対応する要素を取得します。
  • document.getElementsByTagName(): 要素名で対応する要素を取得し、取得したオブジェクトは配列のようなオブジェクトです。
  • onclick: マウスクリックによってトリガーされるクリックイベント

方法2:

画像要素を取得し、スイッチイベントを画像に直接バインドします。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ライトスイッチケース</title>
</head>
<本文>
    <img src="./img/关.gif" alt="">
</本文>
<スクリプト>
    var img = document.getElementsByTagName("img")[0];
    var フラグ = false;
    img.onclick=関数(){
        if(フラグ){
            img.src="./img/关.gif";
            フラグ=false;
        }それ以外{
            img.src="./img/开.gif";
            フラグ=true;
        }
    }
</スクリプト>
</html>

注:このメソッドでは、ライトの初期状態を決定するためのフラグが必要です。クリック イベントを画像に直接バインドする場合は、フラグの初期値が false であることに注意してください。

実行結果: 電球をクリックすると、ライトの明るさと暗さが切り替わります。

関連画像:

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jsでライトスイッチの効果を実現
  • ライトスイッチの小さな例の JavaScript 実装

<<:  Linux/Mac に MySQL をインストールするときにパスワードを忘れた場合の解決策

>>:  Ubuntu 16.04 64 ビット版の VMware Tools のインストールと構成のグラフィック チュートリアル

推薦する

TypeScript インターフェースの紹介

目次1. インターフェース定義2. 属性2.1 オプション属性2.2 読み取り専用プロパティ3. ク...

Nginx+SSL による双方向認証を実装するためのサンプル コード

まずディレクトリを作成する cd /etc/nginx mkdir ssl cd ssl CA と自...

div が隠しテキストを超え、div 部分の向こうの CSS コードを隠します

隠れる前に:隠れた後: CS: ...コードをコピーコードは次のとおりです。オーバーフロー:非表示;...

vueプロジェクトのマルチ環境設定(.env)の実装

目次マルチ環境構成とは何ですか? また、なぜそれが必要なのですか? .env ファイルはどこで設定さ...

jconsole を使用してリモート Tomcat サービスを監視する方法

JConsoleとはJConsole は Java 5 で導入されました。 JConsole は、コ...

ウェブデザイン実践者必読のキャリアプラン

原文記事、転載の際は著者と出典を明記してください! Web デザインは間違いなくテクノロジーであり、...

JS は VUE コンポーネントに基づいて都市リスト効果を実装します

この記事の例では、VUEコンポーネントに基づいて都市リストエフェクトを実装するための具体的なコードを...

MySQL 8.0.23 のレプリケーション アーキテクチャにおけるスレーブ ノードの自動フェイルオーバー

私はしばらく MGR と連絡を取り合ってきました。MySQL 8.0.23 の登場により、MySQL...

MySQL InnoDB 監視 (システム層、データベース層)

MySQL InnoDB 監視 (システム層、データベース層) MySQL の監視に関しては、My...

つまり、フィルターコレクション

IE は開発の初期段階では頭を悩ませましたが、他のブラウザとは異なります。他のブラウザがサポートして...

Vue 3 カスタムディレクティブ開発の概要

指令とは何ですか? Angular と Vue はどちらもディレクティブの概念を持っており、これは通...

Docker コンテナを他のサーバーに移行する 5 つの方法

多くの場合、移行は避けられません。ハードウェアのアップグレード、データ センターの変更、古いオペレー...

Mysql系SQLクエリ文の書き順と実行順を詳しく解説

目次1. 完全なSQLクエリステートメントの記述順序2. 完全なSQL文の実行順序3. select...

VMwareがモジュールディスクを早期に開けない場合の解決策の詳細な説明

VMWare (Virtual Machine ware) は、「仮想 PC」ソフトウェア会社です。...

dockerでビルドしたnacos1.3.0の実装

1. nacosデータベースを再開します。データベース名nacos_configユーザー名とパスワー...