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 のインストールと構成のグラフィック チュートリアル

推薦する

CentOS7.x のアンインストールとインストール MySQL5.7 の操作手順とエンコード形式の変更方法

1. MySQL 5.7 のアンインストール1.1查看yum是否安裝過mysql CD yum li...

Windows システムの MySQL が中国語を入力および表示できない問題の解決方法

ステップ 1: メモ帳を使用して、MySQL インストール ディレクトリの「my.ini」ファイルを...

Vueはアンカー配置機能を実装します

この記事では、アンカー配置を実装するためのVueの具体的なコードを例として紹介します。具体的な内容は...

MySQL タイムスタンプ比較クエリで遭遇する落とし穴と解決策

目次タイムスタンプ比較クエリで遭遇する落とし穴タイムスタンプクエリ範囲の問題タイムスタンプ比較クエリ...

Linux sftp コマンドの使用法

SFTPの概念sftp は、安全なファイル転送プロトコルである Secure File Transf...

CSS 共通スタイルで二重矢印を描画するサンプルコード

1. 単一の矢印への複数の呼び出し単一の矢印を実装したら、二重矢印を実装するのは簡単です。上では、単...

Windows 10 で Hyper-V サービスをシャットダウンするいくつかの方法

VMware Workstation を使用して Windows 10 で仮想マシンを開くと、VMw...

CentOs7 64 ビット MySQL 5.6.40 ソースコードのインストール プロセス

1. インストールプロセス中に問題が発生しないように、まず依存パッケージをインストールします。 [r...

Vueはテーマ切り替えのための複数のアイデアを実装します

目次テーマを動的に変更する最初の方法: 動的コンポーネント2番目の方法はルーティング分離です要約する...

React+tsは二次リンク効果を実現します

この記事では、二次リンク効果を実現するためのReact+tsの具体的なコードを参考までに共有します。...

MySQL ストアド プロシージャの概念、原則、一般的な使用法の詳細な説明

この記事では、例を使用して、MySQL ストアド プロシージャの概念、原則、および一般的な使用法につ...

MySQL で null を置き換える IFNULL() および COALESCE() 関数の詳細な説明

MySQLではisnull()関数をnull値の代わりとして使用することはできません。次のように:ま...

Linux サーバー上で複数の SVN リポジトリを構成するプロセスの詳細な説明

1. 指定されたディレクトリにリポジトリを作成し、ディレクトリ全体を保存してください。この記事のサン...

WeChatミニプログラムのすべてのページがログインされていることを確認する方法

目次現状解決さらなる解決策やっと現状WeChat ミニプログラムには、ホームページ、個人ページ、いく...